常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ;和CKEditor实例
2013-01-30 15:22
344 查看
目前市面上用的比较多的富文本编辑器有:
FreeTextBox 一个有很多年历史的富文本编辑器了,使用简单,而且一般的使用是免费的,但是不开源,上传图片上传附件等功能没有,扩展性差。
CuteEditor最强大的富文本编辑器,巨牛无比,但是是收费的,个人使用的话用下破解版倒无所谓,要想在企业中使用那就得买了,所以虽然强大,但是想节约的话就不考虑这个了。看看他的菜单就知道他有多牛了:
FCKEditor(升级版CKEditor)强大的开源富文本编辑器,各个语言中都可以使用。支持上传图片、Flash等,功能强扩展性强。
TinyMCE 也是一个开源的富文本编辑器,不过名气没有FCKEditor大,功能还是不错。
KindEditor 一个国人开发的富文本编辑器,貌似还不错,没有深入研究。
下面我写了一个很简单CKEditor实例
web.xml
[html] view plaincopyprint?<?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>
[java] view plaincopyprint?import com.opensymphony.xwork2.ActionSupport;
public class CkeditorAction extends ActionSupport{
private String editor1;
public String execute(){
<strong>System.out.println(editor1);</strong>
return SUCCESS;
}
public String getEditor1() {
return editor1;
}
public void setEditor1(String editor1) {
this.editor1 = editor1;
}
}
struts.xml
[html] view plaincopyprint?<?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>
<%
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>
<strong><script type="text/javascript" src="ckeditor/ckeditor.js"></script></strong>
<script type="text/javascript">
</script>
</head>
<body>
<form action="Ckeditor" method="post" >
<strong><textarea id="editor1" name="editor1"><p>Initial value.</p></textarea><br/>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script></strong>
<input type="submit" value="提交">
</form>
</body>
</html>
注意粗体部分,引用ckeditor
说明:以上代码是将CKEditor文本类容传到action,并且在action打印出来,相信看到的人会连接数据库,这里我就不写了,一般数据库类型可以用大文本或者CLOB,当然可以直接生成一个静态页面,
FreeTextBox 一个有很多年历史的富文本编辑器了,使用简单,而且一般的使用是免费的,但是不开源,上传图片上传附件等功能没有,扩展性差。
CuteEditor最强大的富文本编辑器,巨牛无比,但是是收费的,个人使用的话用下破解版倒无所谓,要想在企业中使用那就得买了,所以虽然强大,但是想节约的话就不考虑这个了。看看他的菜单就知道他有多牛了:
FCKEditor(升级版CKEditor)强大的开源富文本编辑器,各个语言中都可以使用。支持上传图片、Flash等,功能强扩展性强。
TinyMCE 也是一个开源的富文本编辑器,不过名气没有FCKEditor大,功能还是不错。
KindEditor 一个国人开发的富文本编辑器,貌似还不错,没有深入研究。
下面我写了一个很简单CKEditor实例
web.xml
[html] view plaincopyprint?<?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>
<?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?import com.opensymphony.xwork2.ActionSupport;
public class CkeditorAction extends ActionSupport{
private String editor1;
public String execute(){
<strong>System.out.println(editor1);</strong>
return SUCCESS;
}
public String getEditor1() {
return editor1;
}
public void setEditor1(String editor1) {
this.editor1 = editor1;
}
}
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?<?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>
<?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?<%@ 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>
<strong><script type="text/javascript" src="ckeditor/ckeditor.js"></script></strong>
<script type="text/javascript">
</script>
</head>
<body>
<form action="Ckeditor" method="post" >
<strong><textarea id="editor1" name="editor1"><p>Initial value.</p></textarea><br/>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script></strong>
<input type="submit" value="提交">
</form>
</body>
</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实例
- 常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ;和CKEditor实例
- 常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介
- 常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介
- ckeditor KindEditor eWebEditor WQeditor FreeTextbox Tinymce 几款在线编辑器的比较(附各版本demo下载地址)
- Cute Editor/Webhtmleditor/Kindeditor/Freetextbox网页编辑器漏洞手册
- 100多个经典常用的jQuery插件大全实例演示和下载
- asp.net VS 在线文本编辑器FCKeditor,FreeTextBox,TinyMCE比较
- fckeditor 插件实例 制作步骤
- [导入]WYSIWYG Web Editor: FCKeditor 2.2 的设置.修改.使用 和 FreeTextBox的简介
- 100多个经典常用的PHP功能插件大全实例演示和下载
- 常用文本框内容自动垂直居中,并且默认提示文字可单击为空(实例)!
- 【jQuery插件】autoTextarea-文本框根据输入内容自适应高度的实例页面
- 文本框文本域提示自动显示隐藏jQuery小插件实例页面
- ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
- AngularJs常用模糊搜索插件实例
- 实例解析jQuery插件EasyUI最常用的表单验证规则
- Jenkins安装、配置,常用中间件、插件构建实例
- 常用文本框内容自动垂直居中,并且默认提示文字可单击为空(实例)!
- 富文本插件ckeditor和kindeditor