CKEditor Table enhance feature

He keenthemes,

We tried to have a custom build and stuff, but we gave up, it was a total mess.

Could Metronic have this CKEditor feature (Table and anhanced table) :

https://ibb.co/sFyyLXF

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

Replies (6)

Hi,

The current classic CKEditor package does not include the Table properties plugin.

You should use the Online CKEditor builder and build a custom package with Table and Table toolbar.

Then you can add the custom build in your gulp or webpack config.

Regards.

Hi Sean, thank you for the answer.

I did build a custom CKEditor with wanted functionalities. and I downloaded that Zip.

Do you mind to share how to add that in Webpack for Metronic 8 ?

Do I have now to delete the old CKEditor from webpack in order to install the new ?

Much details would be reaaaaaaly appreciated.

Thank you so much Sean.

Hi riterix,

This is the setup for webpack, similar to other CKEditor plugins. @ckeditor/ckeditor5-table should be already in the node_modules folder.

You can try to add this file with the content below:

tools/webpack/plugins/custom/ckeditor/ckeditor-table.js

window.TableEditor = require('@ckeditor/ckeditor5-table/build/table.js');

Then include the generated CKEditor file below on your page:
/assets/plugins/custom/ckeditor/ckeditor-table.bundle.js


Thanks

Hi Faizal thank you for the reply.


I did everything that you said : create file "ckeditor-table.js" put inside "window.TableEditor = require('@ckeditor/ckeditor5-table/build/table.js');"
+ and I compiled, it ok, after compile finished, I reference the "/assets/plugins/custom/ckeditor/ckeditor-table.bundle.js" in my base.html

but I got an error console :
Uncaught ReferenceError: CKEditor5 is not defined


Any Hints ?..

Thank you so muuuuuch.

Hi riterix,

Sorry for the delay. I will check and test it further. Will get back to you with the best possible solution.

Thanks

Hi riterix,

Could you please update the path to this? The CKEditor5 is not defined error should be gone.

window.TableEditor = require('@ckeditor/ckeditor5-table');

By any chance, do you have another type of CKEditor on the same page as the CKEditor table? Eg. ckeditor5-classic, ckeditor5-balloon

It seems this bundle file can import only one CKEditor type.
/assets/plugins/custom/ckeditor/ckeditor-table.bundle.js

Thanks

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