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 ...
随机推荐
- C(8)
C语言位运算与文件 本章引言: 在不知不觉中我们的C高速入门系列已经慢慢地接近尾声了,而在这一节中,我们会对 C语言中的位运算和文件进行解析,相信这两章对于一些人来说是陌生的,由于非常多 老师都会跳过 ...
- UML总结复习指南
用例图 1. 參与者(Actor) 表示与您的应用程序或系统进行交互的用户.组织或外部系统.用一个小人表示. 2. 用例(Use Case) 用例就是外部可见的系统功能,对系统提供的服务进行描 ...
- 苹果新的编程语言 Swift 语言进阶(三)--基本运算和扩展运算
一 基本操作运算 1. 赋值操作 在Swift 中,能够使用赋值操作为一个常量或一个变量赋值,也能够使用多元组一次为多个常量或变量赋值. Swift 的赋值操作与其他语言最大的不同是赋值操作除了可以为 ...
- Android中build target,minSdkVersion,targetSdkVersion,maxSdkVersion概念区分
问题引入: 有一个下载功能,在Android 5.x设备上运行正常,Android 6.x上运行异常,现象是下载进度卡在0%. 问题排查发现,是sdk的target设置为23导致,修改为21则 ...
- 自学Python2.5-基本数据类型-set集合
Python set集合 一. set集合概述 ①set集合,是一个无序且不重复的元素集合.②集合对象是一组无序排列的可哈希的值,集合成员可以做字典中的键.③集合支持用in和not in操作符检查成员 ...
- 前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...
- 48、mysql补充
一 视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,可以将该结果集当做表来使用. 使用视图我们可以把查询过程中的 ...
- 关于《Head First Python》一书中print_lol()函数的思考
关于<Head First Python>一书中print_lol()函数的思考 在<Head First Python>第一章中,讲述到Python处理复杂数据(以电影数据列 ...
- iOS ShareSDK 三方分享/登录使用
原文 http://www.cnblogs.com/CoderAlex/p/4860352.html 一: 快速集成 1.前言 作为现在App里必不可少的用户分享需要,社交化分享显然是我们开发app里 ...
- JavaWeb框架_Struts2_(五)----->Struts2的标签库
1. Struts2的标签库 1.1 Struts2标签库概述 Struts2的标签库可以分为以下3类:用户界面标签.非用户界面标签.AJAX标签; 2.1.1 Struts2标签库的分类和使用 1 ...