UEditor学习(一)

 2018-06-12 10:53:38  前端技术  军哥
 (1036)  (0)

由于最近想重构博客代码,想用上UEditor,因为感觉这个UEditor提供的功能相当丰富,这样就省的使用现有的wangeditor还得自己去写插件。

但是发现UEditor提供的上传各种资源文件,和列表所有资源文件都被他给封装了(前端和后端)。当然他这封装后感觉不太符合自己的口味。

所以就有后面的修改了。


1、首先来了解下UEditor的目录

QQ截图20180613003112

dialogs:点击编辑器工具栏上不同工具弹出的窗口及其逻辑代码

jsp:里面包含了config.json为服务器配置文件(上传控制器名称、列表控制器名称...)、controller.jsp前端请求控制器(请求处理各种资源:上传文件、上传视频、文件列表...)

lang:为国际化多语言js

themes:为样式表

third-part:第三方js插件

ueditor.all.js:UEditor的核心js文件

ueditor.config.js:前端配置js文件

ueditor.parse.js:编辑内容发布后的html里面会自动引入这个文件。作用就是显示一些表格、列表、代码高亮等样式

2、UEditor的运行流程

QQ截图20180613003508

3、修改获取服务端配置参数

思路:舍去controller.jsp,然每一个请求服务器处理资源路径都是单独的,而非通过controller.jsp然后传参来判断处理逻辑

修改1:ueditor.config.js

            修改serverUrl为当前项目访问路径和添加一个访问服务端获取配置参数的访问名称

            QQ截图20180613003544

修改2:ueditor.all.js

            修改获取服务端配置访问名称,用配置key获取

            QQ截图20180613003635

修改3:ueditor.all.js

           修改getActionUrl的组成访问服务器资源路径,原来是通过serverUrl和参数为action访问

            比如:

                原来:http://localhost:8080/ueditortest/ueditor/controller.php?action=config

                现在:http://localhost:8080/ueditortest/configServlet

服务端获取配置参数Servlet代码:

    此代码为参考ueditor提供的源码逻辑提取而来

    把原来的config.json剪切拷贝到src(classpath)目录下

QQ截图20180613003720

4、配置服务端抓取图片

    大概意思就是,如果添加的在线图片,那么在添加确定后,会判断这个在线图片的访问url和本地是否一直,如果不一致就会把当前图片的访问url以参数的形式提交到后台,让后台去下载,然后放到本地

   修改1:ueditor.config.js

        修改为支持抓取图片,默认是关闭的

QQ截图20180613003815

   修改2:dialogs/image/images.js

      是bug的修复,显现是配置了抓取,但是添加点击确定后无法发送请求到后台

      QQ截图20180613003917

      remote中添加一个remote=true


打赏, 我要小额赞助,鼓励作者写出更好的文章
<< 上一篇:ctjdfs分布式存储系统v1.0
>> 下一篇:在Linux下tomcat7部署项目添加图片目录软链接

评论列表



您还没有登录,登录后才能发表评论,请【登录】