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.
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 tosrc/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.
