HTML编辑器在JAVA WEB下的应用研究

童莹

摘 要：本文介绍了HTML编辑器的基本功能，分析了它的基本原理及基本调用方式。通过对不同原理的HTML编辑器的分析，剖析其各自所具有的优缺点。最后阐述了目前常用的HTML编辑器KindEditor在JAVA WEB下应用的具体步骤。

关键词：html编辑器；KindEditor；JAVA

1 引言

在WEB应用开发中，完成与用户交互最主要的方式是用户信息的提交、反馈和言论的发布、交流。随着网页交互更注重用户体验，发布信息的内容不再仅只是简单的文字，而是拥有个性化表情、图片、以及各种格式文本的信息。传统HTML表单输入元素已经远远不能满足用户富文本的编辑需求。在编辑信息的同时，WEB应用程序需要对用户填写的数据进行格式转换，才能让用户将所发布的信息以其所期望的效果显示在Web页面上。

HTML编辑器就是用来依据用户需求来编辑网页元素显示效果的工具，编辑的内容是基于HTML的文档。因其可用于编辑基于HTML的文档，所以经常被应用到诸如：网站留言板、论坛发贴、博客日志的编写、网站后台信息管理等需要用户输入富文本信息的地方，是当前Web交互式应用的常用模块之一。

2 HTML编辑器的基本原理

HTML编辑器是用来编辑基于HTML的文档，也就是网页文档。了解HTML编辑器，就需要了解基本的网页文件。

2.1 网页的基本原理

网页其实就是一个文本文件，它是满足HTML标记规范的文档。一个网页中，可以包含文本、表格、图片等组成元素，而网页中的HTML标记用来向浏览器说明在屏幕上显示时，这些组成元素应该是什么样的格式和效果。HTML即“超文本标记语言”，它是一种计算机语言，说明如何格式化页面。以文本加粗为例，需要利用HTML标记，具体表示如下：

这是粗体

2.2 HTML编辑器的基本原理

HTML编辑器在WEB系统中应用普遍，当前有很多开发工具用于实现用户富文本的交互，从实现效果上来区分，分为“非所见即所得”和“所见即所得”两种。这两种HTML编辑器实现原理有所区别：

2.2.1 非所见即所得

“非所见即所得”HTML编辑器，是指用户在输入信息时，可以指定显示效果，但不能即刻通过输入看到所处理生成的结果。这种编辑器主要是利用HTML的textarea元素。 标签是用来定义多行文本输入的控件。</p><p>要实现粗体、斜体、下划线、颜色字、图片的效果时，只需在文字的中间加上自定义标签即可，例如：</p><p>[b]文本编辑器[b] ，[img]src=”http：//www.google.com.hk/ images/logo_cn.png”[img]</p><p>这些规则开发时通过js脚本进行定制。当表单POST提交后，再把这些标签转换为html标签。</p><p>这种HTML编辑器的优点是速度快，提交方便，缺点是不直观，功能非常少。</p><p>2.2.2 所见即所得</p><p>利用textarea元素无法实现“立竿见影”的显示效果，而文本域本身也只是支持一些字符的输入，并不支持显示html，在显示上功能很少。目前应用广泛的是“所见即所得”的HTML编辑器，要实现这个功能，可以利用DIV或者TABLE的CONTENTEDITABLE 标签，属性来让一个区域可以编辑。这种方式可以很直观，也可以实现各种效果，但缺点是火狐浏览器不支持这个标签，只适用于IE浏览器，它对相关的js脚本要求也比较高。</p><p>目前广泛应用的是使用iframe或者frame中的document 来实现HTML元素的可编辑。这种方式尽管对JS的要求也比较高，但其能适用于目前大部分浏览器，且能实现各种效果。以开发一个基本编辑功能为例，其基本步骤如下：①向页面添加一个IFrame。这里要注意的是，要判断页面的状态，要等页面完全加载完毕后再进行操作，防止出现找不到某些元素的错误。②获取iframe的window对象和document对象，分别设置designMode属性为on，contentEditable属性为true让iframe可编辑。注意这里要打开document对象，向其写入初始化内容，以兼容火狐等浏览器。③通过doc.body.innerHTML方法获取内容，这个内容是我们最终要插入到数据库或显示在页面上的。④增加样式设置。上述编辑器只实现了基本功能，开发者依据要求，利用诸如document的execCommand方法等增加其它的样式实现。⑤利用诸如document的queryCommandState（）方法等改变样式，修改编辑器的工具栏，使按钮处根据光标所处位置的样式，自动处于突出或正常显示。</p><p>3 HTML编辑器的基本调用方式</p><p>目前，HTML编辑器的调用方式主要有以下两种：</p><p>3.1 使用object来调用</p><p>其基本方式如下：</p><p>3.1.1 在web页中嵌入html编辑器</p><p>在需要嵌入的位置加入以下html代码：</p><p><object data="hedit.htm" height="300" id="hedit_html" type="text/x-scriptlet" viewastext="" width="480"></object></p><p>其中object标签里的data属性用来指定所要调用的在线编辑器页的路径，id属性就是所调用object的id，通过它来获取编辑器中的数据。Width和height分别指定编辑器的高度和宽度。</p><p>3.1.2 取得html编辑器中的数据</p><p>在用户交互中，所提交的内容会被放到一个表单内，我们将利用object调用的编辑器也放在这个表单里面，利用request对象来获取即可。若因动态页面无法直接获得object内容的，可以设置一个隐藏文本域，例如：</p><p> </p><p>

或

在表单提交的同时设置一段JS代码，将object里面的内容复制到隐藏的文本区域中，在后台处理的页面中通过获取隐藏区域的数据来得到html在线编辑器的数据。

3.2 使用iframe调用

使用iframe调用与上面使用object调用方式相似

3.2.1 在web页中嵌入HTML编辑器

在需要嵌入的位置加入以下html代码：

其中src属性指定所要调用的在线编辑器页的路径，id为所调用IFRAME的id，Width和height指定编辑器得高度和宽度。

3.2.2 取得html编辑器中的数据

其操作方式与前面使用object来调用HTML编辑器的方式类似，同样利用表单和隐藏文本域来完成html在线编辑器的数据的获取。

4 在线HTML编辑器KindEditor在JAVA WEB下的应用

尽管开发人员可以自己编写拥有HTML编辑功能的程序，但目前WEB开发中还是广泛采用第三方提供的在线HTML编辑器，如：KindEditor、Fckeditor（ckeditor）等。这些编辑器的功能各有侧重，基本能满足论坛、博客及网站后台富文本信息管理的要求。

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框替换为可视化的富文本输入框。

用户可以到KindEditor开发官网下载此HTML编辑器。下载后，解压缩即可看到其目录结构。其中的核心目录是plugins、skins和文件kindeditors.js。在文件目录中，asp、asp.net、jsp和php分别是其在不同动态页面技术下的应用文件夹。基于JAVA的WEB开发，可以参考jsp文件夹下的参考程序。其基本使用步骤：①解压zip文件，将所有文件（或简化后仅包含plugins、skins文件夹和文件kindeditors.js）复制到工程的应用目录下，以myeclipse开发的JAVA WEB应用为例，可将其应用文件复制到工程文件夹＼WebRoot＼ kindeditor目录下。②将kindeditor/jsp/lib目录下的3个jar文件：commons-fileupload-1.2.1.jar、commons-io-1.4.jar和json_simple-1.1.jar复制到Tomcat的lib目录下，并重新启动Tomcat。③给kindeditor/attached目录添加写入权限。④在页面需要嵌入编辑器的位置添加Textarea标签，注意此标签要包含在相应表单中，例如：

用户名

评论：

同时，在该页面添加如下脚本：

KE.show是先执行KE.init设置相关变量，等DOM全部创建以后才开始执行KE.create创建编辑器。在show方法中除id之外还可以设置其它的参数，具体属性可以参考kindeditor使用说明手册。

KindEditor在默认情况下自动寻找textarea所属的form元素，找到form后，在onsubmit事件里添加KE.sync函数，若用form方式提交数据，不需要手动执行KE.sync函数。

获取方式可以参考如下代码：

html = KE.html（“content1”）；//取得HTML内容

//同步数据后可以直接取得textarea的value

KE.sync（“content1”）；

html = document.getElementById（“content1”）.value；

html = $（“# content1”）.val（）； //jQuery

当然我们也可以直接利用request对象来获取表单里的数据：

request.getParameter（"content1"）

嵌入kindeditor编辑器后，页面的效果如下图1所示：

5 结语

HTM编辑器使得文本编辑框更能满足用户个性化输入的需要，通过它来完成富文本的编辑能大大拓展交互输入框的功能及显示效果，它已经成为WEB系统不可缺少的组成部分。但HTML编辑器的使用也对开发人员提出了一定要求，我们必须了解和掌握不同HTML编辑器的应用方式及特点，依据开发采用的技术，完成相应的功能。

[参考文献]

[1]姜福成.基于网页平台的移动文本编辑器的设计[J].软件.2013第05期：131-132.

[2]王树威.关于HTML文本编辑器的选用[J].计算机与信息技术.2009第12期：145-147.

[3]于梅英，姜波，张珂.基于Java Web的HTML在线文本编辑器解决方案——以FckEditor在线编辑器为例[J].软件导刊.20011.2：101-102.

[4]高勇.使用IntraWeb实现通用的HTML文本编辑器[J].电脑编程技巧与维护.2010第23期：204-205.