javascript - 处理单个页面上的多个 Ckeditor 实例

标签 javascript html ckeditor

我已经根据我的ajax数据生成了多个ckeditor实例,并按需销毁实例,如下所示

 for (var i in CKEDITOR.instances) 
            try{
                CKEDITOR.instances[i].destroy();
            }catch(e){
                 CKEDITOR.instances[i] = null;
            }
 }

我已经使用给定值的循环生成了编辑器。查看 plunker

基本上,我需要在基于ajax数据加载页面后显示所有编辑器。因此,当我的数据很大时,创建多个实例,然后消耗浏览器内存。

按需启动编辑器不是我的要求。页面加载后如何显示编辑器并考虑浏览器内存?请指教

最佳答案

如果我是你,我会使用轻量级 inline editor instances 。按需创建它们以节省时间并提高性能 (plunker):

// http://docs.ckeditor.com/#!/api/CKEDITOR-cfg-disableAutoInline
CKEDITOR.disableAutoInline = true;

function generateEditor( i ) {
  return CKEDITOR.dom.element.createFromHtml( '<div contenteditable="true" id="editor' + i + '"></div>' );
}

$(function() {
  var holder = CKEDITOR.document.getById( 'holder' ),
      el;

  for ( var editor = 100; editor--; ) {
    el = generateEditor( editor );
    holder.append( el );

    el.once( 'click', function() {
      CKEDITOR.inline( this );
    } );
  }

  console.log( CKEDITOR.instances );
});

另外:

  • 确保使用尽可能小的插件子集来提高性能。 basic package是一个很好的起点,但也可以看看 builder .

关于javascript - 处理单个页面上的多个 Ckeditor 实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31398732/

相关文章:

javascript - 如何强制 Raphael JS 输出为 svg

javascript - 当前所选类中的目标类

javascript - 通过js添加和删除表单不起作用

javascript - 我如何使用 CKEditor focusManager 类?

javascript - 如何在 Angular 过滤器中使用变量

HTML/CSS : How to change image opacity when the text over it is Mouseovered?

javascript - 溢出属性在 Amazon Kindle Fire WebView 中不起作用

javascript - CKEditor 5 弹出控件在 Bootstrap 3 - 2018 中不起作用

rails_admin 找不到 ckeditor.js 文件

javascript - 如何检索 html 表单元素并在页面其他位置显示值