Light
Dark
System
Ask  Question

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
user
riterix 7 months ago
Metronic
6 Answers
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)

S
Sean Author7 months ago
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.
user
riterix 7 months ago
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.
F
Faizal Author7 months ago
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
user
riterix 7 months ago
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.
F
Faizal Author7 months ago
Hi riterix,

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

Thanks
F
Faizal Author6 months ago
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  :(

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle