目前市面上用的比较多的富文本编辑器有：

FreeTextBox 一个有很多年历史的富文本编辑器了，使用简单，而且一般的使用是免费的，但是不开源，上传图片上传附件等功能没有，扩展性差。

CuteEditor最强大的富文本编辑器，巨牛无比，但是是收费的，个人使用的话用下破解版倒无所谓，要想在企业中使用那就得买了，所以虽然强大，但是想节约的话就不考虑这个了。看看他的菜单就知道他有多牛了：

FCKEditor（升级版CKEditor）强大的开源富文本编辑器，各个语言中都可以使用。支持上传图片、Flash等，功能强扩展性强。

TinyMCE 也是一个开源的富文本编辑器，不过名气没有FCKEditor大，功能还是不错。

KindEditor 一个国人开发的富文本编辑器，貌似还不错，没有深入研究。

下面我写了一个很简单CKEditor实例

web.xml

[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app version="2.5"
  3. xmlns="http://java.sun.com/xml/ns/javaee"
  4. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  5. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
  6. http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  7. <filter>
  8. <filter-name>struts2</filter-name>
  9. <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
  10. </filter>
  11. <filter-mapping>
  12. <filter-name>struts2</filter-name>
  13. <url-pattern>/*</url-pattern>
  14. </filter-mapping>
  15. <welcome-file-list>
  16. <welcome-file>index.jsp</welcome-file>
  17. </welcome-file-list>
  18. </web-app>
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"><filter><filter-name>struts2</filter-name><filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class></filter><filter-mapping><filter-name>struts2</filter-name><url-pattern>/*</url-pattern></filter-mapping><welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list>
</web-app>

CkeditorAction

[java] view plaincopyprint?
  1. import com.opensymphony.xwork2.ActionSupport;
  2. public class CkeditorAction extends ActionSupport{
  3. private String editor1;
  4. public String execute(){
  5. <strong>System.out.println(editor1);</strong>
  6. return SUCCESS;
  7. }
  8. public String getEditor1() {
  9. return editor1;
  10. }
  11. public void setEditor1(String editor1) {
  12. this.editor1 = editor1;
  13. }
  14. }
import com.opensymphony.xwork2.ActionSupport;public class CkeditorAction extends ActionSupport{private String editor1;public String execute(){System.out.println(editor1);return SUCCESS;}public String getEditor1() {return editor1;}public void setEditor1(String editor1) {this.editor1 = editor1;}
}

在控制台打印使用CKEditor从页面传过来的的CKEditor文本内容，

struts.xml

[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE struts PUBLIC
  3. "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
  4. "http://struts.apache.org/dtds/struts-2.0.dtd">
  5. <struts>
  6. <package name="wan" extends="struts-default">
  7. <!--导出Ckeditor  -->
  8. <action name="Ckeditor" class="com.wanwan.app.action.CkeditorAction">
  9. <result name="success">/ce/uploadImage.jsp</result>
  10. </action>
  11. </package>
  12. </struts>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN""http://struts.apache.org/dtds/struts-2.0.dtd"><struts><package name="wan" extends="struts-default"><!--导出Ckeditor  --><action name="Ckeditor" class="com.wanwan.app.action.CkeditorAction"><result name="success">/ce/uploadImage.jsp</result></action></package></struts>

index.jsp

[html] view plaincopyprint?
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  7. <html>
  8. <head>
  9. <base href="<%=basePath%>">
  10. <title>富文本框</title>
  11. <strong><script type="text/javascript" src="ckeditor/ckeditor.js"></script></strong>
  12. <script type="text/javascript">
  13. </script>
  14. </head>
  15. <body>
  16. <form action="Ckeditor" method="post" >
  17. <strong><textarea id="editor1" name="editor1"><p>Initial value.</p></textarea><br/>
  18. <script type="text/javascript">
  19. CKEDITOR.replace( 'editor1' );
  20. </script></strong>
  21. <input type="submit" value="提交">
  22. </form>
  23. </body>
  24. </html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"> <title>富文本框</title> <script type="text/javascript" src="ckeditor/ckeditor.js"></script><script type="text/javascript">  </script>  </head><body><form action="Ckeditor" method="post" ><textarea id="editor1" name="editor1"><p>Initial value.</p></textarea><br/><script type="text/javascript">  CKEDITOR.replace( 'editor1' );  </script><input type="submit" value="提交"> </form></body>
</html>

注意粗体部分，引用ckeditor

说明：以上代码是将CKEditor文本类容传到action，并且在action打印出来，相信看到的人会连接数据库，这里我就不写了，一般数据库类型可以用大文本或者CLOB，当然可以直接生成一个静态页面，

常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ；和CKEditor实例...相关推荐

  1. Layui富文本框插件拓展

    事前准备: 更多详情可见我个人博客:http://www.guoqingyun.top/ 首先引入layui的一系列css,js文件:layui.css,layui.js,layedit.js. 原生 ...

  2. 14款前端常用的富文本编辑器插件

    富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...

  3. 14款web前端常用的富文本编辑器插件

    富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...

  4. php文本框长度限制,php截取富文本框中的固定长度的字符

    ai,哎怎么赶脚自己写东西越来越小儿科了呢,现在连这个问题都找了好半天 因为后台是的内容是富文本编辑器编辑的,前台我傻逼的直接截取了字符串,然后样式啥的都乱了,找了半天是因为富文本的问题 其实解决办法 ...

  5. 使用vue制作富文本框

    这里分享一个富文本框插件,如图 使用方法: 1-安装 npm install --save vue2-editor或者yarn add vue2-editor 2- 使用 // Basic Use - ...

  6. 【Django 027】tinymce富文本框使用详解

    针对博客和论坛类网站,用户需要在网页的富文本框中输入内容传递到后端.那么Django项目如何生成一个包含富文本框的页码,又如何获取用户上传的富文本内容呢?这一节我们就一起来看看. 我是T型人小付,一位 ...

  7. 在html页面写一个富文本框

    第一步:获取到富文本框的这个文件,链接地址:https://ckeditor.com/cke4/builder (1)里面有几个选择,看你需求自己进行选择,然后鼠标一直拖到最下面,开始下载包 下面我只 ...

  8. ueditor 不显示工具栏_Python 之Django富文本框Ueditor的使用

    Django框架是用Python进行Web开发的重要框架,进行Web开发通常会用到网页编辑器,百度的Ueditor网页编辑器功能非常强大,不直接支持python,但有Django第三方插件支持这就是D ...

  9. html加载富文本_Uniapp基础实战富文本框解析 WordPress rest api实例

    文本是更具上篇文章uni-app上下拉刷新的续文有需要了解上文的请点击下面连接访问 传送门: Uni-app实战上加载新下拉刷新 WordPress rest api实例 那么我们就开始了,主要的要是 ...

最新文章

  1. 基于SSM实现的图书馆管理系统
  2. 易中天与单田芳的区别在哪儿
  3. Django 与ajax交互
  4. Android Notification实现推送消息过程中接受到消息端有声音及震动及亮屏提示
  5. 使用Python配合Evernote完成每周工作安排
  6. python导入xlrd库_python中xlrd库如何实现文件读取？
  7. javascript基础修炼——手把手教你造一个简易的require.js
  8. 消息称网易云音乐寻求在港上市 或于明年正式IPO
  9. Apple Mac OS X每日一技巧016:MacBook电源线如何缠绕
  10. android 第三方框架
  11. Python numpy 多维数组切片
  12. 使用Python控制手机
  13. 中华民族(汉族及其他民族)起源
  14. SiamRPN++相对于SiamRPN的改进
  15. CocCocoa Touch框架和Cocoa
  16. cesium实现立体墙（垂直、水平）渐变泛光效果
  17. sundayplayer第一版本开放源代码
  18. 复选框checkbox自定义样式
  19. 基于QT5.8+STM32F103的电压采集和实时电压数据的动态显示实例（二）
  20. 全排列Permutation

热门文章

  1. MySQL 性能优化，优化设计及设计原则解读
  2. Feflow 源码解读
  3. 现成Android 5.0系统源代码
  4. 成都Uber优步司机奖励政策（1月20日）
  5. PHP中memcached的使用
  6. 浅谈Redis与MySQL的耦合性以及利用管道完成MySQL到Redis的高效迁移
  7. SyntaxHighlighter -- 代码高亮插件
  8. schema类SpringMVC+Hibernate+Spring整合（二）
  9. 购物价值观（values of shopping）
  10. CF里面的资源载入问题