Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Init CKEditor on Ajax modal.


Hi keenthemes,

I followed the docto implement classic CKEditor,
I init all CKEditor necesseray files in my modal template:


<script type="text/javascript">
KTApp.createInstances();
KTMenu.createInstances();
</script>

<script src="assets/plugins/custom/ckeditor/ckeditor-classic.bundle.js"></script>

<script>
ClassicEditor
.create(document.querySelector('#kt_docs_ckeditor_classic'))
.then(editor => {
console.log(editor);
})
.catch(error => {
console.error(error);
});
</script>


on click to show the ajax modal, it will through an error :
>>>Uncaught ReferenceError: ClassicEditor is not defined
and there just a vanilla text area, not CKEditor on it


After the second click to show the same ajax modal, the textarea initialize and the CKEditir init on the textarea, wich is good, but it throw an error in console :
>>>Uncaught CKEditorError: ckeditor-duplicated-modules
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules

Is initializing CKEditor different from regular MPA page (no ajax) ??, if so thank you for supplying the fix.

NB : Tried also : Quill, TinyMCE, samething ...


Thank you guys.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


Hi,

Initializing CKEditor for Ajax would be similar as for classic pages as long as the CKEditor js/css files are loaded before the ajax call. Probably you can include it globally in advance. Otherwise during the ajax call need to handle the required CKEditor resources loading and only after that you will need to initialize the CKEditor instances.

Regards.



Thank you Sean,

after 1 day of hustling, I ended-up include it globally in advance.



Glad that it worked. Thanks for the update happy



Just to let you know,

I tried it in MPA way, a flat html page and it works great.

thank you


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(