How to set the width of textarea using tinymce?

问题:

I tried a several methods to set the width of the tinymce textarea.

My 1st attempt:

height: '200px',
width: '220px'   // inside tinyMCE.init({

In the 2nd attempt:

<textarea name="editorial" cols="40" rows="20" id="editorial" style="width: 40em; height: 20em"><?=$row['editorial']?></textarea>

But still, I am not able to get the width as per my requirement.

Any ideas please?

回答1:

I think the problem may be with the toolbars in your TinyMCE init function.

Try this example, and let me know if it works for you?

in your HTML:

<textarea name="editorial" class="test" cols="40" rows="20" id="editorial" > editorial</textarea>

then use this tinyMCE.init in your JavaScript:

    tinyMCE.init({
        // General options
        mode: "textareas",
        theme: "advanced",
        width: "300",
        height: "200",

        // Theme options
        theme_advanced_buttons1: "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull",
        theme_advanced_buttons2: "",
        theme_advanced_buttons3: "",
        theme_advanced_buttons4: "",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_resizing: false,

    // Selector
        editor_selector: "test",

});

Does this work for you?

回答2:

You can use this way..

 tinymce.init({
selector: "textarea",   
plugins: [
            "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
            "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
            "table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
    ],

    toolbar1: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
    toolbar2: "cut copy paste | bullist numlist | outdent indent blockquote | undo redo | anchor | forecolor backcolor",


    menubar: false,
    toolbar_items_size: 'small',

    height: "100",
    width:500,

});

If you want to set width then just add width:300

Note: Do not use the single or double qoutes like width:'300' or width:"300"

回答3:

The funny thing is width and heigth are getting set in the style property of the iframe.

What i do to set my width according to my init setting is to modify the style property of the iframe:

// ed is the editor instance
var frameid = frameid ? frameid : ed.id+'_ifr';

// get iframe
var current_iframe = document.getElementById(frameid);

if (current_iframe && !window.opera){

  styles = current_iframe.getAttribute('style').split(';'); //width and heigth
  for (var i=0; i<styles.length; i++) {
    // case width setting is found - remove it
    if ( styles[i].search('width:') == 1 ){
      styles.splice(i,1);
      break;
    }
  current_iframe.setAttribute('style', styles.join(';')); // write styles back to the iframe
  current_iframe.width = ed.getParam('width'); // set the width i already set in the configuration
}