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

快来打我* 2022-06-16 11:38 277阅读 0赞

# 一、前言 #

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

# 二、操作过程 #

## 2.1 把fckeditor复制到项目中 ##

![这里写图片描述][SouthEast]

# 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：

页面引用：

![这里写图片描述][SouthEast 1]

效果展示：

![这里写图片描述][SouthEast 2]

另外在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代码 ##

![这里写图片描述][SouthEast 3]

解决方案：修改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>
                            
                            <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

![这里写图片描述][SouthEast 4]

解决方案：

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

# 四、小结 #

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

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

[福利：fckeditor][fckeditor]

[SouthEast]: /images/20220616/90b261f8214e4791aabeb57bd5bbc416.png
[SouthEast 1]: /images/20220616/bf8716378a604340a1f6fcb16fd56ae1.png
[SouthEast 2]: /images/20220616/09772f7ac5f94754b11124e6d478e4f1.png
[SouthEast 3]: /images/20220616/13cdf511e38b49c89f66d64fc475c84b.png
[SouthEast 4]: /images/20220616/f33e0c01ea774fd3a510cc78765817e6.png
[fckeditor]: http://url.cn/499QCeW