TinyMce使用问题记录

最近在使用前端开源富文本编辑器做项目，遇到的几个问题，做一个记录，对于这些问题有些是可以通过网上查询资料找到解决方法，做一个整理。

说明一下，自己使用的版本是TinyMce 5.2.0。

一、无法通过本地上传的方式上传视频

​ 编辑器自带的添加视频的方式不支持本地上传。只有通过URL的方式或者是iframe嵌入的方式添加,这个只有通过改源码自行实现。这里我是采用了TinyMce中文网提供的js文件来解决。而且TinyMce中文网翻译的内容都比较齐全，对新手来说十分友好了。

​ Tiny中文文档：Tiny中文文档

​ js文件：修改后的media下的plugin.min.js

​ 直接将这个文件替换media文件夹下的plugin.min.js

二、编辑器里的视频无法播放

​ 视频无法播放的问题在网页控制台处定位后发现多了一个

​ <span class="mce-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 (name == 'video') {
      let vd = node.firstChild.value;
      let b = /<source([\s]+|[\s]+[^<>]+[\s]+)src=(\"([^<>"\']*)\"|\'([^<>"\']*)\')[^<>]*>/gi;
      // let s = vd.toLowerCase().match(b);  //原来的代码
      let s = vd.match(b); //改动代码,不需要转换为小写进行正则匹配
      let src = RegExp.$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'));
   }
});