堪比教科书的ueditor的使用详解

原创不易转载标明出处!

感觉框架中自带的富文本编辑器,不太好用,而且功能不是特别全面! 所以自己又集成了百度的UEditor的插件,功能强大,完善的API 。。。但插件本身还存在一些使用上的bug.

现在主要从下几个方面总结一下UEditor的使用心得:

一:ueditor的集成

1.JSP集导入JAR包版

直接去官网下载(https://ueditor.baidu.com/website/download.html):

1

 

集成方法:

下载源码后直接放到项目根目录下面,需要注意的是下面几个关键的点:

2

1.jsp页面需要引入相应的js以及css 其次实例化UEditor

2

根据自己的路径情况自行引入即可!

实例化一个文本编辑器:

jsp页面:

 

具体参数可以查看官方APIhttps://ueditor.baidu.com/doc/ 在此就不在累赘了!

1.修改ueditor.config.js里面的URL路径

2

很多人网上看文档,也不知为什么改这,原理是什么?这的路径如果不对jsp页面就会报出:“后台路径配置错误的。。上传无法使用的。。”的错误提示。 说白了你只需要确保你的项目能访问到controller.jsp 这个文件就OK.

1.修改config.json里的的访问前缀,这个路径主要是用来上传和图片回显得,本地的话可以直接写本地域名就好。

2

1.最后一步导入jar包,在pom.xml文件中引入这几个包,需要注意的是ueditor-1.1.2.jar这个包需要单独手动导入因为maven仓库并没这个jar.

<!– 上传组件包 –>

 

到此医德页面已经可以使用UEditor的编辑器了,是不是很爽!别高兴太早哈。默认的这种方式有个弊端上传的文件回默认到Tomcat的根目录下,每次项目重新部署,你之前上传的附件都会消失!所以我们不能把它单独存在一个文件夹中,这样方便管理。当然这就需要自定义UEditor的上传路径了。

修改步骤其实也比较简单。暂且别急下面会讲到。

1.源码版

导入完整版UEditor,这种方式也是我个人比较推荐的吧,完整版的话就不需要再导入ueditor-1.1.2.jar这个包了,可以方便我们直接打断点进行调试,可以方便我们直接进行源码的修改。

需要注意的是完整版下载下来缺少几个必要的js文件。我们需要和jsp版的UEditor进行合并。

1.我们把完整版里面的jsp/src/com下的baidu文件夹拷贝导入到项目根目录下。

2

  1. jsp版的放在项目的其它位置。需要注意的是1.确保相应js的数量。2项目没有导入ueditor-1.1.2.jar这个包,不然会发生冲突。

2

至此 其它的和第一步一样!

2:自定义附件的上传路径

  1. 自定义上传路径的这种实现方式比较多!你可以自定义图片附件的上传action方法,也可以直接使用ueditor自带的上传功能只做修改就好!

我这主要修改源码的方式。

修改过的的自定义上传源码,以及支持自定上传路径的ueditor-1.1.2.jar包想要的可以关注公号回复ueditor 获取!

qrcode_for_gh_83c7d77e6ed8_258

实现步骤:

1.源码修改可以参考https://blog.csdn.net/qq_28534469/article/details/80097761这篇文章。

2.进入controller.jsp,修改成我这样

 

如果不出意外,你已经上传成功了,但是图片回显不成功,如下图所示:

1

这个问题只需要配置一下tomcat的虚拟路径即可!

打开IDE自身的tomcat和你安装的tomcat的server.Xml的<Host></Host>标签中同时增加:

 

效果如下:

1

二:单独使用ueditor的图片,附件,音视频上传功能

还有一种情况就是我们上传图片附件的时候并不想要富文本框 只需要调用UEditor的图片、附件、或者视频的上传的功能。

1.我们只需要隐藏实例化的UEditor即可! 具体可以看代码的相应的注释

 

Jsp页面:

 

最后一步 还需要修改相应的js:

1.附件上传的,在ueditor/dialogs/attachment/attachment.js里,定位editor.execCommand,做以下修改:

editor.fireEvent(‘afterUpfile’, list);//添加这句话

editor.execCommand(‘insertfile’, list);

2.图片上传的:uditor/dialogs/image/image.js,定位editor.execCommand,做以下修改:

editor.fireEvent(‘beforeinsertimage’,list);//增加这句,不然无法触发事件 remote && editor.fireEvent(“catchRemoteImage”);

3.视频上传的:uditor/dialogs/image/video.js,定位editor.execCommand,做以下修改:

editor.fireEvent(‘myinsertvideo’, videoObjs);

editor.execCommand(‘insertvideo’, videoObjs, ‘upload’);

Now现在就可以单独调用了!是不是很强大!

1

订阅评论
提醒
0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请发表评论。x
()
x