Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

change tinymce editor height


Hi,

I found that the editor height was locked by theme css:

/js/metronic/theme/default/demo1/dist/assets/css/style.bundle.css:
.tox-tinymce {
border-radius: 0.475rem !important;
height: 500px !important;
}

Can advise how to override it? I want editor have different height in different places, 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  :(

Replies (2)


You can override the height by using custom CSS or JavaScript. Instead of relying on the theme's fixed height, try setting it dynamically with !important in your own stylesheet or use inline styles in specific instances. Another approach is modifying it via JavaScript:


document.querySelector(".tox-tinymce").style.height = "600px";


This way, you can adjust it as needed in different places.

It reminds me of working with video editors—some, like VN Video Editor, give you flexibility right away, while others require a bit of tweaking to get things just right. Customization is key, whether in coding or editing!



Hi,

Thanks for your feedback. We will fix it in the next update. To fix it in your end please go to
src/sass/vendors/plugins/_tinymce.scss and remove the height css code as shown below:


.tox-tinymce{
@include border-radius($border-radius !important);
}


And recompile the assets css files using gulp or webpack.

Then to set a custom height to editors just state the height during the initialization:
src/js/custom/documentation/editors/tinymce/basic.js:


var options = {selector: "#kt_docs_tinymce_basic", height : "480"};

if (KTApp.isDarkMode()) {
options["skin"] = "oxide-dark";
options["content_css"] = "dark";
}

tinymce.init(options);


For more info about using Metronic please check the Theme Documentation
and Video Tutorials

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