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。

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

$(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

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

未被捕获编辑器实例“ 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);

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

1 个答案: