JFina中整合UEditor编辑框

    UEditor是由百度[FEX前端研发团队]开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

    

    点击进入JFinal博客，然后下载JFinal x.x demo，如图所示：(后面的操作步骤都是基于这个demo来做)

    

 

    首先，我们需要去UEditor官网去下载UEditor编辑器，由于JFinal是Java语言写的，所以下载Jsp版本可能会更好一点，如图所示：

    

    

    下载好了之后，解压该压缩包，目录如下：

    

    dialogs: 弹出对话框对应的资源和JS文件

    lang: 编辑器国际化显示的文件

    jsp: 涉及到服务器操作的后台文件

    themes: 样式图片和样式文件

    third-party: 第三方插件(包括代码高亮，源码编辑等组件)

    ueditor.all.js: 开发板代码合并的结果，目录下所有文件的打包文件

    ueditor.all.min.js:ueditor.all.js: 文件的压缩版，建议在正式部署时采用

    ueditor.config.js: 编辑器的配置文件，建议和编辑器实例化页面置于同一目录

    ueditor.prase.js: 编辑的内容显示页面引用，会自动加载表格，列表，代码高亮等样式，具体看内容展示文档

    ueditor.parse.min.js: ueditor.parse.js文件的压缩版，建议在内容展示页正式部署时采用

    上面的资料都来自于UEditor官网，如要查看更详细的内容，点击这里

 

    然后我们需要在项目的WebRoot子目录下创建一个新的文件夹ueditor，然后把解压后的这些文件全部拷贝到这个新创建的ueditor文件夹里，如图所示：

    

 

    接着我们需要将ueditor/jsp/lib下的jar包copy到自己项目的lib文件夹下：

    

 

    摘自UEditor官网的显示编辑器代码如下：

    

    

    添加博客时，对应的html为add.html，修改博客时对应的html为add.html。由于在添加博客和修改博客都要使用编辑器来编写我们要写的博客，而这两个html的第一句都是引用了_layout.html文件，所以我们需要将配置信息导入_layout.html中，然后在_form.html中加载编辑器的内容就可以了。

    在_layout.html中导入配置信息：

    

    最后一个是导入中文语言包。

 

    在body中实例化编辑器：

    

    紧接着，进入_form.html中去加载编辑器的容器：

    

    

    启动demo，进入编写博客页面，就可以看到一个漂亮的编辑器就已经显示在我们眼前了。