將CKEditor集成到Java開發環境中

jopen 11年前發布 | 65K 次閱讀 CKEditor HTML編輯器

本文主要介紹如何將CKEditor集成到Java開發環境中，CKEditor是FCKEditor的升級版，使用很方便。下面是基本使用方法：

第一步：下載必要的庫

1、到CKEditor官網http://www.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標簽庫，這樣可以使用<ckeditor>標簽

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

4、如果讓CKeditor自動創建實例，則只需在</body>標簽之前添加一個<ckeditor:replace>（官方推薦這樣做，在其他地方添加也可以）

<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
<html>
    <body>
        <form action="sample_posteddata.jsp" method="get">
            <p>
                <label for="editor1">Editor 1:</label>
                <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
            </p>
            <p>
                <input type="submit" value="Submit" />
            </p>
        </form>
    <ckeditor:replace replace="editor1" basePath="/ckeditor/" />
    </body>   
</html>

注意：<ckeditor:replace>中replace對應的是要替換的<textarea>標簽的id，basePath對應的是CKeditor資源文件的存放路徑。如果需要替換多個<textarea>，則可以使用 <ckeditor:replaceAll>標簽，

<ckeditor:replaceAll basePath="/ckeditor/" className="myclass"/>

其中className是<textarea>的class樣式，只要<textarea>的class樣式為myclass，則都會被CKeditor實例替換。

5、如果想手動創建CKeditor實例，則可以通過<ckeditor:editor>標簽創建。

<ckeditor:editor textareaAttributes="<%=attr %>" basePath="/ckeditor/" editor="editor1" value="Type here" />

其中basePath是CKeditor存放目錄，editor是全局<textarea>元素的name，value則是該<textarea>的默認值，textareaAttributes則對應<textarea>的配置信息，是一個java.util.HashMap類型的對象，key對應的是<textarea>中的屬性名稱name,value對應<textarea>中的屬性值value。

<% 
    Map<String, String> attr = new HashMap<String, String>();
    attr.put("rows", "8");
    attr.put("cols", "50");
%>

6、提交編輯內容

后臺獲取編輯內容和平時使用<textarea>沒區別，CKEditor只是對<textarea>進行了增強，所以數據獲取仍然是通過<textarea>的name屬性。

如果想在js中獲取CKEditor實例中的內容，則可以通過CKEditor API獲取，

var data = CKEDITOR.instances.editor1.getData();

基本流程就是這樣，如果想修改CKeditor樣式的話，可以修改CKeditor資源文件中的config.js，

/*
Copyright (c) 2003-2011, 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 = 'fr';
    // config.uiColor = '#AADC6E';
    config.language = 'zh-cn'; // 配置語言
    config.uiColor = '#FFF'; // 背景顏色
    config.width = 'auto'; // 寬度
    config.height = '300px'; // 高度
    config.skin = 'office2003';// 界面v2,kama,office2003
    config.toolbar = 'MyToolbar';// 工具欄風格（基礎'Basic'、全能'Full'、自定義）plugins/toolbar/plugin.js
    config.toolbarCanCollapse = false;// 工具欄是否可以被收縮
    config.resize_enabled = false;// 取消 “拖拽以改變尺寸”功能 plugins/resize/plugin.js

    //自定義的工具欄    
    config.toolbar_MyToolbar =
    [
        ['Source','-','Save','Preview','Print'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
        '/',
        ['Styles','Format'],
        ['Bold','Italic','Strike'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['Link','Unlink','Anchor'],
        ['Maximize','-','About']
    ];
};

也可以直接在jsp里設置：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.ckeditor.CKEditorConfig"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新聞中心</title>
</head>
<body>
<center>
<form action="${pageContext.request.contextPath}/news/add">
標題:<input name="title" type="text"/><p/>
內容:<textarea name="content" id="editor" rows="5" cols="20"></textarea>
<label>公告</label>:<input type="radio" name="ntype" value="1"/>
<label>新聞</label>:<input type="radio" name="ntype" value="2"/>
<input type="submit" value="添加">
</form>
</center>
<% 
    CKEditorConfig settings = new CKEditorConfig();
    settings.addConfigValue("height","300");
    settings.addConfigValue("width","600");
%>
<ckeditor:replace replace="editor" basePath="${pageContext.request.contextPath}/ckeditor/" config="<%=settings %>"/>
</body>
</html>

想進一步了解的話，可以參考CKEditor官網的指導說明，http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Java/Integration

編輯器一般使用都很簡單，能滿足一般需求就行。當然，這款編輯器是國外研發的，國內也有比較好的在線編輯器，比如kindeditor，中文顯示，貌似使用起來比這個還簡單，有興趣大家可以嘗試一下，KindEditor官網:http://www.kindsoft.net/

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1394859753025.html

CKEditor HTML編輯器

將CKEditor集成到Java開發環境中

相關經驗

相關資訊

相關文檔

目錄