有多种方法可以将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>
第二部:创建 CKEditor 实例
首先,在页面中插入一个<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>
或者在 window.onload 中:
<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']
];
};
第四步:提交编辑器内容
可以将 CKEditor 实例看作一个<textarea>处理,在表单提交时,
CKEditor 实例中的内容被提交到服务器,可以通过<textarea> 的名称获得其内容。
如果需要在客户端获得 CKEditor 实例的内容,可以通过调用 CKEditor API,在表单提交前对其进行处理,如下:
<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>
显示结果如下:
来源:oschina
链接:https://my.oschina.net/u/1157906/blog/223088