CKEditor 入門

時間 2019-12-18

標籤 ckeditor 入門简体版

原文原文鏈接

有多種方法能夠將CKEditor集成到你的頁面中，下面是最一般的作法。javascript

第一步：載入 CKEditorcss

http://ckeditor.com/download 下載ckeditor的最新版本（我下了個5月9號發佈的3.6），解壓後將 ckeditor 文件夾複製到web工程的根目錄下。在要使用CKEditor的頁面<head>塊中插入如下代碼，將其引入：html

Html代碼 java

<head> web
... 數據庫
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script> 服務器
</head> jsp

第二部：建立 CKEditor 實例編輯器

首先，在頁面中插入一個<textarea>節點：工具

Html代碼

<textarea id="editor1" name="editor1"><p>Initial value.</p></textarea>

若是你想讓編輯器在初始化時，顯示諸如從數據庫等處查出的數據，只須要將他們插入<textarea>節點中，如上面<p>節點中的內容。

建立好<textarea>後，用 CKEditor API 替換原來的HTML節點，以下：

Html代碼

<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>

或者在 window.onload 中：

Html代碼

<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'editor1' );
};
</script>

第三步：更改config.js

config.js是 CKEditor 的主配置文件，更改config.js來定製本身的 CKEditor 樣式：

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']
];
};

第四步：提交編輯器內容

能夠將 CKEditor 實例看做一個<textarea>處理，在表單提交時， CKEditor 實例中的內容被提交到服務器，能夠經過<textarea> 的名稱得到其內容。

若是須要在客戶端得到 CKEditor 實例的內容，能夠經過調用 CKEditor API，在表單提交前對其進行處理，以下：

Html代碼

<script type="text/javascript">
var editor_data = CKEDITOR.instances.editor1.getData();
</script>

一個完整的例子：

Html代碼

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>CKEditor</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form id="form1" name="form1" method="post" action="display.jsp">
<table width="650" height="400" border="0" align="center">
<tr>
<td valign="top">
內容:
</td>
<td>
<textarea id="editor1" name="editor1"><p>Initial value.</p></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="Submit" value="提交" />
<input type="reset" name="Reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>

顯示結果以下：

1. ckeditor 3.6入門
2. CKEditor入門應用
3. ckeditor
4. vue+CKEditor5 入門
5. ckeditor、ckeditor配置--整合
6. java+Ckeditor
7. (ckeditor+ckfinder用法)Jquery,js獲取ckeditor值
8. 前端頁面中嵌入ckeditor
9. Vue 2.x 使用CKEditor 的入坑
10. Ckeditor配置
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。