angularjs中ckeditor的destroy问题
项目中,在切换了页面的tab页后会发现上传图片的操作报错,检查后发现问题根源是切换了tab页重新加载页面时ckeditor又会创建一次,这个时候的ckeditor已经不是第一次创建的那个了,所以上传图片的方法中会报错。
解决方法:在ckeditor每次创建之前判断一下,如果有ckeditor则destroy掉,重新创建新的,保证页面上始终只有一个ckeditor,具体如下:
- 在ckeditor的directive中:
console.log(CKEDITOR.instances.myCKeditor ); //①
if(CKEDITOR.instances.myCKeditor){//如果CKEDITOR已经创建存在则执行destroy
CKEDITOR.instances.myCKeditor.destroy();
}
console.log(CKEDITOR.instances.myCKeditor); //②
var ckeditor=CKEDITOR.replace(<HTMLTextAreaElement>element[0]);//保持始终创建新的CKEDITOR
console.log(CKEDITOR.instances.myCKeditor); //③ - 说明:其中,myCKeditor是页面中textarea的name值
<textarea ckeditor-Directive name="myCKeditor"></textarea>
- 三个console.log打印的情况如下:
- 首次进入页面时由于之前是没有ckeditor存在的,所以①和②都是undefined,执行创建代码后③是创建出来的ckeditor对象;
- 切换了tab页后,①是之前创建的ckeditor对象,执行了destroy()方法后②是undefined,执行创建代码后③是新的ckeditor对象。
angularjs中ckeditor的destroy问题的更多相关文章
- Angularjs 与Ckeditor
Angularjs 与Ckeditor Angularjs 诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块 ...
- 了解angularjs中的生命周期钩子函数$onInit,$onChange,$onDestory,$postLink
壹 ❀ 引 我在前面花了三篇文章用于介绍angularjs的指令directive,组件component,并专门花了一篇文章介绍directive与component的不同,其中提到在compon ...
- AngularJS中get请求URL出现跨域问题
今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...
- AngularJS 中的Promise --- $q服务详解
先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...
- AngularJS中的表单验证
AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...
- 关于angularjs中的jQuery
关于angularjs中的jQuery 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...
- angularjs中的directive scope配置
angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...
- angularjs中provider,factory,service的区别和用法
angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...
- 初次使用AngularJS中的ng-view,路由控制
AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面 第一步:引入必要的js: <script src="js/lib/angular.js"> ...
随机推荐
- 准备CLR源码阅读环境
微软发布了CLR 2.0的源码,这个源码是可以直接在freebsd和windows环境下编译及运行的,请在微软shared source cli(http://www.microsoft.com/en ...
- SqlServer--用代码创建和删除数据库或表
创建数据库,创建表,设置主键数据库的分离和附加MS SQLServer的每个数据库包含:1个主数据文件(.mdf)必须.1个事务日志文件(.ldf)必须.可以包含:任意多个次要数据文件(.ndf)多个 ...
- ORACLE使用GV_$TEMP_SPACE_HEADER统计临时表空使用情况不准确的问题
以前写了一篇ORACLE临时表空间总结的文章, 里面介绍了几个查看临时表空间使用情况的脚本,其中一个脚本如下所示: SELECT TU.TABLESPACE_NAME ...
- .NET应用架构设计—重新认识分层架构(现代企业级应用分层架构核心设计要素)
阅读目录: 1.背景介绍 2.简要回顾下传统三层架构 3.企业级应用分层架构(现代分层架构的基本演变过程) 3.1.服务层中应用契约式设计来解决动态条件不匹配错误(通过契约式设计模式来将问题在线下暴露 ...
- PostgreSQL-constraint
CREATE TABLE语法CREATE [[ GLOBAL | LOCAL ]{ TEMPORARY | TEMP }] TABLE table_name ({ column_name data_t ...
- spring security oauth2.0 实现
oauth应该属于security的一部分.关于oauth的的相关知识可以查看阮一峰的文章:http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html ...
- [WPF系列]Adorner应用-自定义控件ImageHotSpot
引言 项目中有时需要在图片上标注热区,在HTML中有<area>标签,但在WPF中目前还没现成的控件来实现这这一功能.至于图片热区功能有道词典的[图解词典]是个不错的例子,如图1: 图 1 ...
- 某中国500强企业BI系统成功应用案例
随着某集团20多年的不断发展发展,现已成为中国500强.中国大企业集团竞争力前25强.中国信息化标杆企业和国家重点火炬高新技术企业.拥有总资产数十亿元.员工数万名,涉足电力.家电.能源.等多个行业,并 ...
- Java Generics and Collections-2.1
2.1 子类化以及替换原理 为什么List<Integer> 不是List<Number> 的子类? 首先看下面的代码,这段代码是编译不过的 package java_gene ...
- LeetCode Single Number I / II / III
[1]LeetCode 136 Single Number 题意:奇数个数,其中除了一个数只出现一次外,其他数都是成对出现,比如1,2,2,3,3...,求出该单个数. 解法:容易想到异或的性质,两个 ...