前提:项目使用的是renren-fast-vue的开原版,里面已经封装好对ueditor的使用,但是demo的截图功能使用不了
在各个浏览器的表现:
点击下载会下载UEditorSnapscreen.exe,安装完UEditorSnapscreen.exe,刷新浏览器点击截图结果还是如上图。
会出现像QQ截图鼠标按下前的样子,按下鼠标再放开就会出现如上的情况
这个的错误,应该和ueditor无关,是vue项目兼容ie11的问题。
百度问题:只有两条相关问题,而且都没有提解决方案
转换思路:既然百度富文本的截图用不了,自己写一个。
自定义百度富文本的截图主要涉及三个点:
1、在百度富文本添加按钮
2、Js实现截图
3、将截图自动粘贴到百度文本的内容的末尾。(未实现)
对于第三点没有好的想法,只做到了第二步,即只能截图后自动下载,然后再使用富文本的上传功能将截图上传到富文本里。
1、在ueditor里添加按钮
有两种方式,第一种,步骤(以下A、B、C、D为记录,防止链接失效):
A、在ueditor.config.js文件的toolbars数组,添加一个"watermark”字符串,找到labelMap数组,对应添加一个labelMap,labelMap用于鼠标移上按钮时的提示,不在ueditor.config.js文件添加,也可以在初始化时添加,如下:
B、找到ueditor.all.js文件的btnCmds数组,在其中同样增加一个"screenshot"字符串,如果自己引用的是ueditor.all.min.js文件,则需要修改ueditor.all.s文件后压缩将旧的ueditor.all.min.js文件换掉。此时,清空缓存刷新界面,工具栏就会有自定义的按钮了。
C、修改样式,找到themes/default/css/ueditor.css文件
D、添加命令
在ueditor.all.js文件任意不会不会破坏其他语句、方法的位置添加如下方法
方法二:根据官方文档的方式自定义截图
直接将代码复制到使用ueditor的界面里,一开始是有新加的按钮的,后面不管怎么栓新都没有新加的按钮,尝试参照官网例子修改,如下:
同样一开始是有新加的按钮,后面不管怎么刷新页面都没有显示新加的按钮并且报this.ue.registerUI没有定义。后面决定将新增按钮挂载到新增的ueditor上,终于可以刷新页面后,新增的按钮显示在富文本上了,代码如下
由于是要覆盖官网的截图按钮功能,要去掉ueditor.config.js的toolbars的snapscreen(如果之前有的话),如图
要去掉富文本的某个按钮,可以在语言包下的zh-cn.js找到其提示中文对应的英文,如
新增按钮效果如下(与ueditor的截图使用一个样式,效果不太明显):
2、实现截图
网上有很多插件实现截图,就没有自己造轮子了,用的插件石kscreenshot
kscreenshot的安装:npm i kscreenshot
kscreenshot的引用:import kscreenshot from 'kscreenshot'
kscreenshot的介绍:
kscreenshot的缺陷:
1、当浏览器不是最大化的时候,截图的界面内会会错乱,如下:
2、浏览器最大化,打开了浏览器的调试器
3、kscreenshot的截图完成后拿到的图片是base64,由于百度富文本默认限制base64的图片,虽然可以设置ueditor.all.js开放对base64的限制,但是base64的内容过长,可能导致当前富文本内容过长,传入后台失败,就没事弄将图片自动追加到富文本的内容末尾。