常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ；和CKEditor實例

本文轉載自查看原文 2013-01-30 15:22 17367 基礎知識

目前市面上用的比較多的富文本編輯器有：

FreeTextBox 一個有很多年歷史的富文本編輯器了，使用簡單，而且一般的使用是免費的，但是不開源，上傳圖片上傳附件等功能沒有，擴展性差。

CuteEditor最強大的富文本編輯器，巨牛無比，但是是收費的，個人使用的話用下破解版倒無所謂，要想在企業中使用那就得買了，所以雖然強大，但是想節約的話就不考慮這個了。看看他的菜單就知道他有多牛了：

FCKEditor（升級版CKEditor）強大的開源富文本編輯器，各個語言中都可以使用。支持上傳圖片、Flash等，功能強擴展性強。

TinyMCE 也是一個開源的富文本編輯器，不過名氣沒有FCKEditor大，功能還是不錯。

KindEditor 一個國人開發的富文本編輯器，貌似還不錯，沒有深入研究。

下面我寫了一個很簡單CKEditor實例

web.xml

[html] view plain copy print ?

<?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 plain copy print ?

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 plain copy print ?

<?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">
<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 plain copy print ?

<%@ 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，當然可以直接生成一個靜態頁面，

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue集成ckeditor富文本框，怎么獲取CKEditor實例？ python+django常用富文本插件使用配置(ckeditor,kindeditor) 使用bootstrap中的bootstrapValidator，驗證ckeditor富文本框不為空 CKeditor5 富文本框圖片上傳的坑前端文本框插件KindEditor vue集成CKEditor構建框架的使用，遇到富文本框不出現工具欄等操作 Jeesite富文本編輯框ckeditor顯示錯誤 kindeditor富文本框使用方法 CKEditor富文本編輯器設置ckeditor文本框的寬度為百分比自適應