百度编辑器插入音视频bug修复-优快云博客

本文链接：https://blog.youkuaiyun.com/susuzhe123/article/details/78874270

本文介绍如何在富文本编辑器中优化视频和音频的插入功能，包括修改配置文件以支持更多属性，调整代码实现自定义视频播放器及音频播放器的插入，并提供具体步骤和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在config.js里面whitList白名单加入以下代码

ul:     ['class', 'style'],
            video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style'],
            source: ['src', 'type'],
 embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play',  
      +  'autoplay','loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],
 iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']

在all.js

这段代码注释
for(var i= 0,len=videoObjs.length;i<len;i++){
                var img = this.document.getElementById('tmpVedio'+i);
                domUtils.removeAttributes(img,'id');
                rng.selectNode(img).select();
                me.execCommand('imagefloat',videoObjs[i].align)
            }

在这个里面me.commands["insertvideo"]
修改这句最后image的为embed
html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'embed'));

找到creatInsertStr这个方法
将case  embed  里面type="application/x-shockwave-flash" class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +' 这句去掉

dialog下面的video文件夹下面的video.js
找到createPreviewVideo
将embed  里面type="application/x-shockwave-flash" class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +' 这句去掉

到这里插入视频就可以了。

接下来是插入音频，需要重写他们的方法，也可以自己写个插件，都一样。重写dialog下面的music

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>插入音乐</title>
    <script type="text/javascript" src="../internal.js"></script>
    <link rel="stylesheet" type="text/css" href="music.css">
</head>
<body>
<div class="wrapper">
        <div id="video" class="panel focus">
           <label for="musicUrl" class="url">音频地址</label><input id="musicUrl" type="text">
            <fieldset>
                <legend>音频尺寸</legend>
                <div>
                    <label for="musicW" class="url">音频宽度</label><input id="musicW" type="text">
                    <label for="musicH" class="url" style="margin-left: 20px;">音频高度</label><input id="musicH" type="text">
                </div>
            </fieldset>
           <fieldset>
                <legend>对齐方式</legend>
                <div class="divs">
                    <input type="radio" checked="" class="radio" name="userid" id = 'center' value="center"><label for="center">居中</label>
                    <input type="radio" class="radio" name="userid" id = 'lefts' value="left"><label for="lefts">左浮动</label>
                    <input type="radio" class="radio" name="userid" id = 'rights' value="right"><label for="rights">右浮动</label>
                    <input type="radio" class="radio" name="userid" id = 'nones' value="none"><label for="nones">无</label>
                </div>
            </fieldset>
            <div id="tip">

            </div>
        </div>
</div>
<script type="text/javascript" src="music.js"></script>
<script type="text/javascript">
    var music = new Music();
    dialog.onok = function () {
        var param = {};
        //获取选中的值
        var radio = document.getElementsByClassName("radio");  
        for (i=0; i<radio.length; i++) {  
            if (radio[i].checked) {  
                param.align = radio[i].value;
            }  
        }
        param.musicUrl = document.getElementById('musicUrl').value;
        param.musicW = document.getElementById('musicW').value;
        param.musicH = document.getElementById('musicH').value;
        return param.musicUrl == '' ? false :true
        music.exec(param);
    };
    dialog.oncancel = function () {
        //取消事件
    };
</script>
</body>
</html>

function Music() {
    this.init();
}
(function () {
    var pages = [],
        panels = [],
        selectedItem = null;
    Music.prototype = {
        total:70,
        pageSize:10,
        dataUrl:"http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.common",
        playerUrl:"http://box.baidu.com/widget/flash/bdspacesong.swf",

        init:function () {
            var me = this;
            me._addUrlChangeListener($G("musicUrl"));
        },
        callback:function (data) {
            var me = this;
            me.data = data.song_list;
            setTimeout(function () {
                $G('J_resultBar').innerHTML = me._renderTemplate(data.song_list);
            }, 300);
        },
        dosearch:function () {
            var me = this;
            selectedItem = null;
            var key = $G('J_searchName').value;
            if (utils.trim(key) == "")return false;
            key = encodeURIComponent(key);
            me._sent(key);
        },
        doselect:function (i) {
            var me = this;
            if (typeof i == 'object') {
                selectedItem = i;
            } else if (typeof i == 'number') {
                selectedItem = me.data[i];
            }
        },
        onpageclick:function (id) {
            var me = this;
            for (var i = 0; i < pages.length; i++) {
                $G(pages[i]).className = 'pageoff';
                $G(panels[i]).className = 'paneloff';
            }
            $G('page' + id).className = 'pageon';
            $G('panel' + id).className = 'panelon';
        },
        listenTest:function (elem) {
            var me = this,
                view = $G('J_preview'),
                is_play_action = (elem.className == 'm-try'),
                old_trying = me._getTryingElem();

            if (old_trying) {
                old_trying.className = 'm-try';
                view.innerHTML = '';
            }
            if (is_play_action) {
                elem.className = 'm-trying';
                view.innerHTML = me._buildMusicHtml(me._getUrl(true));
            }
        },
        _sent:function (param) {
            var me = this;
            $G('J_resultBar').innerHTML = '<div class="loading"></div>';

            utils.loadFile(document, {
                src:me.dataUrl + '&query=' + param + '&page_size=' + me.total + '&callback=music.callback&.r=' + Math.random(),
                tag:"script",
                type:"text/javascript",
                defer:"defer"
            });
        },
        _removeHtml:function (str) {
            var reg = /<\s*\/?\s*[^>]*\s*>/gi;
            return str.replace(reg, "");
        },
        _getUrl:function (isTryListen) {
            //修改传入的url为手动输入的（去除原来的搜索）
            var me = this;
            return  me.playerUrl;
        },
        _getTryingElem:function () {
            var s = $G('J_listPanel').getElementsByTagName('span');

            for (var i = 0; i < s.length; i++) {
                if (s[i].className == 'm-trying')
                    return s[i];
            }
            return null;
        },
        _buildMusicHtml:function (playerUrl) {
            var html = '<embed class="BDE_try_Music" allowfullscreen="false" pluginspage="http://www.macromedia.com/go/getflashplayer"';
            html += ' src="' + playerUrl + '"';
            html += ' width="1" height="1" style="position:absolute;left:-2000px;"';
            html += ' type="application/x-shockwave-flash" wmode="transparent" play="true" loop="false"';
            html += ' menu="false" allowscriptaccess="never" scale="noborder">';
            return html;
        },
        _byteLength:function (str) {
            return str.replace(/[^\u0000-\u007f]/g, "\u0061\u0061").length;
        },
        _getMaxText:function (s) {
            var me = this;
            s = me._removeHtml(s);
            if (me._byteLength(s) > 12)
                return s.substring(0, 5) + '...';
            if (!s) s = "&nbsp;";
            return s;
        },
        _rebuildData:function (data) {
            var me = this,
                newData = [],
                d = me.pageSize,
                itembox;
            for (var i = 0; i < data.length; i++) {
                if ((i + d) % d == 0) {
                    itembox = [];
                    newData.push(itembox)
                }
                itembox.push(data[i]);
            }
            return newData;
        },
        _renderTemplate:function (data) {
            var me = this;
            if (data.length == 0)return '<div class="empty">' + lang.emptyTxt + '</div>';
            data = me._rebuildData(data);
            var s = [], p = [], t = [];
            s.push('<div id="J_listPanel" class="listPanel">');
            p.push('<div class="page">');
            for (var i = 0, tmpList; tmpList = data[i++];) {
                panels.push('panel' + i);
                pages.push('page' + i);
                if (i == 1) {
                    s.push('<div id="panel' + i + '" class="panelon">');
                    if (data.length != 1) {
                        t.push('<div id="page' + i + '" onclick="music.onpageclick(' + i + ')" class="pageon">' + (i ) + '</div>');
                    }
                } else {
                    s.push('<div id="panel' + i + '" class="paneloff">');
                    t.push('<div id="page' + i + '" onclick="music.onpageclick(' + i + ')" class="pageoff">' + (i ) + '</div>');
                }
                s.push('<div class="m-box">');
                s.push('<div class="m-h"><span class="m-t">' + lang.chapter + '</span><span class="m-s">' + lang.singer
                    + '</span><span class="m-z">' + lang.special + '</span><span class="m-try-t">' + lang.listenTest + '</span></div>');
                for (var j = 0, tmpObj; tmpObj = tmpList[j++];) {
                    s.push('<label for="radio-' + i + '-' + j + '" class="m-m">');
                    s.push('<input type="radio" id="radio-' + i + '-' + j + '" name="musicId" class="m-l" onclick="music.doselect(' + (me.pageSize * (i-1) + (j-1)) + ')"/>');
                    s.push('<span class="m-t">' + me._getMaxText(tmpObj.title) + '</span>');
                    s.push('<span class="m-s">' + me._getMaxText(tmpObj.author) + '</span>');
                    s.push('<span class="m-z">' + me._getMaxText(tmpObj.album_title) + '</span>');
                    s.push('<span class="m-try" onclick="music.doselect(' + (me.pageSize * (i-1) + (j-1)) + ');music.listenTest(this)"></span>');
                    s.push('</label>');
                }
                s.push('</div>');
                s.push('</div>');
            }
            t.reverse();
            p.push(t.join(''));
            s.push('</div>');
            p.push('</div>');
            return s.join('') + p.join('');
        },
        _addUrlChangeListener:function(url){
            var me = this;
            //监听url变化
            if (browser.ie) {
                url.onpropertychange = function () {
                    me._regularUrl( this.value );
                }
            } else {
                url.addEventListener( "input", function () {
                    me._regularUrl( this.value );
                }, false );
            }
        },
        _trim:function(str){
            return str.replace(/(^\s*)|(\s*$)/g, "");
        },
        _regularUrl: function(audioUrl){
            //验证url是否为mp3格式  https格式
            var sts = this._trim(audioUrl);
            if(sts.slice(0,5) != 'https' || sts.substr(sts.length-3) != 'mp3'){
                var tip = document.getElementById('tip');
                tip.innerHTML = '只支持https开头，mp3格式的文件，任性！！'
                return false
            }
            return true
        },
        exec:function (param) {
            var me = this;
            //验证url是否正确
            if(!this._regularUrl(param.musicUrl)){
                return false
            };
            editor.execCommand('music', {
                url:param.musicUrl,
                width:param.musicW || 400,
                height:param.musicH || 90,
                align: param.align,
            });
        }
    };
})();

修改all.js
'music':{
                execCommand:function (cmd, musicObj) {
                    var me = this,
                        str = creatInsertStr(musicObj.url, musicObj.width || 400, musicObj.height || 95, musicObj.align, "none", true);
                    me.execCommand("inserthtml",str);
                },
                queryCommandState:function () {
                    var me = this,
                        img = me.selection.getRange().getClosedNode(),
                        flag = img && (img.className == "edui-faked-music");
                    return flag ? 1 : 0;
                }
            }

 music插件的creatInsertStr函数
 将embed更换为
 <audio class="edui-faked-music" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
                ' src="' + url + '" width="' + width  + '" height="' + height  + '" '+ (align && !cssfloat? 'align="' + align + '"' : '') +
                (cssfloat ? 'style="float:' + cssfloat + '"' : '') +
                '></audio>