TinyMCE editor fixed size with no scrollers?

Question

At the moment I have this:

    tinyMCE.init({
// General options
mode : \"exact\",
elements : \"fkField, lkField, ukcField, khField\",
theme : \"advanced\",
         


        

Answer 1

You will need to write an own plugin. Check the editor height on each Keystroke (you may use the built in tinymce event onKeyUp). If the heigth changes remove the last inserted code.

EDIT: Howto get the current editor iframe heigth

    var currentfr=document.getElementById(editor.id + '_ifr');
    if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
        currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
    }
    else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
            currentfr.height = currentfr.Document.body.scrollHeight;
    }

Answer 2

add in a ccs file the following code

.mceContentBody{
         overflow-y:hidden!important;
      }

and add the path of css file in content_css attribut of tinymce

content_css : /path/to/css/file.ss

Answer 3

for me it worked by just adding rules to a regular stylesheet, it wasn't needed to add a css file to content_css attribute (example is in scss)

.my-tinymce-container {
  width: 200px;
  .mce-edit-area {
    height: 200px;
    overflow-y: hidden;
  }
}

Answer 4

A lot simpler and easy solution would be:

tinymce.init({
    selector: '#container',
    },
    init_instance_callback: function (ed) {
        tinymce.activeEditor.getBody().style.overflow = 'hidden'
    },
});

Explanation: In Init callback get the body for TinyMCE and change style as required.

In this case to remove scrollbar overflow = 'hidden'.

Answer 5

I got it to work by adding this to my extra tinyMCE CSS file:

IFRAME {overflow:hidden;}   

Previously, the scrollbars were only off in Firefox. This fixes it for Chrome as well. However, it does add a gray bar the side of a scrollbar at the bottom, so I need to enlarge the height of my text editor.