CODEWITHSUNDEEP
jquerytinymcewidth
LoolKovsky
LoolKovsky

Reputation: 1058

How to change the size of the tinymce jquery box?

I need to change the width of the tinymce's box to fit in my design and I don't know how. I searched the Internet and didn't find anything related to the width of the jquery version of tinymce.

<!-- Load jQuery build -->
<script type="text/javascript" src="{BASE_URL}/js/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
        $(function() {

                $('textarea.tinymce').tinymce({
                        // Location of TinyMCE script
                        script_url : '{BASE_URL}/js/tiny_mce/tiny_mce.js',

                        // General options
                        theme : "advanced",             
                        plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

                        // Theme options
                        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
                        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
                        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
                        theme_advanced_toolbar_location : "top",
                        theme_advanced_toolbar_align : "left",
                        theme_advanced_statusbar_location : "bottom",
                        theme_advanced_resizing : true,

                        // Example content CSS (should be your site CSS)
                        content_css : "css/content.css",

                        // Drop lists for link/image/media/template dialogs
                        template_external_list_url : "lists/template_list.js",
                        external_link_list_url : "lists/link_list.js",
                        external_image_list_url : "lists/image_list.js",
                        media_external_list_url : "lists/media_list.js",

                        // Replace values for the template plugin
                        template_replace_values : {
                                username : "Some User",
                                staffid : "991234"
                        }
                });
        });


</script>

<td>Description: </td><td><textarea style="height:150px;" name="description" class=" tinymce"></textarea></td> //textarea

Upvotes: 2

Views: 6102

Answers (3)

gregjer
gregjer

Reputation: 2843

Have you tried to configure width of your tinymce editor? See http://www.tinymce.com/wiki.php/Configuration:width

tinyMCE.init({
        ...
        width : "840"
});

for jQuery:

$(function() {

     $('textarea.tinymce').tinymce({
         //...
         width: "840"
     });
});

Check also this fiddle http://fiddle.tinymce.com/eaaaab

Enabling too many buttons in one line prevents you from making the editor more narrow.

Upvotes: 3

Samuel Liew
Samuel Liew

Reputation: 79123

I am using the jQuery plugin version in my projects. This is what you need:

$(selector).tinymce({
    theme: 'advanced', // basic or advanced
    theme_advanced_resizing : false,
    theme_advanced_resize_horizontal: false,
    theme_advanced_resizing_max_width: '500',
    theme_advanced_resizing_min_height: '300',
    width: '500',
    height: '300'
});

If you want to force the width using CSS, try this:

.mceEditor > table {
    width: 200px !important;
}

See (TinyMCE width and height disobedient!)

Upvotes: 1

AliRıza Adıyahşi
AliRıza Adıyahşi

Reputation: 15876

tinyMCE.init({
    ...
    width : "640"
    // width: '100%',
});

Check HERE

Upvotes: 1

Related Questions