How can I change TinyMCE's editing-window- WIDTH ??

By gdev on 27 Jul 2006 at 12:12 UTC

Hi all,

I've installed tinyMCE in order have richt editing possibilities. Whenever I login as an admin in order to content manage the site, the editor area is larger than my content area (Because of the width I've assigned to the content screen ofcourse)....

Is there any way for me to assign a different width to the editor area so that it will fall neatly within the content area ??

Gdev

Comments

TinyMCE themeing

suydam commented 27 July 2006 at 15:16

TinyMCE allows for that, yes.

How:
http://tinymce.moxiecode.com/tinymce/docs/option_width.html

Somewhere in the module I believe (didn't bother looknig) you'll find out where TinyMCE configuration is being stored and called. I set the width there (hard-coded to my particular Drupal theme) and it works great.

One caveat: I've noticed that if you enable too many buttons in TinyMCE, it won't rearrange them correctly and that prevents you from making the editor less wide. That is to say if there are 15 buttons on your menu bar, and they're 20 pixels each, you cannot size the editor lower than 15x20 pixels wide or it'll just disagree and make it whatever width works.

Well, I tried to put it in the tinymce.module file and ...

gdev commented 28 July 2006 at 09:33

it didn't work... instead the editor doesn't appear anymore... Can't seem to find out in wich file I need to put that line.... Tinymce forum also doesn't seem to be able to tell me untill now (!?)...

GDev

very intersing

feelyou commented 12 October 2007 at 00:20

yes thank for this object

---------------------------------------------------------------
www.snurfsphone.com

I solved the problem with

JurriaanRoelofs commented 13 August 2006 at 11:48

I solved the problem with buttons taking up too much space, just add these styles to your main stylesheet:

.mceToolbarTop * {
float:left;
}

.mceToolbarTop select {
width:auto!important;
}

.mceToolbarTop option {
float:none;
}

-------------------------------
http://www.sooperthemes.com/#-Drupal-Themes

That works!

funana commented 10 September 2006 at 21:18

Thanks, saved a lot of time!

That didn't work for me.

xamox commented 14 September 2006 at 14:27

That didn't work for me. :(
I have tried tons of stuff in the CSS. Is your editor settings set to use the default tinyMCE CSS or the drupal CSS? Also even without your code the width is fine for me in Internet Explorer but not in firefox, which I am really surprised because normally it works the other way around.

---------------------------------------------------------------
http://xamox.NET

Well after scouring the

xamox commented 14 September 2006 at 17:13

Well after scouring the forums for a while, messing with my CSS, trying to override template functions, setting the toolbar to the bottom I didn't have much luck. Then I decided to turn off resizing right in the tinyMCE's settings via drupal module configuration and IT WORKED! I removed all my CSS stuff and template function overrides and it is still working fine. So my guess is, that it's something messed up with that code.

---------------------------------------------------------------
http://xamox.NET

For me, the editing window

166533 commented 15 September 2006 at 14:48

For me, the editing window of TinyMCE would display the correct width, but there would be a horizontal scrollbar which rendered it completely unusable.

I tried all of the solutions, but to no avail. Then I switched back to Bluemarine and - lo and behold - it worked.

I've now figured out it was a problem with Firefox's min-width setting in the body tag of my style.css. Get rid of that and it works.

I looked for the min-width

xamox commented 12 October 2006 at 16:43

I looked for the min-width tags in my style.css and in the tinyMCE CSS files but could not find anything related to min. There wasn't even a width set in my body tag. So this fix doesn't solve my problem.

---------------------------------------------------------------
http://xamox.NET

Solution to iconbar width problem

halfer commented 10 November 2006 at 23:24

Do this: find which TinyMCE theme you are using. For the sake of example, let's assume it is 'advanced'. Find the associated theme in your modules folder, thus:

/tinymce/tinymce/jscripts/tiny_mce/themes/advanced/editor_template.js

Back this file up (in the same dir is fine). Then do a search for the nowrap="nowrap" attribute/value pair, and remove it. Save and refresh your page... and voila :)

this worked for me

mrsocks commented 22 May 2007 at 14:32

I am using newsportal theme and this is the only thing that worked for me.

Now i need to figure out why on the create content pages, the text fields align with the bottom of the right column (but this has nothing to do with the changes I just made)

Thanks

Best solution

cybermache commented 28 March 2008 at 16:25

Best solution out there! Thanks a bunch! Quick and easy and offers up total control through CSS. Though I wish there was a way to do this exact thing without hacking the module itself. That way you can avoid extra steps when updating.

This Works

visionmark commented 22 April 2008 at 20:09

I will make a third confirmation that this worked!

Try to check your img margin

Aendil commented 28 November 2008 at 17:16

I had the same problem with the toolbar as described and solved it by setting the img margin to 0 in my CSS file. All the icons in the toolbar are images. And if you set your CSS file like typed below, the style will apply to the toolbar buttons too and you have a problem :-)

img {
margin-right: 30px;
}

FriendsElectric Theme has this bug

TomChiverton commented 28 January 2007 at 02:45

Just a note to say that removing that line from the FriendsElectric 4.7.x theme's style.css worked a treat, cheers.

removing min-width setting worked for me too

amcc commented 6 May 2007 at 20:04

i'm using the Zen theme with modifications, but the style sheet contains a min-width setting in the body tag near the top of the style sheet. Removing this solved the problem straight away.

TinyMCE width in Firefox - remove min-width

ellanylea commented 19 October 2007 at 19:46

Thanks for the tip, the body's min-width property was preventing me from resizing the TinyMCE textarea. Once I changed it to a regular width, I could define the TinyMCE width with:

body#mceSpanFonts.mceContentBody{
width:540px;
}

---------------------------------------------------
AdAstra.ca - Optimize the Web. Optimize the World.

bookmark

trantt commented 12 October 2006 at 17:06

thanks for the good info

Awesome

rapidsynergy commented 10 July 2007 at 23:54

Peach, excellent! Thanks for the fix- I just blew a couple of hours chasing this down-- those blasted buttons!

yes, it's possible

ilenx commented 11 June 2007 at 03:17

i had the same problem - narrow content area in one theme. you can add a width setting to the tinymce.module in the root folder:

within the tinymce_config($profile) function (it's on line 517 in my rather vanilla installation of tinymce), i added the following line:
$init['width'] = '465';

depending on the plugins/buttons you're using, you may need to rearrange the order. you can do so by editing the plugin_reg.php file, also in the root.

Worked for me

ismyrnow commented 5 April 2008 at 16:42

This worked perfectly for me. Thanks!

It's a pain that you can't edit this in a stylesheet, since it seems that the width is hard coded into the html. I even tried defining my own stylesheet, but it wasn't working.

THAT's Work

ravaka commented 16 December 2008 at 14:53

I've tried all of these tips above, and finally, this work.
Thank You
Regards,

worked for me too.. thanks

psampaz commented 20 January 2009 at 10:56

worked for me too..

thanks

create a new container for your editor

mariusilie commented 25 July 2007 at 07:52

You can create a new container (div, table or something) with the desired with and the tinyMCE editor will get the width of this container

Success = nowrap="nowrap"

primalmedia commented 2 August 2007 at 16:35

Removing the "nowrap="nowrap"" in the "editor_template.js" worked fine for me. Thanks for the contribution!

Move the toolbar to the bottom

selwynpolit commented 30 September 2007 at 10:32

Weird. The way I made it work for firefox was to move the toolbar to the bottom.

Selwyn

Selwyn Polit
www.austinprogressivecalendar.com

Nowrap - easier solution in CSS

colincalnan commented 11 October 2007 at 18:02

You can also just add the following in your CSS, instead of removing the nowrap="nowrap" from the editor_template.js file.

Put this in your Drupal Theme CSS file and it should fix your issue.

.mceToolbarTop {
     white-space: normal;
}

The best and really

geniusy commented 20 December 2007 at 15:41

The best and really effective way for everyone should be the rearranging of the buttons.

Rearrange the Buttons

DomeMinion commented 15 April 2008 at 17:18

CHANGE TinyMCE BUTTON ARRANGEMENT

Validity
Drupal 6.x and TinyMCE 6.x-1.1-dev

Overview
This procedure outlines how to modify the presentation of TinyMCE buttons.

Issue
TinyMCE’s out-of-the-box button presentation is out of balance when most of the buttons are enabled. The lack of intuitive button groupings, especially in the bottom line, may make the wysiwyg interface awkward for users. Also, an excessively long third row of buttons can push the width of the text area well beyond the left bounds.

One Approach
The TinyMCE Drupal module has two lines of php code that specify and arrange the two top buttons rows. It can create three lines with the last row carrying whatever buttons are left over. (This solution does not address organizing the third row.)

Following this procedure will give you rows with similar word processing tasks grouped together. As a strategy, the non-assigned buttons are more likely to be disabled for non-administrative Drupal roles.

Step by Step

Using your FTP client or another method of editing Drupal files on your web server, navigate to your TinyMCE module (not the TinyMCE engine) directory.
Find the the tinymce.module file and open it to edit.
Find the fist instance of “$row[] = array(“ about three-quarters down from the top.
Copy the two lines of code that start with “$row” and paste it somewhere for safekeeping.

Highlight the two lines of “$row” code and paste in the following:

$row[] = array( array('fullscreen', 'preview', 'visualaid'), array('undo', 'redo'), array('selectall', 'cut', 'copy', 'paste', 'pastetext', 'pasteword'), array('bold', 'italic', 'underline', 'strikethrough', 'sup', 'sub'), array('fontselect', 'fontsizeselect'), array('forecolor', 'forecolorpicker', 'backcolor','backcolorpicker'));
$row[] = array( array('justifyleft', 'justifycenter', 'justifyright', 'justifyfull'), array('numlist', 'bullist', 'indent', 'outdent'), array('removeformat'), array('image', 'charmap', 'emotions', 'advhr', 'link', 'unlink'), array('tablecontrols'));

Save your change.
Verify the change by opening Drupal for new page content.

Your Own Customization
Here are tips to help you do your own customization:

Every nested array within the row array starts a new button group and the display of the group starts with a separator bar (except the first one in the row).
The names of the buttons that you can insert into this code can be found in the “Button and Plugins” section of TintMCE’s profile editor. Go to Administrator >> Site configuration >> TinyMCE. Choose a profile to edit and click “Buttons and Plugins.”
Some buttons, like “forecolor” and “forecolorpicker” must be included together.
Some items on the list do not associate with a button.

my buttons are still messed up

permutations commented 23 April 2008 at 06:38

This doesn't work for me, for some reason.

The code looks odd to me. Could you copy and paste the full section (with surrounding code)? I'm not sure I have it right.

Thanks.

Hey wanted to ask you: What

Jkello commented 21 May 2008 at 03:43

Hey wanted to ask you:

What then is the importance of plug_reg because the readme file suggests that we edit the advance_theme1,2,3 to change the order of the buttons.

Thanks.

This worked for me

spcomputing commented 12 June 2008 at 19:45

Thank you; this work just as you described.

A more recent experience...

gmgartner commented 13 August 2008 at 18:53

Drupal 6.3 core, Wysiwyg Editor 6.x-1.x-dev module. The module readme states no support for tinymce 3.1.x yet. 3.1.x "works" but the widht is 818px fixed and the drupal-break button doesn't appear. Using tinymce 2.1.x, as recommended by the Wysiwyg Editor 6.x-1.x-dev module readme and issues like width and buttons are miraculously gone! If I'm not mistaken, the readme in the tinymce 6.x module has the same condition.

--
Regards,