富文本编辑器爬坑

前置代码

var editor = document.getElementById('editContent');

function randomString(length) {
    var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var result = '';
    for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
    return result;
}

  • 模块不可编辑

我们项目需要视频音频定位地址,我直接使用' + '

'; document.execCommand('insertHTML', false, html); }

ps: 也可以使用 contenteditable="false" 属性加载模块上


  • 阻止粘贴格式

editor.addEventListener("paste", function(e){
    e.preventDefault();
    var clp = (e.originalEvent || e).clipboardData;
    var text= clp.getData("text/plain");  // 粘贴的文本,带换行符
    var html= clp.getData("text/html");  // 带样式的html标签
    document.execCommand('insertText', false, text);
});

  • 转小程序

目前项目使用 mpvue 框架,富文本使用 mpvue-wxParse

因为小程序不支持