JFinal官方demo整合UEditor详细步骤

一、导入JFinal官方demo

JFinal官方demo,可以在JFinal官网直接下载到。

下载JFinal demo

在eclipse中进行导入。我进行的是非maven式开发导入,也就是使用JFinal依赖的jar包进行开发。

确保导入成功且能正确运行起来,访问http://localhost:[相应端口],可以访问如下界面:

 

JFinal demo首页

此时尝试点击任一栏目的“修改”按钮,可以进入修改编辑页面,看到此时为demo原生的样式。

 

JFinal demo的文章编辑页面

二、下载并导入UEditor

UEditor是百度开源的富文本编辑器,这是下载页面

 

UEditor下载页面

下载上图标注的选项,下载成功后为名为ueditor1_4_3_3-utf8-jsp.zip 1的压缩包,进行解压,解压后的文件目录如下所示:

 
  • dialogs: 弹出对话框对应的资源和JS文件
  • lang: 编辑器国际化显示的文件
  • jsp: 涉及到服务器端操作的后台文件
  • themes: 样式图片和样式文件
  • third-party: 第三方插件(包括代码高亮,源码编辑等组件)
  • ueditor.all.js: 开发版代码合并的结果,目录下所有文件的打包文件
  • ueditor.all.min.js: ueditor.all.js文件的压缩版,建议在正式部署时采用
  • ueditor.config.js: 编辑器的配置文件,建议和编辑器实例化页面置于同一目录
  • ueditor.parse.js: 编辑的内容显示页面引用,会自动加载表格、列表、代码高亮等样式
  • ueditor.parse.min.js: ueditor.parse.js文件的压缩版,建议在内容展示页正式部署时采用

在JFinal demo工程中的WebRoot目录下创建ueditor文件夹,将上面解压出的所有东西拷贝进去。

拷入UEditor后的工程

在ueditor目录下的index.html为UEditor的官方demo,可以在浏览器中输入http://localhost[端口]/ueditor/index.html访问,可以看到如下UEditor的样式。

 

UEditor的官方demo

接下来,我们要做的就是将上面展示的UEditor富文本编辑器整合进JFinal的文章编辑。

三、整合JFinal与UEditor

首先我们得知道,JFinal demo的前端文章编辑页面所对应的代码文件在哪,我在下图已经标注了出来:

通过对_form.html, add.html, blog.html, edit.html的分析可以发现,文章编辑功能都是通过_form.html进行的。整合UEditor,首先需要导入对应的js脚本,找到<head>标签。<head>标签在_layout.html中,_layout.html位置如下图:

_layout.html<head>标签中加入如下的js引用:

<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

注意,确保这里的src路径和前面拷贝ueditor的路径是对应的

添加好后如下图:

接下来需要进行编辑器初始化。首先找到_form.html中“编辑框”对应的代码。在这里是一个<textarea>标签,记住这个标签的id(如果此标签没有id的话就加上一个id)。

 

将<textarea>便签的id设置为”content

回到_layout.html,在<body>标签中加入编辑器的初始化代码,如下:

<script type="text/javascript">
    var ue = UE.getEditor('content');
</script>

将修改过的各个文件保存,刷新浏览器,进入到JFinal demo的文章编辑页面,此时我们看到UEditor富文本编辑器已经成功加载上去!

Share

1 Response

  1. 2018-10-27

    […] Ueditor主要看这里,已经很详细的写出来了 […]

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.