需求:
新闻内容的编辑需要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';
?