JS CKEditor使用setData后绑定click事件

SJY发表于:2018年07月07日 12:50 • 阅读:

CKEditor使用setData()时会自动丢失初始时绑定的事件,在百度时发现有很多方法都不对。

近期在做项目的时候,由于客户需要,将原来的文本格式的textarea标签更改成富文本编辑器--CKEditor,插件使用起来很方便,网上教程很多。API看起来比较麻烦。

为文本框添加绑定事件的两种方式:

1、CKeditor预加载时可以绑定一次:

JS代码:

var a = CKEDITOR.replace( id);//id是页面元素的ID值;ckeditor_onFocus是自己定义的方法
    a.on("instanceReady", function () {
    this.document.on("click", function () {ckeditor_onFocus(id);});
});

第一个方法很简单易懂,开始初始化时就绑定事件。这样做事对的,但是CKEditor在使用赋值方法setData()之后,初始化绑定的click事件 就会自动丢失;

所以在每次使用setData()方法后需要重新绑定事件,两个绑定方法是不一样的。

JS代码:

function CKE_setData(id,va){//id是页面元素的id值;va是需要赋值的内容
  CKEDITOR.instances[""+id+""].setData(va,function() {
  CKEDITOR.instances[""+id+""].on("focus", function () {ckeditor_onFocus(""+id+"");});
  } );
}

重新绑定后,再次点击就可以实现绑定的事件效果了。

在使用CKEditor的时候一定要注意着两种绑定事件的方法。

另一片相关文章,直接附上

最近有个需求是要在点击CKeditor的时候触发某个判断的事件。试了一些方法都不可行,自己写的onclick时间都会被编辑器屏蔽。可以对对象加载完成绑定事件代码如下。

CKEDITOR.instances.text.on("instanceReady", function () {  
        //and click event  
        this.document.on("click", check_ckedit);
});

其中check_ckedit 是点击的时候触发的函数名。但调用了 setData方法后,刚才绑定的事件就被清除了。要重新绑定。代码如下。

if('写点什么吧' === CKEDITOR.instances.comment_text.document.getBody().getText().trim()) {
                CKEDITOR.instances.comment_text.setData('', function() {
                    CKEDITOR.instances.comment_text.focus();
                    CKEDITOR.instances.comment_text.document.on("click", check_ckedit);
                });                
            }

setData方法 是个异步的,所以直接写后面添加绑定的话不是每次都成功,甚至是每次都不成功。所以可以利用它的第二个参数。把要处理的事情写到函数中。传递给它。这样就保证了绑定事件是在setData之后的了。

欢迎转载,但请保留原文地址 http://www.sjyhome.com/javascript/ckeditor-setdata-click.html

标签: CKEditor click

回复(0)