正文 

当前位置： 首页 > java > java语法

angularjs中ckeditor的destroy问题

PeaFull      2022-02-07     194

关键词：

项目中，在切换了页面的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对象。

 

如何在 CKEditor 中定义允许的标签？

】如何在CKEditor中定义允许的标签？【英文标题】：HowtodefineallowedtagsinCKEditor?【发布时间】：2011-02-2403:55:13【问题描述】：有时用户将文本从不同来源复制并粘贴到CKEditor，但我想限制他们可以复制到CKEditor的标签。我只需要在CKE... 查看详情

ckeditor案例

官网下载:http://ckeditor.com/download将下载的ckeditor整个文件放入项目中在页面中引用ckeditor.js,并用新建一个<textarea>再建一个<script>完了用CKEDITOR.replace("textarea的name")替换掉原textarea即可ckeditor的大小以及其他的属性需要在confi... 查看详情

ckeditor中config.js等通过ckeditor.js引入文件手动修改方法

因为除了ckeditor.js之外的引用文件是通过ckeditor.js自动添加<script>或<link>标签实现文件的引入，引入的根目录是展示页面的地址。有时需要手动修改通过ckeditor.js引入的文件。这是需要在引入ckeditor.js之前定义window.CKEDITOR_B... 查看详情

将ckeditor集成到java开发环境中

本文主要介绍如何将CKEditor集成到Java开发环境中，CKEditor是FCKEditor的升级版，使用很方便。下面是基本使用方法：第一步：下载必要的库1、到CKEditor官网http://www.fckeditor.net/download/下载Ckeditor4.0.2，这是目前最新的版本，4.1马上就... 查看详情

CKEditor - 英文图像预览对话框中的文本

】CKEditor-英文图像预览对话框中的文本【英文标题】：CKEditor-textinimagepreviewdialoginEnglish【发布时间】：2013-05-2202:01:12【问题描述】：我在我的网站上使用CKEditor，我想将Image->Properties->Preview中的文本更改为英文。我想更改此... 查看详情

在 Magnolia RichTextField 中配置 CKEDITOR 的问题

】在MagnoliaRichTextField中配置CKEDITOR的问题【英文标题】：ProblemconfiguringCKEDITORinMagnoliaRichTextField【发布时间】：2019-10-3014:51:44【问题描述】：我无法在Magnolia的RichTextField中自定义工具栏按钮在Yaml文件中添加configJsFile:/ckeditor/configJsF... 查看详情

在 CKEditor5 中插入自定义元素

】在CKEditor5中插入自定义元素【英文标题】：InsertcustomelementinCKEditor5【发布时间】：2019-11-2311:19:58【问题描述】：在CKEditor5中，我正在创建一个插件来插入span元素以显示工具提示。这个想法是显示一个带有（脚）注的工具提示... 查看详情

在Vue组件中显示CKeditor内容？

】在Vue组件中显示CKeditor内容？【英文标题】：DisplayCKeditorcontentinvuecomponent?【发布时间】：2022-01-1819:23:23【问题描述】：我在开发博客时遇到了一个问题。这个博客有两个方面。用于博客管理的管理员端，例如创建、编辑博客…... 查看详情

CKEditor 提到 - 从提要中删除标记

】CKEditor提到-从提要中删除标记【英文标题】：CKEditormentions-removemarkerfromfeed【发布时间】：2020-03-0320:04:31【问题描述】：我有一个来自后端的名字作为名字的提要。在CKEditor提要中，名称显示为@FirstLastname。我想知道如何从提要... 查看详情

监听 CKEditor 5 中内容更改时触发的事件

】监听CKEditor5中内容更改时触发的事件【英文标题】：ListentoeventfiredwhenthecontenthaschangedinCKEditor5【发布时间】：2017-12-2108:07:21【问题描述】：如何在ckeditor5中收听“输入”事件？我希望能够像这样使用Observables：Observable.fromEvent(th... 查看详情

ckeditor：从javascript中的多个实例名称中获取数据(代码片段)

...id值来检索每个textareas中的数据。但是，在JS函数中，“CKEDITOR.instances.id”并不代表预期，如CKEDITOR.instances.editor_1，CKEDITOR.instances.editor_2或CKEDITOR.instances.editor_4，因此，我没有任何检索数据。任 查看详情

Ckeditor 选择的 html 在 chrome 浏览器中无法正常工作

】Ckeditor选择的html在chrome浏览器中无法正常工作【英文标题】：Ckeditorselectedhtmlnotworkingcorrectwithchromebrowser【发布时间】：2012-05-3000:20:54【问题描述】：我正在使用mvc应用程序并使用ckeditor3.6.2版本。我使用以下代码从ckeditor获取选... 查看详情

如何在 CKeditor 上传中向 POST 值添加字段

】如何在CKeditor上传中向POST值添加字段【英文标题】：HowtoaddafieldtoPOSTvaluesinCKeditorupload【发布时间】：2012-05-1016:16:16【问题描述】：我使用django和ckeditor为TextEdits提供所见即所得的体验。我想使用CKEditor文件上传功能（在文件浏... 查看详情

在 CKEditor 5 中渲染 HTML 页面

】在CKEditor5中渲染HTML页面【英文标题】：RenderingHTMLpageinCKEditor5【发布时间】：2019-12-2023:47:29【问题描述】：问题陈述：我最近从CKEditor4更新到CKEditor5并面临渲染Html页面的问题。我发现当我向CKEditor5提供HTML内容时，它会删除所... 查看详情

项目3(代码片段)

课程详情页CKEditor富文本编辑器富文本即具备丰富样式格式的文本。在运营后台，运营人员需要录入课程的相关描述，可以是包含了HTML语法格式的字符串。为了快速简单的让用户能够在页面中编辑带html格式的文本，我们引入富... 查看详情

如何检查CKEditor中是不是有一些文字？

】如何检查CKEditor中是不是有一些文字？【英文标题】：HowtocheckwhetherCKEditorhassometextinit?如何检查CKEditor中是否有一些文字？【发布时间】：2011-03-1716:13:03【问题描述】：我有一个包含几个字段的HTML表单。其中之一是由CKEditor管理... 查看详情

在带有 Laravel/Inertia 的组件中使用 CKEditor

】在带有Laravel/Inertia的组件中使用CKEditor【英文标题】：UsingCKEditorinacomponentwithLaravel/Inertia【发布时间】：2021-10-2620:38:15【问题描述】：我想在我的Laravel/Inertia项目中使用Ckeditor，但我无法让它工作。我从LaraTips找到了一个教程，... 查看详情

如何在引导模式中使用 CKEditor？

】如何在引导模式中使用CKEditor？【英文标题】：HowtouseCKEditorinaBootstrapModal?【发布时间】：2014-05-0311:10:28【问题描述】：如果我在基于Bootstrap模板的HTML页面中使用CKEditor插件，效果很好，但是如果我将编辑器插入到像这样的Bootst... 查看详情