CKEditor 3.6 入门

wuhongyu

浏览: 407327 次
性别:
来自: 哈尔滨

最近访客更多访客>>

youngmei

maomaohou

tanchangmin

A208JASON

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java 学习笔记

JavaScript CSS Cache Flash HTML

有多种方法可以将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">&lt;p&gt;Initial value.&lt;/p&gt;</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">&lt;p&gt;Initial value.&lt;/p&gt;</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>

显示结果如下：

查看图片附件

4
顶

0
踩

分享到：

CKEditor 3.6 入门二 | Struts 2 几个常见异常

2011-05-20 11:28
浏览 8342
评论(2)
分类:Web前端
查看更多

2 楼 429537044 2012-12-26

怎么在display.jsp中获取到提交的内容呢

1 楼 yueqiulijun 2012-12-23

1.<head>  
2.    ...   
3.    <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>  
4.</head>

src="/ckeditor/ckeditor.js" 需改为 …… src="ckeditor/ckeditor.js"

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论