Java开发环境中使用CKEditor集成
本文主要介绍如何将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>（官方推荐这样做，在其他地方添加也可以）
?1234567891011121314151617<!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:editortextareaAttributes='<%=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。
?12345<% 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获取，
?1var data = CKEDITOR.instances.editor1.getData();基本流程就是这样，如果想修改CKeditor样式的话，可以修改CKeditor资源文件中的config.js，
?12345678910111213141516171819202122232425262728293031323334/*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里设置：
?123456789101112131415161718192021222324252627<%@ 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官网的指导说 config.toolbar = ‘Full’; config.toolbar_Full = [ [‘Source’,’-‘,’Save’,’NewPage’,’Preview’,’-‘,’Templates’], [‘Cut’,’Copy’,’Paste’,’PasteText’,’PasteFromWord’,’-‘,’Print’, ‘SpellChecker’, ‘Scayt’], [‘Undo’,’Redo’,’-‘,’Find’,’Replace’,’-‘,’SelectAll’,’RemoveFormat’], [‘Form’, ‘Checkbox’, ‘Radio’, ‘TextField’, ‘Textarea’, ‘Select’, ‘Button’, ‘ImageButton’, ‘HiddenField’], [‘BidiLtr’, ‘BidiRtl’], ‘/’, [‘Bold’,’Italic’,’Underline’,’Strike’,’-‘,’Subscript’,’Superscript’], [‘NumberedList’,’BulletedList’,’-‘,’Outdent’,’Indent’,’Blockquote’,’CreateDiv’], [‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyBlock’], [‘Link’,’Unlink’,’Anchor’], [‘Image’,’Flash’,’Table’,’HorizontalRule’,’Smiley’,’SpecialChar’,’PageBreak’], ‘/’, [‘Styles’,’Format’,’Font’,’FontSize’], [‘TextColor’,’BGColor’], [‘Maximize’, ‘ShowBlocks’,’-‘,’About’] ]; config.toolbar_Basic = [ [‘Bold’, ‘Italic’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Link’, ‘Unlink’,’-‘,’About’] ];
相关文章：
网公网安备