富文本编辑器爬坑

前置代码

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;
}

  • 模块不可编辑

我们项目需要视频音频定位地址,我直接使用<iframe> 嵌套页面,例如音频:

var insertAudio = function(url, title, time){
    var src = 'http://xxx.com/audio.html?title=' + encodeURIComponent(title) + '&time=' + time + '&url=' + encodeURIComponent(url);
    var id = 'audio_iframe_'+randomString(32)+'_'+new Date().getTime();
    var html = '<p>' +
        '<b style="position:fixed;left:-999px;" contenteditable="false">[音频]</b>' +
        '<iframe type="audio" id="'+id+'" name="'+id+'" class="audio_iframe" frameborder="0" src="" data-title="' + title + '" data-time="' + time + '" data-url="' + url + '" data-state="0"></iframe>' +
    '</p>';
    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

<div id="article_content" class="article pl15 pr15 pb15 rel">
    <wxParse :content="contentHTML" @navigate="navigate" :start-handler="startHandler" />
    <div class="playStop abs" :style="{left:playStopData.x,top:playStopData.y}" @click="stopAudio"></div>
</div>

因为小程序不支持<iframe>标签,需要转成a标签(mpvue-wxParse只有<a><img>才有事件)

...
data() {
    myAudio: null,
    mp3Id: '',
    playStopData: {
        x: '-999px',
        y: '-999px'
    }
},
...
mounted(){
    // 初始化音频
    this.myAudio = wx.createInnerAudioContext();
    this.myAudio.autoplay = true;
    this.mp3Id = '';
},
methods: {
    ...
    startHandler(node, results){
        if(node.tag=='iframe'){
            if(node.attr.class=='audio_iframe'){
                node.attr.href = JSON.stringify({
                    type: 'audio',
                    src: node.attr['data-url'],
                    name: node.attr['data-title'].join(''),
                    id: node.attr.name
                });
                node.tag = 'a';
                node.nodes = [{
                    node: 'text',
                    text: node.attr['data-title'].join('')
                }]
                node.classStr = `audio_iframe a`;
            }
        }
    },
    navigate(href, e){
        try {
            const data = JSON.parse(href);
            if(data.type=='audio'){
                if(data.id!=this.mp3Id){
                    this.mp3Id = data.id;
                    this.myAudio.src = data.src;
                }
                this.myAudio.play();
                // 显示播放状态
                const { offsetLeft, offsetTop } = e.mp.currentTarget;
                this.playStopData = {
                    x: `${offsetLeft}px`,
                    y: `${offsetTop}px`
                }
            }
        } catch (error) {
            
        }
    },
    stopAudio(){
        this.myAudio.pause();
        this.playStopData = {
            x: '-999px',
            y: '-999px'
        }
    }
}

推荐阅读更多精彩内容

  • 不是悲观,而是外包行业水太深。本人有四年互联网二线大厂的从业经历,四年前不喜欢一直在一线城市呆着,回到三线城市。这...
    象骑士阅读 15,515评论 26 96
  • 1、什么也不图你的时候,你也没能给她买束花。 ———《你说》 2、我们都是成年人了,你不用对我说谎、婉转,顾左右言...
    爱因斯坦是文豪阅读 356评论 0 13
  • 再听朴树的《送别》。禁不住感慨万千! 朴树曾经说过:"有的时候觉得生活就像炼狱一样,特别难熬,在音乐里面的时候,即...
    感恩之新阅读 2,456评论 15 159
  • 这两天寒潮来袭 我都穿上了自己最厚的外套 却依然连下楼倒垃圾的勇气都没有 然而网红们竟在零下二三十度的雪场穿比基尼...
    吃喝玩乐购阅读 805评论 3 17
  • 有时候你在意的事情,往往会让你失望,原因可能是这事情原本不该你在意,或者你在意不在意也改变不了什么,那么怎么办呢?...
    吴以解优阅读 1,737评论 6 157