开发者

TinyMCE editor fixed size with no scrollers?

开发者 https://www.devze.com 2023-04-09 06:29 出处:网络
At the moment I have this: tinyMCE.init({ // General options mode : \"exact\", elements : \"fkField, lkField, ukcField, khField\",

At the moment I have this:

    tinyMCE.init({
// General options
mode : "exact",
elements : "fkField, lkField, ukcField, khField",
theme : "advanced",
plugins : "table",
width : "300",
height: "185",
// Theme options
theme_advanced_buttons1 : "fontsizeselect, bold,italic,underline,bullist, cleanup, |,justifyleft,justifycenter,justifyright",
theme_advanced_buttons2 : "tablecontrols", 
theme_advanced_buttons3 : "", 
theme_advanced_buttons4 : "", 

theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "center",
theme_advanced_resizing : false
    });

This gives me a editor with the size of 300x185.

Now in this editor, I would like to do so you can only write until the editor is full. (without the scroller)

So you are unable to enter more text, and the scroller should not appear (disable scrolling)

Right now you can at the bottom of inside the editor just make new line and it will add the scroller <- which i do not want to happen开发者_运维问答

How can i do this? Is this unpossible? I have made research for some time now, but maybe it's just me searching wrong..

Thanks


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


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;
    }


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.


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;
  }
}


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

0

精彩评论

暂无评论...
验证码 换一张
取 消