【java】fckeditor在线编辑器的使用

一、前言

      最近在项目中要做一个在线编辑器的功能，可以对输入的文字进行字体设计、字号设置、图片插入等。就像csdn的写博客的编辑器一样，可以对文字操作，保留格式。项目组长推荐使用的是fckeditor，下面小编就向大家展示一下过程。

二、操作过程

2.1 把fckeditor复制到项目中

2.2 编写js，替换textarea，显示

      构造函数的参数name和textarea中的name属性的值保持一致,BasePath的路径指向fckeditor的下一级.

      jquery-fckeditor.js：编写插件

(function(jQuery){    $.fckeditor = function(name){        var oFCKeditor = new FCKeditor(name);        oFCKeditor.BasePath = "fckeditor/" ;        oFCKeditor.ToolbarSet = "simple";        oFCKeditor.ReplaceTextarea() ;    }})(jQuery);

      department-add.js：调用插件，替换name为description的textarea。

$().ready(function(){    $.fckeditor("description");});

      add.jsp：

<table cellpadding="0" cellspacing="0" class="mainForm">                        <tr>                            <td>部门名称</td>                            <td><s:textfield name="dname" cssClass="InputStyle"></s:textfield>                            </td>                        </tr>                        <tr>                            <td>职能说明</td>                            <td><s:textarea name="description" cssClass="TextareaStyle"></s:textarea>                            </td>                        </tr>                    </table>

      页面引用：

      效果展示：

      另外在fckeditor/中有一个fckconfig.js，这个js是做配置用的。在这个js中有FCKConfig.CustomConfigurationsPath = FCKConfig.EditorPath + “myconfig.js”，用户可以把自定义的匹配写在myconfig.js，可以通过改变myconfig.js中的一些内容动态的改变在线编辑器中的内容。

2.3 获取其中的数据

      由于小编使用的是Struts2，使用了驱动模型，通过值栈来进行jsp和后台的Action之间进行传输数据，因为在第一步中提到过，使用的是替换了textarea，所以获取编辑器的内容就和获取textarea的内容一样。当jsp提交表单后，调用相关的Action，如，就可以在这个Action中利用与textarea的name属性相同的值获取到值了。

三、可能遇到的问题

3.1 当列表显示内容的时候，显示的是html代码

      解决方案：修改list.jsp中的字段，添加escape=”false”使得显示html

<s:iterator value="#departmentList">                <tr class="TableDetail1 template">                    <td><s:property value="dname"/></td>                    <td><s:property value="description" escape="false"/></td>                    <td>                        <!-- 在struts2的标签中只能用ognl表达式，不能用el表达式                        在html标签中，只能使用el，不嫩使用ognl表达式 -->                        <s:a action="departmentAction_deleteDepartment?did=%{did}">删除</s:a>                        <s:a href="departmentAction_updateUI?did=%{did}">修改</s:a>                    </td>                </tr>            </s:iterator>

3.2 数据库字段太小，写入的数据超出范围

      Messages：Data too long for column ‘description’ at row 1

      解决方案：

      修改数据库字段，扩大到适当范围。

四、小结

      通过这次的学习与分析，总结一句话，就是站在巨人的肩膀上。

      这个时代有很多现成的东西，前人已经为我们做好了，我们只需要把这些东西拿来使用就可以了。当然在线编辑器也不仅仅有这一种，还有很多种。这个就需要我们自己探寻了。

      福利：fckeditor