Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

CKEditor - Classic - Disabled / Read-only style


Hi,

I am applying Read-only feature into my CKEditor-Classic to disable the editor because CKEditor does not support a built-in disabled feature.

https://ckeditor.com/docs/ckeditor5/41.1.0/features/read-only.html

In fact, I expect it has the same style with the other disabled controls in Metronic.
Could you support it or recommend me a workaround for this case?

Regards.


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 (3)


Hi,

You should use CKEditor Online Editor to build your CKEditor version with required features and options and include in Metronic to use it as you wish.

Regards



Hi Sean,
I did and almost everything works as expected except for the style. As you can see on the demo from the link I mentioned above, read-only/disabled editor has the same style with the normal editor which can cause users confused compared to the other disabled fields such as textbox, textarea, select2, ...

Well, I just ask if you have any recommendation for a solution because I think Metronic should have supported a style for it. However, don't worry, I found one for myself

KTUtil.css(editor.ui.view.editable.element, 'background-color', KTUtil.getCssVariableValue('--bs-gray-200'));

It looks more like a workaround than a solution but so far so good.

Thanks for your reply.



Hi,

Yes, your workaround looks good. You can change the style easily using JS and CSS variables. Great solution!

All the best with your project!

Regards.


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