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

suydam’s picture

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.

gdev’s picture

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

feelyou’s picture

yes thank for this object

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

JurriaanRoelofs’s picture

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

funana’s picture

Thanks, saved a lot of time!

xamox’s picture

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

xamox’s picture

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

166533’s picture

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.

xamox’s picture

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

halfer’s picture

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 :)

mrsocks’s picture

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

cybermache’s picture

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.

visionmark’s picture

I will make a third confirmation that this worked!

Aendil’s picture

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

TomChiverton’s picture

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

Tom

amcc’s picture

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.

AdAstra’s picture

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.

---------------------------------------------------
AdAstra.ca - Wealth & Success Coach for Overachievers

trantt’s picture

thanks for the good info

rapidsynergy’s picture

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

ilenx’s picture

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.

ismyrnow’s picture

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.

ravaka’s picture

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

psampaz’s picture

worked for me too..

thanks

mariusilie’s picture

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

primalmedia’s picture

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

selwynpolit’s picture

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

Selwyn

colincalnan’s picture

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;
}
geniusy’s picture

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

DomeMinion’s picture

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

  1. 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.
  2. Find the the tinymce.module file and open it to edit.
  3. Find the fist instance of “$row[] = array(“ about three-quarters down from the top.
  4. Copy the two lines of code that start with “$row” and paste it somewhere for safekeeping.
  5. 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'));
  6. Save your change.
  7. 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.
permutations’s picture

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.

Jkello’s picture

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.

spcomputing’s picture

Thank you; this work just as you described.

gmgartner’s picture

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,

JG

--
Regards,

Jerry Gartner

Get 20 GB of free and secure cloud storage! https://copy.com?r=ix2LKE Support for Linux Mac Windows Android iPhone Windows Phone and Rasberry Pi

anschinsan’s picture

I added in my stylesheet:

textarea#edit-body {width:550px;}

It seem's to me, that the editor takes the width from the parent element.

I didn't have to change anything in the module ... it was tinymce module and drupal 5

andrewtheart’s picture

Issue seems to be that the toolbar refuses to resize if it has a ton of icons in it. Which means the entire editor will not resize past that point.

Fix -

(1) Make sure width of TinyMCE editor is set to 100% in TinyMCE.init()

width: "100%",

(2) Change toolbar location from "top" (or "bottom") to "external" in TinyMCE.init()

theme_advanced_toolbar_location : "external",