Metronic Mega Update!Tailwind 4, React 19, Next.js 15, KtUI, ReUI, eCommerce, User Management Apps and more
Explore Update

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


One of the standout features of PhotoRoom Pro is its AI-powered automatic background remover. This tool identifies the subject in any photo and flawlessly deletes the background, allowing users to add their own custom scenes or keep it transparent. https://photoroomaiapks.org/



It reminds me of working with video editors—some, like Inshot Pro 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! Downlaod Inshot Now For Free



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