wangeditor视频

Posted 2021-12-01 mirrortom

wangeditor网址http://www.wangeditor.com/

目前使用的是3.11版本

使用步骤

1.引用wangEditor.min.js

2.代码

　　2.1 取得函数var E = window.wangEditor

　　2.2实例化,参数是要变成编辑器的那个DIV的IDvar editor = new E(‘#editordiv‘)editor.create()

　　2.3如果1个页面上要多个编辑器,再new就可以了var editor1 = new E(‘#editordiv1‘)editor1.create()

关于图片

可以设置后台服务端上传,也可以设置直接在前端转成BASE64. [editor.customConfig.uploadImgShowBase64=true],2.x用的时候好像没有这功能.

从文档上看,它上传图片,使用的是formData对象.

新版本提供了自定义上传图片的接口, 只要实现这个方法,就可以上传图片了.

// 这个属性用于限制图片选框能选几个图片
customConfig.uploadImgMaxLength=1;
// 实现这个方法上传图片
customConfig.customUploadImg = async (files, insert) =>
{
   // 这个就是选中的文件,估计就是input控件的 files属性
   files
   // files 是 input 中选中的文件列表
   // insert 是获取图片 url 后，插入到编辑器的方法
   inser();
}

获取内容

editor.txt.html(),这个方法获取html内容,也就是包含格式信息的内容

editor.txt.text(),这个方法获取纯文本内容,不含格式

关于视频

插入格式如下

<iframe src="/cdn/media/info.mp4"></iframe>
<iframe src="http://localhost/cdn/media/info.mp4"></iframe>

注意有个情况,使用iframe方式插入视频时,有的浏览器不能识别播放.为此,修改了第2611行附近开始 改进后,只需要输入一个地址,就能自动生成video标签,支持mp4,mp3.
2611行处修改内容

if (val) {
    if (val.startsWith(‘http‘)) {
        if (val.endsWith(‘mp4‘)) {
            // 插入视频
            var videodom = `<video autoplay="autoplay" controls="controls"><source src="${val}" type="audio/mp4" /></video>`;
            _this._insert(videodom);
        } else if (val.endsWith(‘mp3‘)) {
            var audiodom = `<video autoplay="autoplay" controls="controls"><source src="${val}" type="audio/mp3" /></video>`;
            _this._insert(audiodom);
        }
        return true;
    }
    alert(‘无效的视频地址‘);
}