CKEditor api學習地址： http://docs.ckeditor.com/#
點擊打開鏈接
通過修改配置文件，我們可以添加一些自定的功能，或去掉一些功能，或加上幾種常用字體
通過修改配置文件，我們可以添加一些自定的功能，或去掉一些功能，或加上幾種常用字體
1.在CKeditor的默認配置中是配置了所有toolbar
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode' , 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard' , 'undo' ] },
{ name: 'editing', groups: [ 'find' , 'selection', 'spellchecker' ] },
{ name: 'forms' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles' , 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list' , 'indent', 'blocks' , 'align' , 'bidi' ] },
{ name: 'links' },
{ name: 'insert' },
'/',
{ name: 'styles' },
{ name: 'colors' },
{ name: 'tools' },
{ name: 'others' },
{ name: 'about' }
];
tolbar就是編輯器上的每一個功能苦塊，最後的'/'表示的是換行，說明上面有三行。
如果只想使用自己想要的功能，則可以將不要的功能去掉
![]()
![]()
如下：
在config.js文件中
CKEDITOR.editorConfig = function(config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
// Default setting.
config.toolbarGroups = [
{ name: 'basicstyles', groups: [ 'basicstyles' , 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list' , 'indent', 'blocks' , 'align' , 'bidi' ] },
{ name: 'links' },
{ name: 'insert' },
'/',
{ name: 'styles' },
{ name: 'colors' },
{ name: 'tools' },
{ name: 'others' },
{ name: 'about' }
];
};
2.設置字體類型：
config.font_names ='Arial/Arial, Helvetica, sans-serif;' +'Times New Roman/Times New Roman, Times, serif;' +'Verdana';
config.font_names = 'Arial;Times New Roman;Verdana';
3.配置表情圖片：
1. 一般的表情圖片都是放到ckeditor\plugins\smiley下面
2. 配置表情圖片有幾個相關的屬性：
smiley_columns:表示一行多少列，放多少張圖片
smiley_descriptions:用於描述圖片的字符
smiley_images:用於保存圖片文件名的數組
smiley_path:指定表情圖片存放的路徑
因爲要涉及到文件的路徑，而一般都是項目路徑，所以這裏需要在js中使用到CKEDITOR.basePath這個變量的值，作爲存放文件的路徑
例：
//定義一個數組
var images = [];
for(var i=0;i<16;i++){
images[i] = i+1+'.gif';
}
config.smiley_path = CKEDITOR.basePath + 'plugins/smiley/ali/';
config.smiley_columns = 8;
config.smiley_images = images;
4.實現上傳功能：
新版的ckeditor將上傳的功能分離出來了，形成了一個新的ckfinder的功能，所以要在ckeditor中使用上傳功能，必須要添加ckfinder的文件，文件有ckfinder的核心文件，jar包，和配置文件
步驟：
（1）.添加ckfinder文件，將ckfinder的核心文件放到web-root下，將jar包倒入，將config.xml配置文件放到web-inf下
（2）.修改config.xml配置文件
< enabled>true </enabled> <!-- 啓動上傳功能 -->
< baseURL>/ userfiles/ </baseURL> <!-- 上傳路徑 -->
（ 3）.在web.xml文件中配置CKFinder.jar包下的核心Servlet類ConnectorServlet.class和過濾器類FileUploadFilter
這個配置如下：
<web-app version= "2.5"
xmlns= "http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" >
<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 >
<session-config >
<session-timeout> 10</ session-timeout>
</session-config >
<welcome-file-list >
<welcome-file >index.jsp </welcome-file>
</welcome-file-list >
</web-app>
（4）.在CKeditor中的config.js中添加如下代碼：
例：
//alert(window.location.href)//這裏是獲得項目路徑
CKEDITOR.editorConfig = function (config) {
config.filebrowserBrowseUrl = window.location.href+'ckfinder/ckfinder.html' ;
config.filebrowserImageBrowseUrl = window.location.href+'ckfinder/ckfinder.html?type=Images' ;
config.filebrowserFlashBrowseUrl = window.location.href+'ckfinder/ckfinder.html?type=Flash' ;
config.filebrowserUploadUrl = window.location.href+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files' ;
config.filebrowserImageUploadUrl = window.location.href+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images' ;
config.filebrowserFlashUploadUrl = window.location.href+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ;
config.filebrowserWindowWidth = '1000';
config.filebrowserWindowHeight = '700';
config.language = "zh-cn" ;
};
（5）.在jsp頁面中添加CKfinder標籤
<%@ taglib uri="http://ckeditor.com" prefix= "ckeditor" %>
<%@ taglib uri="http://cksource.com/ckfinder" prefix="ckfinder" %>
<link rel= "stylesheet" href ="ckeditor/samples/sample.css" type="text/css" ></link>
<script type= "text/javascript" src="js/jquery-1.8.0.js" ></script>
<script type= "text/javascript" src="ckeditor/ckeditor.js" ></script>
<script type= "text/javascript" src="ckeditor/adapters/jquery.js" ></script>
<script type= "text/javascript" src="ckfinder/ckfinder.js" ></script>
<body>
<textarea name="editor"></ textarea>
<ckfinder:setupCKEditor editor="editor" basePath="/MyCKEditor/ ckfinder/" />
<ckeditor:replace replace="editor" basePath=" /MyCKEditor/ ckeditor/" ></ckeditor:replace>
</body>
