TinyMCE defaults

TinyMCE defaults

by Doug Moody -
Number of replies: 9

I searched for a solution to this problem, and the best I can come up with was at https://moodle.org/mod/forum/discuss.php?d=176213

In there are several technical discussions about ways to change the TinyMCE editor, but the bottom line seems to be that people are just experimenting with it and not much progress has been made in the core code to allow users or admins to easily make the editor more customizable.

My particular need is to change the default size of the text and the font in all places where the editor appears.

Does ANYONE know an easy way to do this? Perhaps a few lines of code that can be inserted somewhere, with clear instructions where it has to go? I can do that, but I am not a PHP guru.

Any and all ideas are welcome. Thanks.

Average of ratings: -
In reply to Doug Moody

Re: TinyMCE defaults

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Do you mean the style of the text and other content that appears in TinyMCE editor? If so, you can control this in your theme.

In theme/yourtheme/config.php, add the line

$THEME->editor_sheets = array('editor');

Then, create a file theme/yourtheme/styles/editor.css. Any CSS you put in there will be applied to the content in Tiny MCE editors.

If I have misunderstood, and instead you want to be able to configure the TinyMCE toolbars, then that feature was added in Moodle 2.4.

 

Average of ratings: -
In reply to Tim Hunt

Re: TinyMCE defaults

by Doug Moody -

Tim,

I just installed 2.4, but haven't gone deeply enough into it to see what the config for MCE can do.

But what I am asking is if I can simply make the editor type in a certain font and font size by default, without any intervention by the user. Right now, the editor has type that is too small. To change it, of course, I can use the drop down box at the top. But I would rather make the font and font size larger (say, 6 point Arial by default)

I didn't completely understand your explanation of what I need to put in the CSS theme. Can you please elaborate? Maybe supply some example css code. I followed you up to that point, but haven't written much css

Thanks.

Average of ratings: -
In reply to Doug Moody

Re: TinyMCE defaults

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Well, to make the editor really WYSIWYG, the best thing to do is to copy a few key styles from the core.css file to editor.css, so content in the editor uses exactly the same styles as it will get when it is posted.

In the OU theme, I copied the style rules like

body, td, th {
    font:13px/1.231 arial,helvetica,clean,sans-serif;
}

pre {
    font-size:12px;
    line-height:16.8px;
}

p, pre {
    margin: 0 0 1em;
}

h1 {
    font-size: 138.5%;
}

h2 {
    font-size: 123.1%;
}

h3 {
    font-size: 108%;
}

h1, h2, h3 {
    margin: 1em 0;
}

h4, h5, h6 {
    font-size: 100%;
    margin: 0;
}

ul, ol {
    margin-left: 2em;
    padding: 0;
}

ul {
    list-style: disc outside none;
}

ol {
    list-style: decimal outside none;
}

li {
    display: list-item;
}

 

Average of ratings: -
In reply to Tim Hunt

Re: TinyMCE defaults

by Doug Moody -

Tim,

OK, well now I see! But now this triggers some questions in my brain.

First, seeing as I have to create editor.css in the themes folder, per your instructions, how is it that when I upgrade to newer versions of Moodle (just upgraded to 2.4) I continue to get the theme that I had specified in a previous version? Is that controlled by when I copy over my old config.php file?

And if so, then the workaround you suggest here is going to have to be re-applied every time I do an upgrade, right?

I will follow up on this when I apply your fix. I sincerely appreciate your help. You are one of the people who really gets this, an you are willing to help. Thank you

Average of ratings: -
In reply to Doug Moody

Re: TinyMCE defaults

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Well, for the standard Moodle Themes, this should be fixed in those themes.

If you have a custom theme, you should fix this in your theme, and as part of any upgrade you need to copy your theme into the new version of the code.

Average of ratings: -
In reply to Tim Hunt

Re: TinyMCE defaults

by Doug Moody -

Tim,

I applied this idea to my Tiny MCE, and it worked "sort of"

I now have a preset called "PREFORMATTED"

I was hoping I could make one that would replace the default "paragraph" style, and its default font and size would be what I want it to be (36 point Arial)

What am I missing?

Average of ratings: -
In reply to Tim Hunt

Re: TinyMCE defaults

by Justina Torres -

Tim, would this work on Moodle 2.3.1 if I wanted to add to the list of formats to select from in the editor?  For example, in addition to having Heading 1, 2, 3,..., I would like to also add ones for "Image Caption" and "Reference/Citation".  Is this possible with the method that you described here?

Thanks!

Average of ratings: -
In reply to Justina Torres

Re: TinyMCE defaults

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

I don't really know. If it is possible, the it would probably be documented on http://docs.moodle.org/24/en/Text_editor.

It looks like it is possible to control the available fonts, but not the available styles. I think that is because the available styles map directly on to various HTML tags like <h1>, <h2>, <p>, ...

Average of ratings: -
In reply to Tim Hunt

Re: TinyMCE defaults

by Michael Zehr -

I see this thread was a while ago, and I see the note about customization in 2.4 (which I'm not at, but I might go to), but I had a follow up question regarding changing the css.

In my case, I don't want to change the style of how it displays font size 3, or font size 4.  What I'd like is to control what size font one is typing in by default at the start.  That way I don't have to worry about keeping it in sync with how it will display after posting the text.

Is this possible?

Average of ratings: -