Java開發(fā)環(huán)境中使用CKEditor集成
2018-07-20 來源：編程學(xué)習(xí)網(wǎng)
本文主要介紹如何將CKEditor集成到Java開發(fā)環(huán)境中，CKEditor是FCKEditor的升級(jí)版，使用很方便。下面是基本使用方法： 第一步：下載必要的庫(kù) 1、到CKEditor官網(wǎng)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的標(biāo)簽，比較重要。 第二步：將ckeditor-java-core-3.5.3.jar及Ckeditor庫(kù)放到工程相應(yīng)目錄下，jar包放到lib下，庫(kù)文件(js等資源文件)放到存放頁面資源的目錄下，根據(jù)自己的情況 3、在需要使用編輯器的jsp頁面中加入CKeditor標(biāo)簽庫(kù)，這樣可以使用<ckeditor>標(biāo)簽
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
4、如果讓CKeditor自動(dòng)創(chuàng)建實(shí)例，則只需在</body>標(biāo)簽之前添加一個(gè)<ckeditor:replace>（官方推薦這樣做，在其他地方添加也可以）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!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對(duì)應(yīng)的是要替換的<textarea>標(biāo)簽的id，basePath對(duì)應(yīng)的是CKeditor資源文件的存放路徑。如果需要替換多個(gè)<textarea>，則可以使用 <ckeditor:replaceAll>標(biāo)簽，
|
1
|
<ckeditor:replaceAll basePath="/ckeditor/" className="myclass"/>
|
其中className是<textarea>的class樣式，只要<textarea>的class樣式為myclass，則都會(huì)被CKeditor實(shí)例替換。 5、如果想手動(dòng)創(chuàng)建CKeditor實(shí)例，則可以通過<ckeditor:editor>標(biāo)簽創(chuàng)建。
|
1
|
<ckeditor:editortextareaAttributes="<%=attr %>" basePath="/ckeditor/" editor="editor1" value="Type here" />
|
其中basePath是CKeditor存放目錄，editor是全局<textarea>元素的name，value則是該<textarea>的默認(rèn)值，textareaAttributes則對(duì)應(yīng)<textarea>的配置信息，是一個(gè)java.util.HashMap類型的對(duì)象，key對(duì)應(yīng)的是<textarea>中的屬性名稱name,value對(duì)應(yīng)<textarea>中的屬性值value。
|
1
2
3
4
5
|
<%
Map<String, String> attr = new HashMap<String, String>();
attr.put("rows", "8");
attr.put("cols", "50");
%>
|
6、提交編輯內(nèi)容 后臺(tái)獲取編輯內(nèi)容和平時(shí)使用<textarea>沒區(qū)別，CKEditor只是對(duì)<textarea>進(jìn)行了增強(qiáng)，所以數(shù)據(jù)獲取仍然是通過<textarea>的name屬性。 如果想在js中獲取CKEditor實(shí)例中的內(nèi)容，則可以通過CKEditor API獲取，
|
1
|
var data = CKEDITOR.instances.editor1.getData();
|
基本流程就是這樣，如果想修改CKeditor樣式的話，可以修改CKeditor資源文件中的config.js，
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
/*
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';// 工具欄風(fēng)格（基礎(chǔ)'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里設(shè)置：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<%@ 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">
標(biāo)題:<input name="title" type="text"/><p/>
內(nèi)容:<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>
|
想進(jìn)一步了解的話，可以參考CKEditor官網(wǎng)的指導(dǎo)說 config.toolbar = ‘Full’; 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’], [‘BidiLtr’, ‘BidiRtl’], ‘/’, [‘Bold’,’Italic’,’Underline’,’Strike’,’-‘,’Subscript’,’Superscript’], [‘NumberedList’,’BulletedList’,’-‘,’Outdent’,’Indent’,’Blockquote’,’CreateDiv’], [‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyBlock’], [‘Link’,’Unlink’,’Anchor’], [‘Image’,’Flash’,’Table’,’HorizontalRule’,’Smiley’,’SpecialChar’,’PageBreak’], ‘/’, [‘Styles’,’Format’,’Font’,’FontSize’], [‘TextColor’,’BGColor’], [‘Maximize’, ‘ShowBlocks’,’-‘,’About’] ]; config.toolbar_Basic = [ [‘Bold’, ‘Italic’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Link’, ‘Unlink’,’-‘,’About’] ];
標(biāo)簽：
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。
