项目中,在切换了页面的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问题的更多相关文章

  1. Angularjs 与Ckeditor

    Angularjs 与Ckeditor Angularjs 诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块 ...

  2. 了解angularjs中的生命周期钩子函数$onInit,$onChange,$onDestory,$postLink

     壹 ❀ 引 我在前面花了三篇文章用于介绍angularjs的指令directive,组件component,并专门花了一篇文章介绍directive与component的不同,其中提到在compon ...

  3. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

  4. AngularJS 中的Promise --- $q服务详解

    先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...

  5. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  6. 关于angularjs中的jQuery

    关于angularjs中的jQuery 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...

  7. angularjs中的directive scope配置

    angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...

  8. angularjs中provider,factory,service的区别和用法

    angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...

  9. 初次使用AngularJS中的ng-view,路由控制

    AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面 第一步:引入必要的js: <script src="js/lib/angular.js"> ...

随机推荐

  1. SQL Server 2012 The report server cannot open a connection to the report server database

    案例环境: 操作系统版本:    Windows Server 2012 R2 Standard 数据库版本  :    SQL SERVER 2012 SP2 案例介绍: 今天进入一台新安装的SQL ...

  2. YourSQLDba将数据库置于紧急模式的原因浅析

    从SQL SERVER 2000 上迁移了一个数据库到SQL SERVER 2008 R2上,暂且用DataBaseName代替迁移的真实的数据库名(后面的资料也会将数据库真实的名字用DataBase ...

  3. TCP首部解析

    TCP首部: TCP数据被封装在一个IP数据报中,如下: TCP首部数据格式: 16位源都口号,16为目的端口号用于寻找发送端和接收端的应用进程,加上IP首部的源端IP及终端IP,唯一的确认一个TCP ...

  4. Neo4j图数据库管理系统开发笔记之一:Neo4j Java 工具包

    1 应用开发概述 基于数据传输效率以及接口自定义等特殊性需求,我们暂时放弃使用Neo4j服务器版本,而是在Neo4j嵌入式版本的基础上进行一些封装性的开发.封装的重点,是解决Neo4j嵌入式版本Emb ...

  5. WPF 自定义柱状图 BarChart

    WPF 自定义柱状图 当前的Telerik控件.DevExpress控件在图表控件方面做得不错,但是有时项目中需要特定的样式,不是只通过修改图表的模板和样式就能实现的. 或者说,通过修改当前的第三方控 ...

  6. mvn常用命令

    1. mvn compile 编译源代码 2. mvn test-compile 编译测试代码 3. mvn test 运行测试 4. mvn package 打包,根据pom.xml打成war或ja ...

  7. python高级之面向对象高级

    python高级之面向对象高级 本节内容 成员修饰符 特殊成员 类与对象 异常处理 反射/自省 单例模式 1.成员修饰符 python的类中只有私有成员和公有成员两种,不像c++中的类有公有成员(pu ...

  8. 关于ES6新增的东西(二)

    六.原生Promise 就是一个对象,用来传递异步操作的数据(消息) pending(等待.处理中)-> Resolve(完成.fullFilled) -> Rejected(拒绝.失败) ...

  9. bootstrap 组件

      bootstrap  组件 1下拉菜单(dropdown)  下拉菜单切换(dropdown-toggle)  下拉菜单对齐(dropdown-menu-right-右对齐) 下拉菜单分割线(di ...

  10. bzoj 2287: 【POJ Challenge】消失之物

    Description ftiasch 有 N 个物品, 体积分别是 W1, W2, ..., WN. 由于她的疏忽, 第 i 个物品丢失了. "要使用剩下的 N - 1 物品装满容积为 x ...