百度編輯器的內容改變事件監聽bug

時間 2019-11-29

原文原文鏈接

先貼上個人初始化代碼，多是用法問題冤枉了百度編輯器，若是是個人用法有問題歡迎大俠們指正javascript

<!DOCTYPE type>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>簡易編輯器</title>
        <script type="text/javascript" src="/resources/js/lib/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="/resources/js/user/client/common/ajax-urlconfig.js"></script>
        <script type="text/javascript" src="/resources/js/user/client/common/utils.js"></script>


        <script type="text/javascript" src="/resources/js/lib/md5.js"></script>
        <script type="text/javascript" src="/resources/js/user/client/common/init.js"></script>
        <script type="text/javascript" src="/resources/js/lib/ueditor/ueditor.all.min.js"></script>
        <script type="text/javascript" src="/resources/js/lib/ueditor/editor_config.js"></script>

        <script type="text/javascript" src="/resources/js/lib/ueditor/lang/zh-cn/zh-cn.js"></script>

        <link rel="stylesheet" type="text/css" href="/resources/css/basic.css"/>
        <link rel="stylesheet" type="text/css" href="/resources/js/lib/ueditor/themes/iframe.css"/>
        <link rel="stylesheet" type="text/css" href="/resources/js/lib/ueditor/themes/default/ueditor.css"/>
        <link rel="stylesheet" type="text/css" href="/resources/js/lib/ueditor/themes/default/css/ueditor.css"/>

        <style>
            .aaa, .bbb {
                margin: 100px;
            }            
        </style>
    </head>
    <body style="background: #fff;">
        <div class="con-textarea width-100pt">
            <textarea class="hidden" id="content" name="contentHtml">就要一個框框</textarea>
        </div>


        <input type="button" id="addLinkTest" value="addLinkTest"/>
        <input type="button" id="addImgTest" value="addImgTest"/>
        <script>
            
            
            $(function () {
                
                
                //初始化百度編輯器 by 小嘉最後修改
                var createEditor = function () {
                    
                    var shellId = 'content';
                    
                    window.UEDITOR_HOME_URL = "/resources/js/lib/ueditor/"; 
                    
                    window.UEDITOR_CONFIG.langPath = '/resources/js/lib/ueditor/lang/zh-cn/';
                    window.UEDITOR_CONFIG.maximumWords = 140;
                    window.UEDITOR_CONFIG.initialFrameHeight = 120;
                    window.UEDITOR_CONFIG.initialFrameWidth = 530;
                    var editor = new UE.ui.Editor();
                    editor.render(shellId); //'content' 是 teatarea 的 ID ################################
                    
                    editor.ready(function(){
                        //alert('fuck ready'+editor.getAllHtml());
                        $('#' + shellId + ' #edui1_toolbarbox').css('display','none');
                        editor.fireEvent("contentChange");
                        
                        var $textarea = $('#' + shellId + '').parent().find('iframe').contents();
                        //$('#' + shellId + '').parent().find('iframe');

                        var fn = function(){
                            alert(editor.getContent());
                        }
                        
                        if (document.all) {
                            $textarea.get(0).attachEvent('onpropertychange',function(e) {            
                                fn();
                            });
                        }else{
                            $textarea.on('input',fn);
                        }
                        
                    });
                    
                    
                    //        var whiteTagList = 'img,a,span,p,strong,em,ul,ol,li';//標籤白名單
        
                    editor.addListener("beforePaste",function(type,data){
                        $("body").append("<div id='cleanPaste' style='display:none;'></div>");
            
                        $("#cleanPaste").html(data.html);

                        $("#cleanPaste script").remove();
                        $("#cleanPaste input").remove();
                        $("#cleanPaste button").remove();
                        $("#cleanPaste object").remove();
                        $("#cleanPaste *").removeAttr("class").removeAttr("style").removeAttr("id").removeAttr("width").removeAttr("height");
                        var aTags = $("#cleanPaste a");
                        for(var i =0;i<aTags.length; i++){
                            if($(aTags[i]).attr("href") && $(aTags[i]).attr("href").toLowerCase().indexOf("javascript") == 0 ){
                                $(aTags[i].attr("href","javascript:;"));
                            }
                        }
                        data.html = $("#cleanPaste").html();
                        //$("#cleanPaste").remove();
                    });
                    
                    //事件
                    editor.addListener("selectionChange",function(){
                        //console.log('選取改變');
                        console.log('選取改變:'+editor.getContent());
                    });
                    
                    //事件
                    editor.addListener("contentChange",function(){
                        console.log('內容改變:'+editor.getContent());
                        //var d = editor.getContent();
                    });
                    
                    
                    
                    editor.addListener("fullScreenChanged",function(type,mode){
                        //mode表明當前是否全屏，true表明切換到了全屏模式，false表明切換到了普通模式
                        console.log('全屏模式：'+mode);
                    })
                    
                    
                    
                    return editor;
                }
                
                var editor = createEditor();
                
                $('#addLinkTest').click(function(){
                    editor.execCommand("link",{
                        href: "http://ueditor.baidu.com",         //超鏈地址，必選
                        data_ue_src: "http://ueditor.baidu.com",  //UE內部使用參數，與href保持一致便可，可選
                        target: "_self",                          //目標窗口，可選
                        textValue: "UEditor",                     //連接顯示文本，可選
                        title: "木倉威武"     //標題，可選
                    });
                    
                });
                
                $('#addImgTest').click(function(){
                    
                    
                    editor.execCommand("insertImage",{
                        src: "/resources/other/expression/gif/10.gif",          //圖片連接地址,必選
                        data_ue_src: "/resources/other/expression/gif/10.gif",  //UE內部使用參數，與src保持一致便可，可選
                        width: 24,                                        //圖片顯示寬度，可選
                        height: 24,                                       //圖片顯示高度，可選
                        hspace: 5,                                         //圖片左右邊距，可選
                        vspace: 2,                                         //圖片上下邊距，可選
                        alt: '浮雲',                               //圖片替換文字，可選
                        title: "神馬都是浮雲"             //圖片標題，可選
                    });
                    
                });
            });
            //init.invokeAll();
        </script>

    </body>
</html>

View Code

提供的事件監聽是這樣的：css

//事件
editor.addListener("contentChange",function(){
    console.log('內容改變:'+editor.getContent());
});

通常的字符均可以監聽，可是@#￥%……這些字符的輸入是監聽不到的。實現原理應該是監聽的鍵盤事件，百度的牛人們呀，大家難道不知道對於這些特殊字符是監聽鍵盤的keypress和keyup是監聽不到的嗎....html

好吧那字能本身解決了。java

最挫的辦法就是時鐘監聽了，每隔幾十毫秒獲取一下編輯框中的內容，與以前內容比較一下，變了就觸發改變事件。可是這不是理想的方案呀...jquery

有沒有好的實現方案呢，有了！想到以前看過的一個實時統計字數的小東西ajax

什麼字符都支持，好研究一下，核心到嗎以下shell

var $textarea = $('#' + shellId + '');


var fn = function(){
    alert(editor.getContent());
}
                
if (document.all) {
    $textarea.get(0).attachEvent('onpropertychange',function(e) {            
        fn();
    });
}else{
    $textarea.on('input',fn);
}

好，咱們也這麼玩。express

可是問題來了，iframe是可編輯元素嗎？支持上面的監聽事件嗎？app

萬能的網友給了我答案，能！編輯器

果斷實現，結果以下：

editor.ready(function(){
    $('#' + shellId + ' #edui1_toolbarbox').css('display','none');
    editor.fireEvent("contentChange");

    var $textarea = $('#' + shellId + '').parent().find('iframe').contents();

    var fn = function(){
        alert(editor.getContent());
    }

    if (document.all) {
        $textarea.get(0).attachEvent('onpropertychange',function(e) {            
            fn();
        });
    }else{
        $textarea.on('input',fn);
    }

});