TinyMce使用问题记录

TinyMce使用问题记录一、无法通过本地上传的方式上传视频二、编辑器里的视频无法播放三、编辑器的超链接点击无效最近在使用前端开源富文本编辑器做项目遇到的几个问题做一个记录对于这些问题有些是可以通过网上查询资料找到解决方法做一个整理。说明一下自己使用的版本是TinyMce 5.2.0。一、无法通过本地上传的方式上传视频​ 编辑器自带的添加视频的方式不支持本地上传。只有通过URL的方式或者是iframe嵌入的方式添加,这个只有通过改源码自行实现。这里我是采用了TinyMce中文网提供的js文件来解决。而且TinyMce中文网翻译的内容都比较齐全对新手来说十分友好了。​ Tiny中文文档Tiny中文文档​ js文件修改后的media下的plugin.min.js​ 直接将这个文件替换media文件夹下的plugin.min.js二、编辑器里的视频无法播放​ 视频无法播放的问题在网页控制台处定位后发现多了一个​span classmce-shim/span​ 在plugin.min.js查询关键字找到如下代码对添加span的代码注释掉就可以了//这里不添加这个span。会挡住video标签从而不能播放视频// shimNode new global$7(span, 1);// shimNode.attr(class, mce-shim);previewWrapper.append(previewNode);// previewWrapper.append(shimNode);5.6.0版本中只需要改动一处即可正常浏览视频并播放如需播放则按代码注释放开controls: ‘’即可if(namevideo){letvdnode.firstChild.value;letb/source([\s]|[\s][^][\s])src(\([^\]*)\|\([^\]*)\)[^]*/gi;// let s vd.toLowerCase().match(b); //原来的代码letsvd.match(b);//改动代码,不需要转换为小写进行正则匹配letsrcRegExp.$3;console.log(src)placeHolder.attr({src:src,controls:,//显示播放工具就取消这行的注释});三、编辑器的超链接点击无效​ 编辑器添加的超链接鼠标单击没反应。只有通过自己为其添加单击事件实现了​ 关键解决代码如下:$(editor.getBody()).on(click,a[href],function(e){if(editor.mode.isReadOnly()){window.open($(e.currentTarget).attr(href));}});