最近在自己做的項目中需要用到線上編輯器,在網上搜了下，發現了ckeditor，當然網上有好幾種線上編輯器，不知道為什麼選擇了ckeditor,本來打算用Fckeditor的，但是看到網上還需要匯入好幾個JAR包，還要進行一堆配置，有點麻煩，本來項目中也就用一下，還要那麼麻煩地去配置。
於是去ckeditor網站下載了最新版本的ckeditor，ckeditor是fckeditor的下一代版本，於是順帶把fckeditor和ckeditor都下載下來測試下哪個更好用。經過比較還是ckeditor的門檻比較低，兩行代碼就搞定了，但是配置了fckeditor卻沒有起作用，於是就選擇了ckeditor，也許大家還是用fckeditor的比較多。不過既然ckeditor門檻低那就自然選擇ckeditor了。
不多廢話了，下面就來說下ckeditor的使用吧。
要使用ckeditor，當然首先就是去http://ckeditor.com/ (ckeditor網站)下載ckeditor的壓縮包，現在最新的是ckeditor_3.3.zip
下載後將壓縮包解壓，將解壓後檔案夾中的ckeditor檔案夾copy到自己的web項目的WebRoot目錄下。
開啟ckeditor目錄，可以看到檔案夾結構如下
ckeditor
---_samples
---_source
---adapters
---images
---lang
---plugins
---skins
---themes
....
---ckeditor.js
---config.js
...
從每個檔案夾和每個檔案的名字我們就可以很容易看出它們的作用，_samples檔案夾下放的自然就是供我們學習如何使用的範例程式了。
拿到一個我們以前沒用過的東西，首先要看的當然就是它給的例子了，這可以讓我們對這個程式有個整體的瞭解並快速掌握簡單的使用方法。
想要在JSP頁面中引用ckeditor是非常簡單的一件事，前面我們只要已經將解壓的ckeditor檔案夾copy到WebRoot目錄下了，只需要在jsp檔案的代碼中要加入ckeditor的位置加上如下代碼，(比如我們要在一個form中使用ckeditor)。
下面在index.jsp(筆者建的一個測試頁面)中引用ckeditor並測試
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<%
String content=request.getParameter("editor1");
if(content!=null&&!content.equals("")){
out.println(content);
}
%>
<form name="testForm" method="post" action="<%=path %>/index.jsp">
<textarea cols="80" id="editor1" name="editor1" rows="10">
在此新增內容
</textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1',
{
skin : 'kama',
language : 'zh-cn'
});
</script>
<input type="submit" value="提交"/>
</form>
</body>
</html>
比較關鍵的代碼在代碼中已用紅色和藍色標出，要能在頁面中使用就要先將ckeditor目錄下的ckeditor.js加入頁面
form表單的寫法還如我們未使用ckeditor時一樣，只需要在頁面中加入一段javascript代碼，上面已經用藍色
標出.
CKEDITOR.replace('要用ckeditor取代的textarea的name屬性值或id屬性值',{要設定的ckeditor屬性:屬性值,......});
上面的藍色代碼顯示我將editor的皮膚風格設定為kama,在ckeditor的skins檔案夾下預設還有office2003和vi兩種皮膚風格
將ckeditor的語言設定為zh-cn(簡體中文).當然你也可以根據個人需要設定更多的屬性。這裡不過多介紹，大家可以通過範例中
和壓縮包中提供的文檔進行學習
要想提取我們在編輯器中編輯的內容並在頁面上顯示也和我們提取表單資料一樣
<%
String content=request.getParameter("editor1");
if(content!=null&&!content.equals("")){
out.println(content);
}
%>
這段代碼顯示了如何提取編輯器中內容。這裡我將表單提交到頁面本身。
通過上面的介紹，大家應該可以看出使用ckeditor的方便快捷。大家不需要任何的改變就可以在項目中引用線上編輯器了。
當然要想根據自己的需求進行定製就需要進行一些更深入的學習，不過也並不難。
我們可以在項目中建立一個ckconfig.js檔案專門用來定製自己的ckeditor，下面貼出一個本人自己的配置
/* Copyright (c) 2003-2010, 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 = 'zh-cn'; //配置語言 config.uiColor = '#BFEFFF'; //背景顏色 config.width = 700; //寬度 config.height = 300; //高度 config.skin='kama'; //工具列 config.toolbar = [ ['Source','Bold','Italic'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Smiley'], ['Styles','Font','FontSize'], ['TextColor'], ['Undo','Redo'] ]; };
你可以根據自己的需要定製，下面貼出一個含有完整工具列的設定檔 ,供大家參考定製自己的工具列
/* Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ CKEDITOR.editorConfig = function( config ) { config.language = 'zh-cn'; config.width = 900; config.height = 300; config.skin = 'kama'; // 背景顏色 config.uiColor = '#BFEFFF'; 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'], '/', ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Link','Unlink','Anchor'], ['Table','HorizontalRule','Smiley','SpecialChar','PageBreak'], '/', ['Styles','Format','Font','FontSize'], ['TextColor','BGColor'] ]; };
只要在頁面中將你的設定檔和ckeditor.js同時引入頁面，就可以顯示你自己定義的ckeditor了。
大家現在應該對ckeditor有一個簡單的瞭解了，希望對需要的朋友會有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
