`
myrev
  • 浏览: 164030 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

CKEditor And Box window Note

阅读更多

C KEditor And Box window Note

1 . open a new page

if( CKEDITOR.instances[element_id] )

# it will delete the CKEDITOR old instance from cache but it won't  remove the CKEDITOR DOM

(Because the new page has no CKEDITOR DOM, so we needn't destroy it, just use remove. If you use destroy method, it will produce a bug! )

CKEDITOR.remove(CKEDITOR.instances[element_id]) ;

CKEDITOR.replace(element_id, options)


2. create a ckeditor and destroy it in one page

CKEDITOR.replace(element_id, options)

CK EDITOR .instances[element_id]) .destroy() # it will remove the CKEDITOR DOM


3. In Chrome

When you use ckeditor in chrome, you should remember create ckeditor after box resized.

1) create a ckedtior in a new popup window

you should run the create ckeditor code on popup window event : on_complete

CK_Reload = function() {if (CKEDITOR.instances['#{element_id}']) {
        CKEDITOR.remove(CKEDITOR.instances['#{element_id}']);}
        CKEDITOR.replace('#{element_id}', { #{ckeditor_applay_options(ckeditor_options)} });return '#{element_id}';}


I run CK_Reload in on_complete event.


2) re-create a ckeditor in popup window

you should run the re-create ckeditor code after popup window resized.


_ error.js.erb

var content = '';
var element_id = '';
for (instance in CKEDITOR.instances){
  element_id = instance;
  content = $('#'+instance).val(); //get old data
}
$.colorbox.resize();
CKEDITOR.instances[element_id].destroy();
CKEDITOR.replace(element_id, <%=load_ckeditor_options %>);
CKEDITOR.instances[element_id].setData(content);


3) If you use box resize method:

  • you can't edit ckeditor. You should re-create a new ckeditor or you use CKEDITOR.instances[element_id].setData(old_data) .
  • If you want to ckeditor use textarea value, you should re-create a new ckeditor before resize.
  • If you resize the box window,  a new cked itor can't get data from textarea.
  • Or you can use CKEDITOR.instances[eleme nt_id].setData(content) to set ckeditor value after resize.



4. In firefox

1) If you use box resize method:

  • you can use ckeditor
  • If you want to ckeditor use textarea value, you should re-create a new ckeditor before resize.
  • If you resize the box window,  a new ckeditor can't get data from textarea.
  • Or you can use CKEDITOR.instances[element_id].setData(content) to set ckeditor value after resize.



分享到:
评论

相关推荐

    ckeditor的demo代码

    window.onload = function() { CKEDITOR.replace('editor1', { // 这里可以配置CKEditor的各种选项 }); }; ``` 在上述代码中,`'editor1'`是对应于`&lt;textarea&gt;`的ID,`CKEDITOR.replace()`方法会替换这个`...

    ckeditor4and5.rar

    CKEditor分为两个主要版本:CKEditor 4 和 CKEditor 5,这两个版本各自具有不同的特点和适用场景。 CKEditor 4是较早的版本,以其稳定性和丰富的功能集而闻名。它提供了各种预设的工具栏选项,允许用户根据需求...

    ckeditor5全屏按钮

    CKEditor 5是一款先进的富文本编辑器,专为现代Web应用程序设计。它的全屏按钮功能是编辑器的一个重要特性,允许用户将编辑区域扩展到浏览器的整个窗口,从而提供无干扰的写作体验。这个功能在编写长篇文章、报告...

    ckeditor 行间距插件

    "ckeditor 行间距插件"就是专门为CKEditor设计的一个增强功能,旨在让用户能够更加灵活地调整文本的行间距,以满足不同设计需求。 CKEditor 的行间距插件通常包含以下几个核心知识点: 1. **安装与集成**:首先,...

    ckeditor4 行高插件

    《ckeditor4行高插件详解及应用》 在网页编辑器的发展中,CKEditor一直以其强大的功能和良好的用户体验而备受青睐。CKEditor4是其重要的一代产品,它提供了丰富的可扩展性,允许用户根据需求定制编辑器的功能。在...

    让ckeditor只读 让ckeditor只读

    把ckeditor 3.4的ckeditor.js复盖就行

    ckeditor配置上传视频

    最近项目开发需要用到CKEditor在线编辑器,但发现他本身没有自带,所以需要自己手动配置插件。但网上很多配置都有问题,自己摸索了好久终于搞定。需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹...

    ckeditor 自定义上传图片

    **ckeditor自定义上传图片** 在使用ckeditor作为富文本编辑器时,经常需要集成图片上传功能。ckeditor是一款强大的在线文本编辑器,它提供了丰富的文本格式化工具,使得在网页上编辑内容变得简单。然而,ckeditor...

    ckeditor-5 已增加调整行高

    在本文中,我们将深入探讨ckeditor-5这一强大的富文本编辑器的最新更新——“已增加调整行高”功能。ckeditor-5是互联网上广泛使用的文本编辑工具,它以其用户友好的界面和丰富的功能集而备受赞誉。这次更新为用户...

    CKEditor3.0稳定版

    CKEditor 是一款非常知名的开源富文本编辑器,广泛应用于网页制作、内容管理系统和论坛等需要进行文本编辑的场景。CKEditor 3.0 稳定版是该编辑器的一个重要版本,它提供了丰富的功能和良好的用户体验。在这个版本中...

    jsp中使用ckeditor

    2. `ckeditor-java-core-3.5.3.jar`:这是CKEditor Java库的核心文件,包含了CKEditor与Java交互的代码,我们需要将其添加到项目的类路径中,以便在JSP页面上使用CKEditor。 3. `ckeditor-java-core-3.5.3-sources....

    ckeditor4.0 最新版本

    CKEditor 4.0 是一款广泛使用的开源富文本编辑器,专为网页内容创作而设计。这个最新版本的发布带来了许多改进和增强的功能,旨在提供更高效、更易用的在线文本编辑体验。CKEditor 4.0 的核心特点包括高度自定义、...

    CKEditor示例源码20121228

    CKEditor是一款功能强大的富文本编辑器,广泛应用于Web开发中,提供给用户类似桌面应用程序的文本编辑体验。这款编辑器支持HTML元素的创建、格式化、图像上传以及各种媒体嵌入,极大地提升了网页内容的编辑效率。...

    ckeditor数学公式编辑器

    **ckeditor数学公式编辑器** 在IT领域,尤其是Web开发中,富文本编辑器(Rich Text Editor)是不可或缺的工具,它允许用户在网页上创建和编辑格式化的文本。CKEditor是一款广泛使用的开源富文本编辑器,它提供了...

    CKeditor控件.net版

    CKeditor是一款著名的开源富文本编辑器,广泛应用于Web开发中,提供丰富的文本格式化功能,如字体、字号、颜色、对齐方式等,同时支持图片上传、链接插入、表格编辑等高级特性。在.NET环境中,CKeditor可通过特定的...

    ckeditor5_v19完整版

    《ckeditor5_v19完整版》是一款强大的在线文本编辑器,专为网页内容创作而设计。这个版本提供了全面的功能,适合直接部署在您的网站根目录下,为用户提供一个高效的文本编辑环境。它集成了多种工具,使用户可以方便...

    ckeditor 最新的安装包

    CKEditor是一款广受欢迎的开源富文本编辑器,用于在网页上提供高级文本格式化功能。它的最新安装包包含了全面的功能集,确保用户可以享受到最佳的文本编辑体验。在这个压缩包中,你将找到CKEditor的核心文件,这些...

    ckeditor4音频视频上传自定义插件

    在IT行业中,富文本编辑器CKEditor 4是一款广泛应用的在线文本编辑工具,它提供了丰富的功能,如格式化、图片上传、链接管理等。本文将深入探讨如何为CKEditor 4自定义音频和视频上传插件,以满足特定的媒体处理需求...

    extjs 嵌入 ckeditor 例子

    而CKEditor则是一款知名的富文本编辑器,广泛用于网页内容的编辑和格式化。当我们需要在ExtJS应用中嵌入CKEditor时,这通常是为了提供用户友好的文本编辑功能。下面我们将详细讨论如何实现这个集成过程。 **1. 首先...

    ckeditor 最好用版本

    CKEditor是一款广泛应用于企业网站的富文本编辑器,被誉为“最好用版本”。相较于EWebEditor,CKEditor在功能、易用性和灵活性上有着显著的优势。本文将深入探讨CKEditor的特点、优势以及如何在企业网站中进行JS调用...

Global site tag (gtag.js) - Google Analytics