基于Ckeditor的表单设计器的开发(一)

众所周知,表单、工作流是企业业务系统的核心,而一个通用的表单设计器能为开发节省很多的编码工作。

接下来,我将用几篇文章,介绍如何用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>


全部代码:

[java]  view plain copy print ?
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <title>Insert title here</title>  
  8.   
  9. <%@ include file="/page/common/common.jsp"%>  
  10. <script src="${contextPath}/ckeditor_standard/ckeditor/ckeditor.js"></script>  
  11.   
  12. </head>  
  13. <body>  
  14.     <form method="post" action="${contextPath}/editor/test1">  
  15.         <p>  
  16.             My Editor:<br>  
  17.             <textarea name="editor1"><p>Initial value.</p></textarea>  
  18.             <script>  
  19.                 CKEDITOR.replace('editor1');  
  20.             </script>  
  21.         </p>  
  22.         <p>  
  23.             <input type="submit">  
  24.         </p>  
  25.     </form>  
  26. </body>  
  27. </html>  

效果

基于Ckeditor的表单设计器的开发(一)_第1张图片


可以把上面的界面集成到自己的项目中。


CKEditor的安装,加载和集成都已经说完了,下篇将介绍如果扩展自己的插件。

你可能感兴趣的:(基于Ckeditor的表单设计器的开发(一))