先贴上我的初始化代码,可能是用法问题冤枉了百度编辑器,如果是我的用法有问题欢迎大侠们指正
<!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>
提供的事件监听是这样的:
//事件 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); } });