JS CKEditor使用setData后绑定click事件
CKEditor使用setData()时会自动丢失初始时绑定的时间,在百度时发现有很多方法都不对。
近期在做项目的时候,由于客户需要,将原来的文本格式的textarea标签更改成富文本编辑器--CKEditor,插件使用起来很方便,网上教程很多。API看起来比较麻烦。
为文本框添加绑定事件的两种方式:
1、CKeditor预加载时可以绑定一次:
IS代码:
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的时候一定要注意着两种绑定事件的方法。
JS CKEditor使用setData后绑定click事件的更多相关文章
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
- google跟踪代码管理器gtm无法给相同class元素绑定click事件埋点解决
Google 跟踪代码管理器是一个跟踪代码管理系统 (TMS),可以帮助您快速轻松地更新网站或移动应用上的跟踪代码及相关代码段(统称为“代码”).将一小段跟踪代码管理器代码添加到项目后,您可以通过网页 ...
- jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件
jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...
- ios 设备用jquery live绑定 click 事件不管用
问题描述:用js拼接的html追加到页面,然后用 live 绑定click事件不起作用 解决办法:1.直接在标签写onclick事件 2.给需要绑定的标签添加css样式{cursor:pointe ...
- jquery单选框radio绑定click事件实现和是否选中的方法
使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...
- jquery单选框radio绑定click事件实现方法
本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码代码如下: <html><head><title ...
- vue 移动端在div上绑定click事件 失效
在.vue的文件中使用了better-scroll,在div标签上绑定click事件后,无效. 原因:使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: t ...
- JS如何调用隐藏按钮的click事件
js如何调用隐藏按钮的click事件:1.设定隐藏不要使用Visiable属性,使用style.display=none:2.触发JS事件可以使用fireEvent方法,如:document.getE ...
- [ 面试没回答上的问题2]IOS上给body绑定click事件的bug
面试被问到ios上的bug,自己提到绑定click事件的bug,但是并没有把问题讲的很清楚,这里再清理一下思路. 这个bug只在IOS上有,包括ihone,ipad,由于ios浏览器都用的safari ...
随机推荐
- [ACM] POJ 2635 The Embarrassed Cryptographer (同余定理,素数打表)
The Embarrassed Cryptographer Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 11978 A ...
- Android View视图系统分析和Scroller和OverScroller分析
Android View视图系统分析和Scroller和OverScroller分析 View 视图分析 首先,我们知道.在Android中全部的视图资源(无论是Layout还是V ...
- Javaproject集成log4j 2.x
log4j2和log4j在配置文件和引入jar包上出现了不同.这里做个备忘,这里使用的版本号为apache-log4j-2.3-bin.zip. 1.apache-log4j-2.3-bin.zip下 ...
- 使用javascript正则表达式实现遍历html字符串
最近在尝试实现一个js模板引擎,其中涉及到使用js解析html字符串的功能.由于我实现的这个模板不止是要能替换参数输出html字符串,还要可以解析出每个dom元素的名称及参数啥的. 网上找到了一个叫做 ...
- 自学Python2.4-基本数据类型-字典dict(objct)
Python dict方法总结 一.字典介绍 1.字典概述 ①字典是python中唯一内建的映射类型.又称关联数组或散列②映射类型对象里哈希值(键,key)和指向的对象(值,value)是一对多的的关 ...
- C#:StreamReader读取.CSV文件(转换成DataTable)
using System.Data; using System.IO; /// <summary> /// Stream读取.csv文件 /// </summary> /// ...
- Redis持久化方式
Snapsotting(快照)方式 snapsotting是默认方式,(把数据做一个备份,将数据存储在文件) 这种方式将内存中数据照快照方式写到二进制文件中.默认的文件名为"dump.rdb ...
- DotNetCore跨平台~为Lind.DotNetCore框架添加单元测试的意义
回到目录 单元测试大叔认为有几下两个必要的作用,也是为什么要上单元测试的原因 组件,框架在修改和BUG解决后,进行正确性的测试,然后才能打包 业务模块,主要提现在进行业务规则的模拟上面,保证了业务逻辑 ...
- ES6之Set方法与Map方法
ES6提供了新的数据结构--Set与Map,Set本身是一个构造函数且成员的值是唯一的,没有重复的值!!!Set()是一个存储已排序的无重复元素的数据而Map()是一对数据Map()使用关键值Key来 ...
- OC学习6——面相对象的三大特性
我们在学习Java的时候都知道,类有三大特性:继承,封装,多态,这也是面向对象的三大特征.OC学习篇之---类的三大特性(封装,继承,多态) 1.封装(Encapsulation)是指将对象的状态信息 ...