How to load CKEditor only on the page that needs it?

问题

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.

回答1:

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

来源：https://stackoverflow.com/questions/53839203/how-to-load-ckeditor-only-on-the-page-that-needs-it

标签

javascript

ruby-on-rails

ckeditor

turbolinks