百度编辑器的内容改变事件监听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 >
<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();
>>>>>##
/
/alert('fuck ready'+AllHtml());
$('#' + shellId + ' #edui1_toolbarbox').css('display','none');
editor.fireEvent("contentChange");
var $textarea = $('#' + shellId + '').parent().find('iframe').contents();
//$('#' + shellId + '').parent().find('iframe');
var fn = function(){
Content());
}
if (document.all) {
$(0).attachEvent('onpropertychange',function(e) {
fn();
});
}else{
$('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('选取改变:'+Content());
});
//事件
editor.addListener("contentChange",function(){
console.log('内容改变:'+Content());
//var d = Content();
});
editor.addListener("fullScreenChanged",function(type,mode){
//mode代表当前是否全屏，true代表切换到了全屏模式，false代表切换到了普通模式
console.log('全屏模式：'+mode);
})
return editor;
}
var editor = createEditor();
$('#addLinkTest').click(function(){
href: "ueditor.baidu",        //超链地址，必选
data_ue_src: "ueditor.baidu",  //UE内部使⽤参数，与href保持⼀致即可，可选
target: "_self",                          //⽬标窗⼝，可选
textValue: "UEditor",                    //链接显⽰⽂本，可选
jquery修改html内容
title: "⽊仓威武"    //标题，可选
});
});
$('#addImgTest').click(function(){
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
提供的事件监听是这样的：
//事件
editor.addListener("contentChange",function(){
console.log('内容改变:'+Content());
});
⼀般的字符都可以监听，但是@#￥%……这些字符的输⼊是监听不到的。实现原理应该是监听的键盘事件，百度的⽜⼈们呀，你们难道不知道对于这些特殊字符是监听键盘的keypress和keyup是监听不到的吗....
好吧那字能⾃⼰解决了。
最挫的办法就是时钟监听了，每隔⼏⼗毫秒获取⼀下编辑框中的内容，与之前内容⽐较⼀下，变了就触发改变事件。但是这不是理想的⽅案呀...
有没有好的实现⽅案呢，有了！想到之前看过的⼀个实时统计字数的⼩东西
什么字符都⽀持，好研究⼀下，核⼼到吗如下
var $textarea = $('#' + shellId + '');
var fn = function(){
Content());
}
if (document.all) {
$(0).attachEvent('onpropertychange',function(e) {
fn();
});
}else{
$('input',fn);
}
好，我们也这么玩。
但是问题来了，iframe是可编辑元素吗？⽀持上⾯的监听事件吗？
万能的⽹友给了我答案，能！
果断实现，结果如下：
$('#' + shellId + ' #edui1_toolbarbox').css('display','none');
editor.fireEvent("contentChange");
var $textarea = $('#' + shellId + '').parent().find('iframe').contents();
var fn = function(){
Content());
}
if (document.all) {
$(0).attachEvent('onpropertychange',function(e) {
fn();
});
}else{
$('input',fn);
}
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。

jQuery常用方法中文解析
« 上一篇
input内容改变的触发事件
下一篇 »

发表评论