众所周知,表单、工作流是企业业务系统的核心,而一个通用的表单设计器能为开发节省很多的编码工作。
接下来,我将用几篇文章,介绍如何用CKeditor定制简单的表单设计器。
一、安装CKEditor
从 CKEditor 网站:http://ckeditor.com/download 下载最新版本的 CKEditor 。
将下载的文档解压到你的 website 根目录下的 ckeditor 目录中。你可以将文档放在你的 website 的任意路径中。ckeditor 目录是缺省目录。
二、加载CKEditor
CKEditor 是 JavaScript 应用程序。要加载它,需要在页面中包含一个简单的文件引用。
如果已在站点根目录下的 ckeditor 目录中安装了 CKEditor , 你需要将下面的代码片段插入到
页面的<head>部分:
<head>
...
<script src="/ckeditor/ckeditor.js"></script>
</head>
当上述文件加载后,就可以使用 CKEditor JavaScript API。
三、生成编辑框
CKEditor 的工作就像页面中的文本域元素。编辑器提供了用户界面,可以容易在编写、格式化,并可与富文本一起处理,但是可以用<textarea>元素完成同样的事情(尽管不是那么容易) ,需要用户在其中输入 HTML 代码。
实际上,CKEditor 使用文本域将其数据传给服务器。对于终端用来来说,文本域是不可见的。
为了生成编辑器的实例,必须首先将<textarea>元素加入到 HTML 页面的源代码中。
<textarea name="editor1"></textarea>
插入文本域后,就可以使用 CKEditor JavaScript API 将 HTML 元素替换为编辑器的实例。
调用简单的 CKEDITOR.replace 方法:
<script>
CKEDITOR.replace( 'editor1' );
</script>
全部代码:
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!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>Insert title here</title>
- <%@ include file="/page/common/common.jsp"%>
- <script src="${contextPath}/ckeditor_standard/ckeditor/ckeditor.js"></script>
- </head>
- <body>
- <form method="post" action="${contextPath}/editor/test1">
- <p>
- My Editor:<br>
- <textarea name="editor1"><p>Initial value.</p></textarea>
- <script>
- CKEDITOR.replace('editor1');
- </script>
- </p>
- <p>
- <input type="submit">
- </p>
- </form>
- </body>
- </html>
效果
可以把上面的界面集成到自己的项目中。
CKEditor的安装,加载和集成都已经说完了,下篇将介绍如果扩展自己的插件。