0

Currently finding issue lazy loading CKEditor 4, appreciate any advice. What I tried:

  • Including ckeditor_basic.js but this already needs a CKEDITOR instance
  • Loading ckeditor.js on click but this complains 'Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.' as well as some others errors, fails badly.

Any advice appreciated!

InContext
  • 2,461
  • 12
  • 24
  • Could you explain in more detail how exactly your use case is? It is possible to insert script and initialize editor on it https://codepen.io/j_swiderski/pen/qPGRGb but I'm not sure if this is what you are looking for. – j.swiderski Oct 23 '17 at 15:10
  • thanks - exactly, trying to load on click, when I load the JS and try to use `CKEDITOR.appendTo` i receive a `CKEditor is not defined` error. In your example they are separate actions, does this make a difference? When a user loads a page I dont want the editor to load, only when they want to actually post which is low as a % of views.. appreciated – InContext Oct 23 '17 at 20:46
  • Most likely `appendTo` is being called before script got fully loaded. In order to work around it you could periodically check if `CKEDITOR` object is available or not. You can use `setInterval` https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval and delete the interval once CKEditor is loaded. You can also use one of two methods described here: https://stackoverflow.com/questions/3768768/loading-javascript-dynamically-and-how-to-check-if-the-script-exists https://gist.github.com/AllThingsSmitty/889acd01889c84ff162c – j.swiderski Oct 24 '17 at 08:21
  • 1
    Another possibility is using smaller editor and load the script every time. Please answer yourself how much plugins you really need and then create your editor accordingly to your needs using the online builder- https://ckeditor.com/cke4/builder. Please have a look at below samples using dev-tools and notice the difference in `ckeditor.js` size: http://nightly.ckeditor.com/17-10-24-06-04/full/samples/ In first case this is 600KB and in second 400KB. If you need just basic formatting then your ckeditor.js could get even smaller and should not be a problem when loading the page. – j.swiderski Oct 24 '17 at 08:21
  • thanks for the detail, I will work to compact the API further. I have some custom additions which I need to include and dont have these minified. – InContext Oct 24 '17 at 20:11
  • 1
    You can use builder for that: https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_build. Just get the editor source, fork it, make your changes and build your custom editor with minified code. – j.swiderski Oct 25 '17 at 08:00
  • even better! Thanks for all your help – InContext Oct 25 '17 at 14:14
  • would you be willing to accept an answer? Maybe I could create an answer from above comments so that it benefits others. It seems to me like an important topic in CKEditor. – j.swiderski Oct 25 '17 at 15:50
  • definitely. Go ahead. – InContext Oct 25 '17 at 19:47

1 Answers1

1

If you would like to insert CKEditor script dynamically you can use technique from this code pen - https://codepen.io/j_swiderski/pen/qPGRGb. It is important to wait for ckeditor.js to load before creating editor instance thus using setInterval to check if CKEDITOR object is available seems like a good idea.

In your comments you have written, you don't want editor to load every time you load the page. One of the reasons for that might be the size of ckeditor.js file. If you think editor.js is too big it is important to answer yourself how much plugins you really need and then create editor accordingly to your needs using the online builder. Please have a look at below samples using dev-tools and notice the difference in ckeditor.js size: Full package has 600KB while Basic Package has only 400KB. If you just need the basic formatting then your ckeditor.js could get even smaller and should not be a problem when loading the page.

If you have created some custom plugins then recommended practice is to get CKEditor source code from Githhub, fork it, make changes/add custom plugins, build your editor. That way you will get minified and obfuscated editor instance which includes your custom plugins and again should not be a problem when loading the page.

j.swiderski
  • 2,405
  • 2
  • 12
  • 20
  • I needed to load ckeditor instance for every new textarea I will insert in the list, and is it possible to not reload all instances and just append new ckeditor instance dynamically to a textarea ? – Beqa Bukhradze Feb 03 '19 at 17:59
  • "it possible to not reload all instances" what exactly do you mean by reloading? How does your use case look like exactly? Please describe it in more detail. – j.swiderski Feb 05 '19 at 15:31
  • I have an admin page which can create list of descriptions, I can dynamically add list item and I need to attach ckeditor instance to item textarea and need not to reload other instances of ckeditor textareas – Beqa Bukhradze Feb 15 '19 at 12:33
  • Here is an example showing how to insert editors dynamically without the need of reloading other instances - https://codepen.io/j_swiderski/pen/VggYOW. Please note that editor script is already attached to main page. – j.swiderski Feb 18 '19 at 17:34