如何只在需要的页面加载CKEditor？

Question

我正在使用CKEditor宝石。 它仅用于管理页面。 我只想在需要它的页面上使用它。 我在application.js中注释掉了 Sprocket 指令

// only load on required pages // 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 问题。 我会添加一个$(document).on 'turbolinks:load'事件处理程序，但我不知道要使用什么 DOM id 或如何“初始化”或“销毁”CKEditor。

轨道 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'))

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

但它给出了一个控制台错误

未捕获的 ReferenceError：未定义 CKEDITOR

---

我试过这个

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

当从一个没有它的页面导航到一个有它的页面时它可以工作，但是当重新加载一个有它的页面时，它会给出控制台错误

未捕获编辑器实例“question_prompt”已附加到提供的元素。

没有办法知道它是否已经初始化。 例如： CKEDITOR.instances没有length属性。

Answer 1

也许是那样的

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);