如何仅在需要的页面上加载CKEditor? [英] How to load CKEditor only on the page that needs it?

问题描述

我正在使用 CKEditor gem.它仅在管理页面上使用.我只想在需要它的页面上使用它.我在 application.js

中注释掉了Sprocket指令

 ///仅在必需的页面上加载//require ckeditor/init 

然后将其添加到顶部的表单页面

 <％= javascript_include_tag'ckeditor/init'％> 

但是，它仅在某些时候有效.如果我重新加载没有 的页面，并导航到具有 的页面，则它将加载脚本，但无法修饰文本框.没有控制台错误.

如果我用 重新加载页面，则它会成功并装饰文本框.

如果我重新加载没有 的页面，请导航到具有 的页面，导航至没有 的页面，然后导航回带有 的页面，然后它会成功并装饰文本框，但会向控制台发出警告

[CKEDITOR]错误代码:editor-destroy-iframe.
[CKEDITOR]有关此错误的更多信息，请访问 http://docs.ckeditor.com/#!/guide/dev_errors-section-editor-destroy-iframe

该链接显示

说明:无法正确销毁该编辑器，因为在销毁该编辑器之前已将其卸载.与DOM分离之前，请确保销毁该编辑器.

我很确定这是一个Turbolinks问题.我会在'turbolinks:load'事件处理程序上添加一个 $(document).，但是我不知道要使用哪个DOM ID或如何初始化"或销毁" CKEditor.

Rails 5.2.2

---

我尝试过此操作，修复了类和事件名称 https://github.com/galetahub/ckeditor#turbolink-integration

  ready =->$('.ckeditor_class').each->CKEDITOR.replace $(this).attr('id')console.log("ck'd" + $(this).attr('id'))$(文档).ready(就绪)$ {document).on('turbolinks:load'，准备好了) 

但是它给出了控制台错误

未捕获的ReferenceError:未定义CKEDITOR

---

我尝试过

  $(document).on'turbolinks:load'，->setTimeout->如果CKEDITOR?$('.ckeditor_class').each->CKEDITOR.replace $(this).attr('id')，1000 

当从没有没有的页面导航到具有 的页面时，但是重新加载拥有的页面拥有它，它会显示控制台错误

未被捕获编辑器实例"question_prompt"已经附加到所提供的元素上.

无法知道它是否已初始化.例如: CKEDITOR.instances 没有 length 属性.

解决方案

也许是这样的

  check_ckeditor_loaded = function($ el){if(typeof CKEDITOR！=="undefined"&& CKEDITOR！== null){如果($ .isEmptyObject(CKEDITOR.instances)){CKEDITOR.replace($ el.attr('id'));}#创造其他魔力} 别的 {setTimeout((function(){返回check_ckeditor_loaded($ el);})，100);}};$(document).on'turbolinks:load'，->$('.ckeditor_class').each->$ el = $(this)check_ckeditor_loaded($ el); 

I'm using CKEditor gem. It is only used on admin pages. I want to only use it on the pages that require it. I commented out the Sprocket directive in application.js

// only load on required pages // require ckeditor/init

And I add it to the form page at the top

<%= javascript_include_tag 'ckeditor/init' %>

However it only works sometimes. If I reload a page without it, and navigate to a page with it, then it loads the script, but fails to decorate the text box. There are no console errors.

If I reload a page with it, then it succeeds and decorates the text box.

If I reload a page without it, navigate to a page with it, navigate to a page without it, then navigate back to a page with it, then it succeeds and decorates the text box, but gives the console warning

[CKEDITOR] Error code: editor-destroy-iframe.
[CKEDITOR] For more information about this error go to http://docs.ckeditor.com/#!/guide/dev_errors-section-editor-destroy-iframe

That link says

Description: The editor’s could not be destroyed correctly because it had been unloaded before the editor was destroyed. Make sure to destroy the editor before detaching it from the DOM.

I'm pretty sure this is a Turbolinks problem. I would add a $(document).on 'turbolinks:load' event handler, but I don't know what DOM id to use or how to 'initialize' or 'destroy' CKEditor.

Rails 5.2.2

---

I tried this, fixing the class and event name https://github.com/galetahub/ckeditor#turbolink-integration

ready = ->
  $('.ckeditor_class').each ->
    CKEDITOR.replace $(this).attr('id')
    console.log("ck'd "+$(this).attr('id'))

$(document).ready(ready)
$(document).on('turbolinks:load', ready)

But it gave a console error

Uncaught ReferenceError: CKEDITOR is not defined

---

I tried this

$(document).on 'turbolinks:load', ->
  setTimeout ->
    if CKEDITOR?
      $('.ckeditor_class').each ->
        CKEDITOR.replace $(this).attr('id')
  , 1000

And it works when navigating from a page that doesn't have it to a page that does have it, but when reloading a page that does have it, it gives the console error

Uncaught The editor instance "question_prompt" is already attached to the provided element.

There is no way to know if it has been initialized or not. Ex: CKEDITOR.instances doesn't have a length property.

解决方案

Maybe something like that

check_ckeditor_loaded = function($el) {
  if (typeof CKEDITOR !== "undefined" && CKEDITOR !== null) {
    if ($.isEmptyObject(CKEDITOR.instances)) {
      CKEDITOR.replace($el.attr('id'));
    }
    # make other magic 
  } else {
    setTimeout((function() {
      return check_ckeditor_loaded($el);
    }), 100);
  }
};


$(document).on 'turbolinks:load', ->
  $('.ckeditor_class').each ->
    $el = $(this)
    check_ckeditor_loaded($el);

这篇关于如何仅在需要的页面上加载CKEditor?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！