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"> ...
随机推荐
- 我的第一个React Native App
我用了三天时间实现了一个相对比较完整的React Native 新闻发布类型的示例.应用做得很简单,但大多React Native的组件都有用到,今天做一个分享(由于我电脑是Windows系统,所以只 ...
- Java调用solrj5.5.3接口,查询数据
前期准备 搭建solr服务 参考上一篇,搭建solr搜索服务. 添加依赖 maven工程的话,添加如下依赖, <!-- https://mvnrepository.com/artifact/or ...
- js中A包含B的写法与分割字符串的方法
在java中A包含B的写法 if(A.contains(B)){ ... } 在js中没有contains方法,应该使用下面这种方法: var an = "传染性.潜伏性.破坏性" ...
- php CGI、Fastcgi、PHP-FPM的详细介绍与之间的关系
以下PHP CGI.Fastcgi.PHP-FPM的一些信息归纳和汇总----->详细介绍与之间的关系 一:CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的 web ...
- Mysql 安装-windows X64
1.首先下载mysql文件包 2.将下载到的mysql-5.6.24-x64.zip进行解压. 3.安装,直接下一步. 4.进入文件夹内复制my-default.ini文件,并重命名为my.ini 5 ...
- android Bundle savedInstanceState用途
经常会出现用户按到home键,退出了界面,或者安卓系统意外回收了应用的进程,这种情况下,使用Bundle savedInstanceState就可以用户再次打开应用的时候恢复的原来的状态 (以下转自: ...
- MogileFS系统简单配置实例
实验原理: MogileFS是一个开源的分布式文件系统,用于组建分布式文件集群,由LiveJournal旗下DangaInteractive公司开发,Danga团队开发了包括 Memcached.Mo ...
- delphi WebBrowser控件上网页验证码图片识别教程(一)
步骤一:获取网页中验证码图片的url地址 在delphi中加入一个BitBtn和一个memo以及WebBrowser控件实现网页中验证码图片的url地址的获取 程序如下:procedure TForm ...
- 基于.net开发chrome核心浏览器【七】
这是一个系列的文章,前面六篇文章的地址如下: 基于.net开发chrome核心浏览器[六] 基于.net开发chrome核心浏览器[五] 基于.net开发chrome核心浏览器[四] 基于.net开发 ...
- 【转】40个良好用户界面Tips
一个良好的用户界面应具有高转换率,并且易于使用.但要用户体验良好并不容易做到,下面我们整理了40个良好用户界面Tips,希望能对你有帮助! 1 尽量使用单列而不是多列布局 单列布局能够让对全局有更好的 ...