zoukankan      html  css  js  c++  java
  • 百度编辑器的内容改变事件监听bug

    先贴上我的初始化代码,可能是用法问题冤枉了百度编辑器,如果是我的用法有问题欢迎大侠们指正

    <!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保持一致即可,可选
                             24,                                        //图片显示宽度,可选
                            height: 24,                                       //图片显示高度,可选
                            hspace: 5,                                         //图片左右边距,可选
                            vspace: 2,                                         //图片上下边距,可选
                            alt: '浮云',                               //图片替换文字,可选
                            title: "神马都是浮云"             //图片标题,可选
                        });
                        
                    });
                });
                //init.invokeAll();
            </script>
    
        </body>
    </html>
    View Code

    提供的事件监听是这样的:

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

    一般的字符都可以监听,但是@#¥%……这些字符的输入是监听不到的。实现原理应该是监听的键盘事件,百度的牛人们呀,你们难道不知道对于这些特殊字符是监听键盘的keypress和keyup是监听不到的吗....

    好吧那字能自己解决了。

    最挫的办法就是时钟监听了,每隔几十毫秒获取一下编辑框中的内容,与之前内容比较一下,变了就触发改变事件。但是这不是理想的方案呀...

    有没有好的实现方案呢,有了!想到之前看过的一个实时统计字数的小东西

    什么字符都支持,好研究一下,核心到吗如下

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

    好,我们也这么玩。

    但是问题来了,iframe是可编辑元素吗?支持上面的监听事件吗?

    万能的网友给了我答案,能!

    果断实现,结果如下:

    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);
        }
    
    });
  • 相关阅读:
    C#使用R.net(RDotNet)混合编程,配置环境时发生错误“This 32-bit process failed to load the library R.dll. Native error message is '句柄无效。'””
    Error in shinyAppDir(x) : No Shiny application exists at the path "~/app"处理方法
    vm拷贝cloudera-scm-agent造成问题
    cloudera目录位置
    centos下安装cdh5
    elasticsearch常用的插件
    elasticsearch 安装
    mongod的主要参数有
    mongodb.conf配置文件详解
    centos 安装 mongo3.0
  • 原文地址:https://www.cnblogs.com/longze/p/3195564.html
Copyright © 2011-2022 走看看