TinyMce使用问题记录

TinyMce使用问题记录

        • 一、无法通过本地上传的方式上传视频
        • 二、编辑器里的视频无法播放
        • 三、编辑器的超链接点击无效

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

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

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

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

​ Tiny中文文档:Tiny中文文档

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

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

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

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

​ 在plugin.min.js查询关键字找到如下代码,对添加span的代码注释掉就可以了

//这里不添加这个span。会挡住video标签从而不能播放视频
// shimNode = new global$7('span', 1);
// shimNode.attr('class', 'mce-shim');
previewWrapper.append(previewNode);
// previewWrapper.append(shimNode);

三、编辑器的超链接点击无效

​ 编辑器添加的超链接鼠标单击没反应。只有通过自己为其添加单击事件实现了

​ 关键解决代码如下:

$(editor.getBody()).on('click', 'a[href]', function (e) {
   if (editor.mode.isReadOnly()) {
     window.open($(e.currentTarget).attr('href'));
   }
});

你可能感兴趣的:(笔记,前端)