KindEditor富⽂本框⽆法编辑或者内容改变⽆法触发事件
KindEditor富⽂本框在dialog下的创建与使⽤
jquery框架下使⽤KindEditor
在主流的前端框架（如：bootstrap）下在dialog页使⽤富⽂本编辑器并不会出现⽆法编辑的现象，⽽jquery则存在某种限制，我尝试很多⽅法然后使⽤其中的⼀种，⼤家有什么其他想法也可以分享讨论。
创建editor
html代码
<!-- demo内容弹框 -->
<div id="demo-dialog" >
<!-- 编辑区域 -->
<div class="col-md-12"id="demo_content" >
<div >
<textarea name="demo_contents"id="demo_contents" ></textarea>
</div>
</div>
</div>
js代码
$("#demo-link").click(function(){
//显⽰dialog
$("#demo-dialog").dialog({
});
//创建editor
demo_editor = ate('textarea[name="demo_contents"]',{
filterMode:true,
items: items,
allowPreviewEmoticons:true,
afterCreate:function(){
this.sync();
}
});
});
如果是点击事件触发dialog, 必须等dialog页加载完毕，再进⾏创建editor，否则就会导致⽆法编辑。
editor内容改变事件
html内容文本框//放在页⾯加载之前
var first_service_content =null;
//保存按钮禁启⽤（editor创建以后）
$("#demo-dialog").parent().parent().parent().find('input[name="保存"]').attr('disabled',"true");
$("#demo-dialog").parent().parent().parent().find('input[name="保存"]').css("background-color","silver");
//editor内容改变事件（editor创建以后）
demo_editor.edit.afterChange(function(fn){
if(demo_editor !=null){
if(demo_editor.html()== first_demo_content){
$("#demo-dialog").parent().parent().parent().find('input[name="保存"]').attr('disabled',"true");
$("#demo-dialog").parent().parent().parent().find('input[name="保存"]').css("background-color","silver");
}else{
$("#demo-dialog").parent().parent().parent().find('input[name="保存"]').removeAttr("disabled");
$("#demo-dialog").parent().parent().parent().find('input[name="保存"]').css("background-color","#75B9E6");
}
}
});
//加载demo初始化内容
function loadDemoContent(){
//从后台获取demo初始化内容
}
这⾥利⽤editor内容改变事件控制dialog保存按钮的禁启⽤以及颜⾊变换，其他⼀些操作同样可以这样控制，需记住editor的改变事件是在editor创建以后，⽽且必须在点击事件⾥⾯。

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