how to change width property of tinyMCE?

Question

_{Saturday, January 15, 2011 3:57 AM}

Hi dears,

i want to change width of tinyMCE editor but it doesn't changed
and it does back to orginal width ,i do either two follow step :

1.

tinyMCE.init({
mode: "textareas",
theme: "advanced",
width: "200",
height:"200",
........

or 2.

<asp:TextBox ID="RichTextBox" runat="server" TextMode = "MultiLine" Width="300px" Height="200px" ></asp:TextBox>

what's your suggestion for changing width property?

thanks

All replies (5)

_{Saturday, January 15, 2011 4:29 AM}

Hi ,

just add these styles to your main stylesheet:

try with below css

.mceToolbarTop * {
    float:left;
}

.mceToolbarTop select {
    width:auto!important;
}

.mceToolbarTop option {
    float:none;
}

Regards

shabir

_{Saturday, January 15, 2011 5:29 AM}

hi shabir,

width did not change !!!

http://www.2shared.com/photo/oczzPjfA/tinymce.html

do you have another solution ?

thanks

_{Saturday, January 15, 2011 5:47 AM}

Hi,

Just search for

Code:

style:{width:'100%',height:h}})

And replace width with whatever width you need.

If it doesn't work, clear your cache and then login again

OR
To change the width of the TinyMCE, do the following:

1. Go to assets/plugins/TinyMCE*version*/jscripts/tiny_mce/tiny_mce.js

2. Locate one of the following lines of code (I belive this is dependent upon version) and change as noted:

    style:{width:'100%',height:h}}) <-- CHANGE width:'100%' to desired width -->

    OR

    {this.settings.width=replace_element.style.width;this.settings.area_width="100%";this.settings.width_style="100%"} <-- CHANGE area_width="100%" to desired width -->

OR

f you have Tiny MCE version 3.2.4.1 which ships with evolution 1.02,

you need to look for this code in the tiny_mce.js file

Code:

// Resize editor
           DOM.setStyles(o.sizeContainer || o.editorContainer, {
              width : w,
             height : h
         });

To set the width you would change w to the desired width

Regards

_{Saturday, January 15, 2011 11:39 AM}

thanks shabir for reply

i tryed to do your solutions for example i've changed style:{width:'100%',height:h}}) to style:{width:'40%',height:h}})   but width property did not changed. but tinyMCE was shaped like the image below

 http://www.2shared.com/photo/S1GVuV60/tinymce30.html

Also  in another your suggestion for set the width in below , I have not any change in width :

f you have Tiny MCE version 3.2.4.1 which ships with evolution 1.02,

you need to look for this code in the tiny_mce.js file

Code:

// Resize editor
           DOM.setStyles(o.sizeContainer || o.editorContainer, {
              width : w, //'300px' or '40%'
              height : h
         });

Apparently  width property has  a default value  similar whatever you say but in where, I don’t know,

I am using tinyMCE (majorVersion:'3',minorVersion:'0.7',releaseDate:'2008-04-14')

Whether there is any other solution?

Thank alot

<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p> </o:p>

<o:p></o:p> 

_{Saturday, January 15, 2011 12:44 PM}

Not sure if this will help but when I use WYSIWYG editors (like tinyMCE) I usually control the width with a div.

1. Remove the width from the tinyMCE.init
2. Set the width of the textbox to 100%
3. Place a DIV around the asp:textbox and set the width of the DIV (style="width:300px;") to whatever you want for a width.

Hope this helps.