15

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
  • Can you give examples of what you already tried
    – Dai Bok
    Nov 10, 2010 at 10:44

3 Answers 3

23

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?

13

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"

2
  • 1
    You need not include your name as signature in your posts. Its already there. Jul 4, 2013 at 14:11
  • 1
    Thanks for the note you've added, it gives me the solution
    – Anil kumar
    Jul 28, 2015 at 8:12
2

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
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.