fckeditor和ckeditor3.5.3在J2ee下的使用

需求：

新闻内容的编辑需要html编辑器，比较流行的为ckeditor，而ckeditor源于fckeditor，so均做开发尝试。

实现：

ckeditor实现：

jar依赖：

<dependency>
	<groupId>com.ckeditor</groupId>
	<artifactId>ckeditor-java-core</artifactId>
	<version>3.5.3</version>
</dependency>

js：参见附件

代码实现步骤：

1.jsp的taglib中加入：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page import="java.util.*,java.text.*"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>

2.基于ckeditor:replace标签来操作form.yourtextid

<form action="${basePath}editor/ckadd" method="post">
    <span style="background-color: #ffff00;">
    <textarea cols="80" id="news" name="news" rows="10"></textarea>
    <input type="submit" vlaue="创建"/>
</form>
<ckeditor:replace replace="news" basePath="${basePath}static/thirdparty/ckeditor3.5.3/" />

3.在后台通过request.getParameter("news");来获取数据

灰常简单方便

fckeditor实现：

1.引入fckeditor.js：

 <script type="text/javascript" src="${basePath}static/thirdparty/fckeditor/fckeditor.js">

 2.构建FCKeditor，其构造函数中的为后台获取的name：

<form action="${basePath}editor/fckadd" method="post">
    <span style="background-color: #ffff00;">
    <script type="text/javascript">
	var sBasePath = '${basePath}static/thirdparty/fckeditor/';
	var oFCKeditor = new FCKeditor('news');
	oFCKeditor.BasePath = sBasePath;
	oFCKeditor.Height = 300;
	oFCKeditor.Value = '';
	oFCKeditor.Create();
    </script>
    </span>
    </br>
    <input type="submit" vlaue="创建"/>
</form>

3.后台获取：request.getParameter("news");

 

对比：看个人喜好推荐用高版本的

ckeditor中不同的风格可以在config.js中设置，比如：

config.language = 'zh-cn';
config.autoDetectLanguage = false ;
config.startupFocus = false ;
config.font_names	= '宋体;黑体;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
//config.skin = 'office2003';
config.skin = 'v2';