ckeditor4.2.1在java中的配置

著名的開源網頁編輯軟體FCKEditor在09年釋出更新到3.0，并改名為CKEditor。

原來叫FCK，是因為最初的開發者叫Frederico Calderia Knabben；

現在叫CK，意指"Content and Knowledge"。

CKEditor是FCKeditor的一個完全重寫版本，加載更快更友善使用。

小弟不才，此乃我csdn上發表的處女作，，不敢說全是原創，但确實花了不少時間研究目前最新版的配置，是的，隻是目前最新版，以後的版本可能會有誤差，不管了，開始正文了。

1.首先去官網下載下傳最新版的編輯器

ckeditor4.2.1在java中的配置

選擇full-package，是的就是full，為什麼？因為我可以自定義，想去掉哪些，想留下哪些都是我說了算

ckeditor4.2.1在java中的配置

然後往下移，下載下傳最新版的ckeditor3.6.4for java

ckeditor4.2.1在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免費試用版（大家無需理會這是試用版）

ckeditor4.2.1在java中的配置

解壓後找到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

指定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帶來的享受了，大家覺得還要配置什麼就隻能自己官網查或者百度谷歌去搜了，我寫得已經夠多了，希望俺的處女作能給大家帶來幫助

ckeditor4.2.1在java中的配置

繼續閱讀

關于Gradle配置的小結

Java小案例——随機數猜測随機數猜測

nginx location中斜線的位置的重要性

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的簡單使用

neo4j之cypher使用文檔

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method