change tinymce editor height

Question

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.

Sean · Answer

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:

copy    .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:

copy    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.

Thanasis · Answer

You want to edit the height in your video in the sharpest way, Wink will be the application that can answer all your questions in the most perfect way.

change tinymce editor height

Replies (2)

Metronic

ReUI

Products

Legal

Stay Connected