Java开发环境中使用CKEditor集成

本文主要介绍如何将CKEditor集成到Java开发环境中，CKEditor是FCKEditor的升级版，使用很方便。下面是基本使用方法： 第一步：下载必要的库 1、到CKEditor官网http://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标签库，这样可以使用标签

<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>

4、如果让CKeditor自动创建实例，则只需在标签之前添加一个（官方推荐这样做，在其他地方添加也可以）

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>

<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>

                Editor 1:

注意：中replace对应的是要替换的标签的id，basePath对应的是CKeditor资源文件的存放路径。如果需要替换多个<textarea>，则可以使用 <ckeditor:replaceAll>标签，</p><p>?</p><p> 1</p><p> </p><p> <ckeditor:replaceAll basePath="/ckeditor/" className="myclass"/></p><p>其中className是<textarea>的class样式，只要<textarea>的class样式为myclass，则都会被CKeditor实例替换。 5、如果想手动创建CKeditor实例，则可以通过<ckeditor:editor>标签创建。</p><p>?</p><p> 1</p><p> </p><p> <ckeditor:editortextareaAttributes="<%=attr %>" basePath="/ckeditor/" editor="editor1" value="Type here" /></p><p>其中basePath是CKeditor存放目录，editor是全局<textarea>元素的name，value则是该<textarea>的默认值，textareaAttributes则对应<textarea>的配置信息，是一个java.util.HashMap类型的对象，key对应的是<textarea>中的属性名称name,value对应<textarea>中的属性值value。</p><p>?</p><p> 1</p><p> </p><p> 2</p><p> </p><p> 3</p><p> </p><p> 4</p><p> </p><p> 5</p><p> </p><p> <%</p><p> </p><p>     Map<String, String> attr = new HashMap<String, String>();</p><p> </p><p>     attr.put("rows", "8");</p><p> </p><p>     attr.put("cols", "50");</p><p> </p><p> %></p><p>6、提交编辑内容 后台获取编辑内容和平时使用<textarea>没区别，CKEditor只是对<textarea>进行了增强，所以数据获取仍然是通过<textarea>的name属性。 如果想在js中获取CKEditor实例中的内容，则可以通过CKEditor API获取，</p><p>?</p><p> 1</p><p> </p><p> var data = CKEDITOR.instances.editor1.getData();</p><p>基本流程就是这样，如果想修改CKeditor样式的话，可以修改CKeditor资源文件中的config.js，</p><p>?</p><p> 1</p><p> </p><p> 2</p><p> </p><p> 3</p><p> </p><p> 4</p><p> </p><p> 5</p><p> </p><p> 6</p><p> </p><p> 7</p><p> </p><p> 8</p><p> </p><p> 9</p><p> </p><p> 10</p><p> </p><p> 11</p><p> </p><p> 12</p><p> </p><p> 13</p><p> </p><p> 14</p><p> </p><p> 15</p><p> </p><p> 16</p><p> </p><p> 17</p><p> </p><p> 18</p><p> </p><p> 19</p><p> </p><p> 20</p><p> </p><p> 21</p><p> </p><p> 22</p><p> </p><p> 23</p><p> </p><p> 24</p><p> </p><p> 25</p><p> </p><p> 26</p><p> </p><p> 27</p><p> </p><p> 28</p><p> </p><p> 29</p><p> </p><p> 30</p><p> </p><p> 31</p><p> </p><p> 32</p><p> </p><p> 33</p><p> </p><p> 34</p><p> </p><p> /*</p><p> </p><p> Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.</p><p> </p><p> For licensing, see LICENSE.html or http://ckeditor.com/license</p><p> </p><p> */</p><p> </p><p>  </p><p> </p><p> CKEDITOR.editorConfig = function( config )</p><p> </p><p> {</p><p> </p><p>     // Define changes to default configuration here. For example:</p><p> </p><p>     // config.language = 'fr';</p><p> </p><p>     // config.uiColor = '#AADC6E';</p><p> </p><p>     config.language = 'zh-cn'; // 配置语言</p><p> </p><p>     config.uiColor = '#FFF'; // 背景颜色</p><p> </p><p>     config.width = 'auto'; // 宽度</p><p> </p><p>     config.height = '300px'; // 高度</p><p> </p><p>     config.skin = 'office2003';// 界面v2,kama,office2003</p><p> </p><p>     config.toolbar = 'MyToolbar';// 工具栏风格（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js</p><p> </p><p>     config.toolbarCanCollapse = false;// 工具栏是否可以被收缩</p><p> </p><p>     config.resize_enabled = false;// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js</p><p> </p><p>     </p><p> </p><p>     //自定义的工具栏   </p><p> </p><p>     config.toolbar_MyToolbar =</p><p> </p><p>     [</p><p> </p><p>         ['Source','-','Save','Preview','Print'],</p><p> </p><p>         ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],</p><p> </p><p>         ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],</p><p> </p><p>         ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],</p><p> </p><p>         '/',</p><p> </p><p>         ['Styles','Format'],</p><p> </p><p>         ['Bold','Italic','Strike'],</p><p> </p><p>         ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],</p><p> </p><p>         ['Link','Unlink','Anchor'],</p><p> </p><p>         ['Maximize','-','About']</p><p> </p><p>     ];</p><p> </p><p> };</p><p>也可以直接在jsp里设置：</p><p>?</p><p> 1</p><p> </p><p> 2</p><p> </p><p> 3</p><p> </p><p> 4</p><p> </p><p> 5</p><p> </p><p> 6</p><p> </p><p> 7</p><p> </p><p> 8</p><p> </p><p> 9</p><p> </p><p> 10</p><p> </p><p> 11</p><p> </p><p> 12</p><p> </p><p> 13</p><p> </p><p> 14</p><p> </p><p> 15</p><p> </p><p> 16</p><p> </p><p> 17</p><p> </p><p> 18</p><p> </p><p> 19</p><p> </p><p> 20</p><p> </p><p> 21</p><p> </p><p> 22</p><p> </p><p> 23</p><p> </p><p> 24</p><p> </p><p> 25</p><p> </p><p> 26</p><p> </p><p> 27</p><p> </p><p> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%></p><p> </p><p> <%@ page import="com.ckeditor.CKEditorConfig"%></p><p> </p><p> <%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %></p><p> </p><p> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w3.org/TR/html4/loose.dtd"></p><p> </p><p> <html></p><p> </p><p> <head></p><p> </p><p> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></p><p> </p><p> <title>新闻中心</title></p><p> </p><p> </head></p><p> </p><p> <body></p><p> </p><p> <center></p><p> </p><p> <form action="${pageContext.request.contextPath}/news/add"></p><p> </p><p> 标题:<input name="title" type="text"/><p/></p><p> </p><p> 内容:<textarea name="content" id="editor" rows="5" cols="20">

公告:

新闻:

<%

    CKEditorConfig settings = new CKEditorConfig();

    settings.addConfigValue("height","300");

    settings.addConfigValue("width","600");

%>

想进一步了解的话，可以参考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’] ];

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。