ckeditor4.2.1在java中的配置

著名的开源网页编辑软件FCKEditor在09年发布更新到3.0，并改名为CKEditor。
原来叫FCK，是因为最初的开发者叫Frederico Calderia Knabben；
现在叫CK，意指"Content and Knowledge"。

CKEditor是FCKeditor的一个完全重写版本，加载更快更方便使用。

小弟不才，此乃我csdn上发表的处女作，，不敢说全是原创，但确实花了不少时间研究目前最新版的配置，是的，只是目前最新版，以后的版本可能会有误差，不管了，开始正文了。

1.首先去官网下载最新版的编辑器

选择full-package，是的就是full，为什么？因为我可以自定义，想去掉哪些，想留下哪些都是我说了算

然后往下移，下载最新版的ckeditor3.6.4for java

现在我们开搞了，我使用的是MyEclipse10，这个工具版本目录差别好像不大。

2.首先我们解压

解压后将ckeditor目录复制到webroot下，ckeditor-java-core-3.5.3.jar添加到WEB-INF/lib中

3.使用

说到这里可能大家都是满足于在jsp页面中用如下代码

window.onload = function() {

CKEDITOR.replace('text');

}

这里我们要优雅的做，jsp的核心就是标签嘛，先不管他的本质是servlet

所以我们在jsp页面中导入标签库<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>

然后在textarea标签后引入标签<ckeditor:replace replace="info" basePath="ckeditor/" />

4.到此已经可以使用了，我们开启服务器后可以看到那个界面了，是不是很漂亮？

接下来就是配置了，以下配置均在WebRoot/ckeditor/config.js中进行，因为这里的配置信息会影响到编辑器。接下里在config.js中敲代码了，语言可以不用配置，会自动检查

5.配置编辑器的宽高，随便你自己怎么弄
config.width = "900";
config.height = "300";

6.配置基本路径
var contextPath = location.pathname;
var index =contextPath.substr(1).indexOf("/");
contextPath = contextPath.substr(0,index+1);
config.baseHref = location.protocol + "//" + location.hostname + contextPath;

7.配置表情（默认表情太少，也不怎么样）
配置表情地址
第一种方法:直接拷贝至WebRoot/ckeditor/plugins/smiley/images下，无需配置路径
第二种方法:将表情文件夹copy至WebRoot/ckeditor/plugins/smiley下并指定表情路径和表情
我这里的表情文件夹是wwemo
config.smiley_path = config.baseHref + '/ckeditor/plugins/smiley/wwemo/';

配置表情内容
config.smiley_images = ['01.gif','02.gif','03.gif','04.gif','05.gif','06.gif','07.gif','08.gif','09.gif',
'10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif',
'20.gif','21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif',
'30.gif','31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif',
'40.gif','41.gif','42.gif','43.gif','44.gif','45.gif','46.gif','47.gif','48.gif','49.gif',
'50.gif','51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif','59.gif',
'60.gif','61.gif','62.gif','63.gif','64.gif','65.gif','66.gif','67.gif','68.gif','69.gif',
'70.gif','71.gif','72.gif','73.gif','74.gif','75.gif','76.gif','77.gif','78.gif','79.gif',
'80.gif','81.gif','82.gif','83.gif','84.gif'];

这里，要配置的表情可能会很多，你自己看着办，我是直接用代码生成的，然后copy过来的，怎么生成？for循环会写吧？

配置表情描述,可以去掉或者写上描述，这里就不写了，太多了

你闲的蛋疼或者确实需要就慢慢写吧
config.smiley_descriptions = [];//去掉图片默认描述

配置显示表情的列数
config.smiley_columns = 6;

给表情框加上滚动条
在ckeditor/skins/moono/dialog.css中最后增加代码.cke_dialog_ui_html{width:auto;height:350px;overflow:auto;}

8.配置文件上传
打开图片上传会看到预览区域有一大片文字，将其复制
打开WebRoot/ckeditor/plugins/image/dialogs/image.js
查找刚刚复制的一大段文字，替换成空字符串
或者
配置指定图片预览区文字为空
config.image_previewText = '';

9.但是现在文件只能填入URL，不能自己插入本地图片

所以我们要用到另一个东西

下载ckfinder免费试用版（大家无需理会这是试用版）

解压后找到CKFinderJava-2.4.war继续解压
把ckfinder目录拷贝到webroot下，和ckeditor同级目录
把他WEB-INF下的config.xml拷贝到自己的WEB-INF下
把他WEB-INF下的lib下的所有jar（除了mail-1.x.x.jar和activation-1.x.jar，这两个是邮件jar包）全部copy到自己的lib下

打开config.xml修改enabled为true
<enabled>true</enabled>
指定baseURL--写自己的站点（CKFinderJava代表项目名，userfiles代表上传文件的文件夹）指定这个后可以不指定baseDIR
<baseURL>http://example.com/CKFinderJava/userfiles/</baseURL>

把他WEB-INF下的web.xml里面的如下内容复制到自己的web.xml中

<servlet><servlet-name>ConnectorServlet</servlet-name><servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class><init-param><param-name>XMLConfig</param-name><param-value>/WEB-INF/config.xml</param-value></init-param><init-param><param-name>debug</param-name><param-value>false</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>ConnectorServlet</servlet-name><url-pattern>/ckfinder/core/connector/java/connector.java</url-pattern></servlet-mapping><filter><filter-name>FileUploadFilter</filter-name><filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>                <init-param>                    <param-name>sessionCookieName</param-name>                    <param-value>JSESSIONID</param-value>                </init-param>                <init-param>                    <param-name>sessionParameterName</param-name>                    <param-value>jsessionid</param-value>                </init-param></filter><filter-mapping><filter-name>FileUploadFilter</filter-name><url-pattern>/ckfinder/core/connector/java/connector.java     </url-pattern></filter-mapping>

回到WebRoot/ckeditor/config.js中
添加如下代码指定上传url
config.filebrowserUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';

这时我们会看到一个浏览服务器的按钮，实际是个超链接

这个对外开放时要隐藏掉浏览服务器的按钮

打开WebRoot/ckeditor/plugins/image/dialogs/image.js
crtl+F查找第一个browse,修改后面style中的display:inline-block为display:none
继续查找style:"float:right;"修改为style:"float:right;display:none"


打开WebRoot/ckeditor/plugins/flash/dialogs/flash.js
查找filebrowser:"info:src",hidden:!0,style:"display:inline-block;margin-top:10px;"
修改style中的display:inline-block为display:none

9.配置toolbar（可参照下面的full，去掉自己不要的）
config.toolbar_Full =
 [
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
 ];


定义自己的toolbar可参照上面的full，我的如下：
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
{ name: 'document', items : [ 'Source','-','NewPage','Preview' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
'/',
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'styles', items : [ 'Font','FontSize' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'Outdent','Indent','-','Blockquote' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'tools', items : [ 'Maximize'] }
];


配置指定字体（自己想要什么字体就配什么字体）
config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Courier New';


设置工具栏可折叠（减少toolbar的占用空间）
config.toolbarCanCollapse = true;

到此为止，你已经可以享受最新ckeditor带来的享受了，大家觉得还要配置什么就只能自己官网查或者百度谷歌去搜了，我写得已经够多了，希望俺的处女作能给大家带来帮助