将CKEditor集成到Java开发环境中
本文主要介绍如何将CKEditor集成到Java开发环境中,CKEditor是FCKEditor的升级版,使用很方便。下面是基本使用方法:
第一步:下载必要的库
1、到CKEditor官网http://www.fckeditor.net/download/下载Ckeditor4.0.2,这是目前最新的版本,4.1马上就出来了。
2、找到CKEditor 3.6.4 for Java,download.jar按钮,下载ckeditor-java-core-3.5.3.zip,这是java集成的jar包,可以用来配置CKEditor,其中还有Ckeditor的标签,比较重要。
第二步:将ckeditor-java-core-3.5.3.jar及Ckeditor库放到工程相应目录下,jar包放到lib下,库文件(js等资源文件)放到存放页面资源的目录下,根据自己的情况
3、在需要使用编辑器的jsp页面中加入CKeditor标签库,这样可以使用<ckeditor>标签
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
4、如果让CKeditor自动创建实例,则只需在</body>标签之前添加一个<ckeditor:replace>(官方推荐这样做,在其他地方添加也可以)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <! DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %> < html > < body > < form action="sample_posteddata.jsp" method="get"> < p > < label for="editor1">Editor 1:</ label > < textarea cols="80" id="editor1" name="editor1" rows="10"></ textarea > </ p > < p > < input type="submit" value="Submit" /> </ p > </ form > < ckeditor:replace replace="editor1" basePath="/ckeditor/" /> </ body > </ html > |
注意:<ckeditor:replace>中replace对应的是要替换的<textarea>标签的id,basePath对应的是CKeditor资源文件的存放路径。如果需要替换多个<textarea>,则可以使用 <ckeditor:replaceAll>
标签,
1 | < ckeditor:replaceAll basePath="/ckeditor/" className="myclass"/> |
其中className是<textarea>的class样式,只要<textarea>的class样式为myclass,则都会被CKeditor实例替换。
5、如果想手动创建CKeditor实例,则可以通过<ckeditor:editor>标签创建。
1 | < ckeditor:editor textareaAttributes="<%=attr %>" basePath="/ckeditor/" editor="editor1" value="Type here" /> |
其中basePath是CKeditor存放目录,editor是全局<textarea>元素的name,value则是该<textarea>的默认值,textareaAttributes则对应<textarea>的配置信息,是一个java.util.HashMap类型的对象,key对应的是<textarea>中的属性名称name,value对应<textarea>中的属性值value。
1 2 3 4 5 | <% Map< String , String> attr = new HashMap< String , String>(); attr.put("rows", "8"); attr.put("cols", "50"); %> |
6、提交编辑内容
后台获取编辑内容和平时使用<textarea>没区别,CKEditor只是对<textarea>进行了增强,所以数据获取仍然是通过<textarea>的name属性。
如果想在js中获取CKEditor实例中的内容,则可以通过CKEditor API获取,
1 | var data = CKEDITOR.instances.editor1.getData(); |
基本流程就是这样,如果想修改CKeditor样式的话,可以修改CKeditor资源文件中的config.js,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | /* Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ CKEDITOR.editorConfig = function ( config ) { // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; config.language = 'zh-cn' ; // 配置语言 config.uiColor = '#FFF' ; // 背景颜色 config.width = 'auto' ; // 宽度 config.height = '300px' ; // 高度 config.skin = 'office2003' ; // 界面v2,kama,office2003 config.toolbar = 'MyToolbar' ; // 工具栏风格(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.js config.toolbarCanCollapse = false ; // 工具栏是否可以被收缩 config.resize_enabled = false ; // 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js //自定义的工具栏 config.toolbar_MyToolbar = [ [ 'Source' , '-' , 'Save' , 'Preview' , 'Print' ], [ 'Cut' , 'Copy' , 'Paste' , 'PasteText' , 'PasteFromWord' , '-' , 'Scayt' ], [ 'Undo' , 'Redo' , '-' , 'Find' , 'Replace' , '-' , 'SelectAll' , 'RemoveFormat' ], [ 'Image' , 'Flash' , 'Table' , 'HorizontalRule' , 'Smiley' , 'SpecialChar' , 'PageBreak' ], '/' , [ 'Styles' , 'Format' ], [ 'Bold' , 'Italic' , 'Strike' ], [ 'NumberedList' , 'BulletedList' , '-' , 'Outdent' , 'Indent' , 'Blockquote' ], [ 'Link' , 'Unlink' , 'Anchor' ], [ 'Maximize' , '-' , 'About' ] ]; }; |
也可以直接在jsp里设置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="com.ckeditor.CKEditorConfig"%> <%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %> <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> < html > < head > < meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> < title >新闻中心</ title > </ head > < body > < center > < form action="${pageContext.request.contextPath}/news/add"> 标题:< input name="title" type="text"/>< p /> 内容:< textarea name="content" id="editor" rows="5" cols="20"></ textarea > < label >公告</ label >:< input type="radio" name="ntype" value="1"/> < label >新闻</ label >:< input type="radio" name="ntype" value="2"/> < input type="submit" value="添加"> </ form > </ center > <% CKEditorConfig settings = new CKEditorConfig(); settings.addConfigValue("height","300"); settings.addConfigValue("width","600"); %> < ckeditor:replace replace="editor" basePath="${pageContext.request.contextPath}/ckeditor/" config="<%=settings %>"/> </ body > </ html > |
想进一步了解的话,可以参考CKEditor官网的指导说明,http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Java/Integration
编辑器一般使用都很简单,能满足一般需求就行。当然,这款编辑器是国外研发的,国内也有比较好的在线编辑器,比如kindeditor,中文显示,貌似使用起来比这个还简单,有兴趣大家可以尝试一下,KindEditor官网:http://www.kindsoft.net/
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步