locked
how to change width property of tinyMCE? RRS feed

  • Question

  • User1184281746 posted

    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

     

    Saturday, January 15, 2011 3:57 AM

All replies

  • User2019981500 posted

    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 4:29 AM
  • User1184281746 posted

    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:29 AM
  • User2019981500 posted

    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 5:47 AM
  • User1184281746 posted

    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 11:39 AM
  • User1052258516 posted

    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.

    Saturday, January 15, 2011 12:44 PM