有多种方法可以将CKEditor集成到你的页面中,下面是最通常的做法。
第一步:载入 CKEditor
http://ckeditor.com/download 下载ckeditor的最新版本(我下了个5月9号发布的3.6),解压后将 ckeditor 文件夹复制到web工程的根目录下。在要使用CKEditor的页面<head>块中插入以下代码,将其引入:
- <head>
- ...
- <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
- </head>
<head>
...
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>
第二部:创建 CKEditor 实例
首先,在页面中插入一个<textarea>节点:
- <textarea id="editor1" name="editor1"><p>Initial value.</p></textarea>
<textarea id="editor1" name="editor1"><p>Initial value.</p></textarea>
如果你想让编辑器在初始化时,显示诸如从数据库等处查出的数据,只需要将他们插入<textarea>节点中,如上面<p>节点中的内容。
创建好<textarea>后,用
CKEditor API 替换原来的HTML节点,如下:
- <script type="text/javascript">
- CKEDITOR.replace( 'editor1' );
- </script>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
或者在 window.onload 中:
- <script type="text/javascript">
- window.onload = function()
- {
- CKEDITOR.replace( 'editor1' );
- };
- </script>
<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'editor1' );
};
</script>
第三步:更改config.js
config.js是 CKEditor 的主配置文件,更改config.js来定制自己的 CKEditor 样式:
- /*
- 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']
- ];
- };
/* 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目录里的 config.js,在
CKEDITOR.editorConfig = function( config )
{
};
里添加如下代码:
config.font_names=’ 宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;’+ config.font_names;
以后使用的时候就可以用中文字体了。
第四步:提交编辑器内容
可以将 CKEditor 实例看作一个<textarea>处理,在表单提交时,
CKEditor 实例中的内容被提交到服务器,可以通过<textarea> 的名称获得其内容。
如果需要在客户端获得 CKEditor 实例的内容,可以通过调用 CKEditor API,在表单提交前对其进行处理,如下:
- <script type="text/javascript">
- var editor_data = CKEDITOR.instances.editor1.getData();
- </script>
<script type="text/javascript">
var editor_data = CKEDITOR.instances.editor1.getData();
</script>
一个完整的例子:
- <%@ 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>
<%@ 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>
显示结果如下:
配置CKEditor
主要有三种方式配置CKEditor,可以在 CKEditor API 中CKEDITOR.config 部分查看所有可配置选项。
一、在页面中配置
在页面中进行配置是CKEditor官方推荐的方式,这样可以避免修改CKEditor原始的配置文件,使得应用进行升级时更加便捷。可以在任意的创建CKEditor实例的方法中对其进行配置,如CKEDITOR.replace 和 CKEDITOR.appendTo :
- CKEDITOR.replace( 'editor1',
- {
- toolbar : 'Basic',
- uiColor : '#9AB8F3'
- });
CKEDITOR.replace( 'editor1', { toolbar : 'Basic', uiColor : '#9AB8F3' });
二、在config.js中配置
默认情况下,这个文件基本是空的,可以在这个文件中进行你所需配置,如:
- CKEDITOR.editorConfig = function( config )
- {
- config.language = 'fr';
- config.uiColor = '#AADC6E';
- };
CKEDITOR.editorConfig = function( config ) { config.language = 'fr'; config.uiColor = '#AADC6E'; };
三、自定义配置文件
若不想更改config.js文件,CKEditor 也允许用户自定义自己的配置文件。在任意位置创建一份config.js的拷贝,如在根目录下创建一个名为“custom”的文件夹,将config.js文件拷贝至此文件夹,并重命名为“ckeditor_config.js
”,这样,在创建CKEditor实例时,就可以指定此文件为CKEditor的配置文件:
- CKEDITOR.replace( 'editor1',
- {
- customConfig : '/custom/ckeditor_config.js'
- });
CKEDITOR.replace( 'editor1', { customConfig : '/custom/ckeditor_config.js' });
定义工具栏
CKEditor提供了许多工具栏按钮,可以根据需要自由选择所需的部分。或使用 CKEditor 提供的两种的工具栏风格:
- 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'],
- '/',
- ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
- ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
- ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
- ['BidiLtr', 'BidiRtl'],
- ['Link','Unlink','Anchor'],
- ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],
- '/',
- ['Styles','Format','Font','FontSize'],
- ['TextColor','BGColor'],
- ['Maximize', 'ShowBlocks','-','About']
- ];
- config.toolbar_Basic =
- [
- ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
- ];
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'], '/', ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['BidiLtr', 'BidiRtl'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'], '/', ['Styles','Format','Font','FontSize'], ['TextColor','BGColor'], ['Maximize', 'ShowBlocks','-','About'] ]; config.toolbar_Basic = [ ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About'] ];
若想自定义工具栏按钮,可在config.js配置如下片段:
- CKEDITOR.editorConfig = function( config )
- {
- config.toolbar = 'MyToolbar';
- config.toolbar_MyToolbar =
- [
- ['NewPage','Preview'],
- ['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.editorConfig = function( config ) { config.toolbar = 'MyToolbar'; config.toolbar_MyToolbar = [ ['NewPage','Preview'], ['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实例时,为其指定一种:
- CKEDITOR.replace( 'editor1',
- {
- toolbar : 'MyToolbar'
- });
- CKEDITOR.replace( 'editor2',
- {
- toolbar : 'Basic'
- });
CKEDITOR.replace( 'editor1', { toolbar : 'MyToolbar' }); CKEDITOR.replace( 'editor2', { toolbar : 'Basic' });
你也可以在创建实例时,直接为其定义工具栏选项:
- CKEDITOR.replace( 'editor1',
- {
- toolbar :
- [
- ['Styles', 'Format'],
- ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
- ]
- });
CKEDITOR.replace( 'editor1', { toolbar : [ ['Styles', 'Format'], ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About'] ] });
样式
我们可以自定义CKEditor工具栏中“样式”下拉列表的内容,CKEditor提供了许多默认的样式,默认的样式列表定义在“plugins/styles/styles/default.js”文件中。可以通过如下形式定义自己的样式列表,并将其注册到
CKEditor中:
- CKEDITOR.stylesSet.add( 'my_styles',
- [
- // Block-level styles
- { name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } },
- { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },
- // Inline styles
- { name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } },
- { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }
- // Object styles
- { name : 'A Style', element : 'a', attributes : { 'color':'#000','text-decoration':'none' } },
- ]);
CKEDITOR.stylesSet.add( 'my_styles', [ // Block-level styles { name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } }, { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } }, // Inline styles { name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } }, { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } } // Object styles { name : 'A Style', element : 'a', attributes : { 'color':'#000','text-decoration':'none' } }, ]);
其中,“my_styles”是自定义样式的名称,必须是唯一的。定义好之后,就可以通知CKEditor实例使用这个样式了:
- config.stylesSet = 'my_styles';
config.stylesSet = 'my_styles';
自定义的样式可以配置在config.js中、CKEditor实例的jsp页面,或者一个单独的文件,甚至一个已知的URL中,可以通过如下形式指定它的位置:
- config.stylesSet = 'my_styles:/styles.js';
- OR
- config.stylesSet = 'my_styles:http://www.example.com/styles.js';
config.stylesSet = 'my_styles:/styles.js';
OR
config.stylesSet = 'my_styles:http://www.example.com/styles.js';
一条自定义的样式包括:name、element、 attributes,和CSS样式的定义,如:
- {
- name : '在样式下拉列表中显示的名称',
- element : 'HTML元素的名称 (如 "span")',
- styles :
- {
- 'css-style1' : 'desired value',
- 'css-style2' : 'desired value',
- ...
- }
- attributes :
- {
- 'attribute-name1' : 'desired value',
- 'attribute-name2' : 'desired value',
- ...
- }
- }
{ name : '在样式下拉列表中显示的名称', element : 'HTML元素的名称 (如 "span")', styles : { 'css-style1' : 'desired value', 'css-style2' : 'desired value', ... } attributes : { 'attribute-name1' : 'desired value', 'attribute-name2' : 'desired value', ... } }
其中,name
和 element元素是必选的,其它是可选的。
CKEditor有三种级别的元素样式,分别是:
Block-level styles(块级元素样式) – 应用于文本块(段落)。适用于以下元素 These apply to the following elements: address
, div
, h1
, h2
, h3
, h4
, h5
, h6
, p
, and pre
.
Object styles(对象元素样式) – 应用于特殊的可被选择的对象(不是文本),当一个对象被选中之后才被显示。适用于以下对象: a
, embed
, hr
, img
, li
, object
, ol
, table
, td
, tr
and ul
.
Inline styles(内联元素样式) – 用于扩展被选中的文本样式。