How to set the width of textarea using tinymce? - tinymce

Question

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?

Answer 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?

Answer 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"

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