General developer forum

 
 
Picture of Howard Miller
How to control the width of tinymce editor in 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
The table that generates the tinymce editor generates some inline css that sets the width. That clearly can't be overridden by the theme. I need to make it a little bit narrower. Is there any way to control the displayed width?
 
Average of ratings: -
It's only an avatar...
Re: How to control the width of tinymce editor in 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi Howard,

I think the problem is more likely caused by the theme, in that the page that is casuing the problem has not got enough width to allow the minimum width of the TinyMCE editor to expand to.

Making side-pre the default-region for 'Course' and 'In-course' in the $Theme layout in the theme's config.php, fixes lots of problems like the editor, as the ADD BLOCK (block) swaps from the right-side(side-post) to the left side(side-pre). The body tag for the page then reverts to side-pre-only thus freeing up needed space on the right, which the editor needs.

HTH

Mary

 
Average of ratings: -
Picture of Howard Miller
Re: How to control the width of tinymce editor in 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
That *is* the problem but I am stuck with it. It's my fixed-width theme again. I have a side-pre (width side-blocks in it) and this leaves me about 700px of content remaining for the editor. It's width is specified as (I don't have it in front of me) IIRC 764px. By the look of things it would shrink enough to get me out of trouble but it's not obvious how/if this can be done.

The only other thing I could do is to ditch side-pre completely on these pages which isn't ideal. I suppose that's basically what you are suggesting?

The fixed width is non-negotiable unfortunately.
 
Average of ratings: -
It's only an avatar...
Re: How to control the width of tinymce editor in 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

I am asuming this is Moodle 2 and not 1.9 as I knew how to fix that editor! LOL

I don't think you can alter the width of TinyMCE, easily that is, but it would be worth trying.

I'm guessing the width of your fixed width theme is 960px or there abouts? That is so restrictive, but you have no choice I appreciate that.

I'll see wat I can do.

Mary

 
Average of ratings: -
It's only an avatar...
Re: How to control the width of tinymce editor in 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi Howard you can try this css (see attached css file tiny.css)

I managed to shrink the fieldset of the mform in mod/forum/post (site news on front page).

I made Standard theme's page width 960px and made region-pre 250px, this made the area too small for the editor so using Firefox and Firebug I managed to find the selector id/classes to pin it down. The css become easy after that especially with .path-mod-forum which homes in on the element you want to style.

What I did do, and you might like to try this, is add the tiny.css to the end  of the css stack in config.php like this...

$THEME->sheets = array(
    'core',     /** Must come first**/
    'admin',
    'blocks',
    'calendar',
    'course',
    'user',
    'dock',
    'grade',
    'message',
    'modules',
    'question',
    'css3',      /** Sets up CSS 3 + browser specific styles **/
    'tiny'
);

HTH

Mary

 
Average of ratings: -
Picture of Howard Miller
Re: How to control the width of tinymce editor in 2.0
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Hi Mary,

That's great - thank you!

It wasn't quite what I needed (it was breaking in many places) but gave me more than enough of a clue how to sort it out.

I really appreciate you spending time on this big grin
 
Average of ratings: -
Picture of Andrew Clarke
Re: How to control the width of tinymce editor in 2.0
 

For me, the fix was possible with CSS only. By default the editor will resize itself to match the original textarea element. This textarea can easily be resized:

/*** mce editor resize the width to fit inside the theme ***/
.fitem .feditor textarea {
  width:578px;
}
 
Average of ratings:Useful (1)
Picture of Alex Walker
Re: How to control the width of tinymce editor in 2.0
Group Particularly helpful Moodlers

For anyone else who stumbles across this:

It is possible to change the width of TinyMCE by editing its settings file (I did it a while back, can't remember where to stick the width attribute), but using the CSS you've shown is probably the better idea.

Changing TinyMCE's width property involves a (very small) edit to Moodle's core, and will break when you upgrade, whereas this version only adds something to your theme, which is upgrade-safe.

 
Average of ratings: -
Picture of Lesz Ratajczak
Re: How to control the width of tinymce editor in 2.0
 

Hi Mary, 

I have customised Bootstrap theme to appear as responsive layout with fixed max width. It means that on the large (24" screens) page has fixed width but it changes layout when it's viewed it on mobile devices. It's all working fine until "turn editing on" is enabled. The main issue is mce editor - please have a look on attached image to see what I mean. for some reason I'm not able to control width of this element. I have tried your option with adding custom css to config.php but it didn't work. 

Here's the front end site link (responsive) http://yourdecision.oten.tafensw.edu.au/ 

And attached image shows how mceditor looks with "editing" is turned on. Would you be able to help me?  

Thank you!

Lesz


 
Average of ratings: -
Picture of Paul Douglas
Re: How to control the width of tinymce editor in 2.0
 

Came across this page when searching for a solution to the same problem.
Needed to find a way to set a width for the TinyMC editor.

for what it's worth, I was able to accomplish this by applying either of these CSS rules:

span.mceEditor iframe {
    width:575px !important;
}


table.mceLayout iframe {
    width:575px !important;
}

Additional note:
My theme does not allow any blocks to display on the right hand side.

 
Average of ratings: -