TinyMCE settings in themes.

TinyMCE settings in themes.

by Gareth J Barnard -
Number of replies: 26
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi,

In reading this https://moodle.org/mod/forum/discuss.php?d=223125 on the developers forum, I wondered if there was a way of controlling TinyMCE's configuration in a theme?

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: TinyMCE settings in themes.

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

From Moodle 2.4 onwards (or was it 2.3?) you can control it from the admin menu. Plugins -> Text editors -> TinyMCE, I think.

I am afraid you have to type the raw configuration code, but it works.

In reply to Gareth J Barnard

Re: TinyMCE settings in themes.

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Dear Gareth,

It all depends on what it is you want to do to TinyMCE. The editor.css stylesheet is supposed to use the styles you add to that stylesheet, but you only see them at play while you are typing, as soon as you save the page reverts the style back to whatever the default for the theme is.

If you are clever to realise that the styles in the editor should actually match those in the theme then you will get a WYSIWYG of a style, as whatever you type with show up in the style it will be displayed.

Does that answer you question? Or is your configuration more to do with the way TinyMCE works, or looks?

Cheers,

Mary

In reply to Mary Evans

Re: TinyMCE settings in themes.

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

The real point of editor.css is so that you can copy the key styles from core.css, like headings and lists, so that the WYSIWYG editor is really WYSIWYG. This is something that all themes should do.

In reply to Tim Hunt

Re: TinyMCE settings in themes.

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I realise that now but was not aware of how it really worked, until relatively recently.

In reply to Mary Evans

Re: TinyMCE settings in themes.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Mary and Tim,

Thank your for your input smile.

My intent here is to reduce the footprint of TinyMCE (put it on a diet) such that it takes up less space in a mobile / tablet theme and therefore becomes useable.  Whilst removing the features that would be redundant anyway.  Styling is perhaps the next step.

Cheers,

Gareth

In reply to Gareth J Barnard

Re: TinyMCE settings in themes.

by David Scotson -
Hi Gareth,

I'd be interested in helping out with this. There seems to be some good knowledge in that other thread about how to tweak TinyMCE either via site settings or via the theme, if you sift through it all.

For myself, I think both styling of the buttons, and selectively hiding/showing buttons via CSS is possible in a theme. My current line of enquiry is to hide almost every button until the full screen button is pressed then show them all So you'd only have one (short) line of icons above the editor in the default case.

Early experiments have been positive, but i've not had a lot of time to dedicate to this recently.
In reply to David Scotson

Re: TinyMCE settings in themes.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear David,

Thank you, that would be appreciated smile.  In attempting a partial solution in MDL-31342 (but then left out - please see the screen shots) I realised that there was more to this than met the eye.  Mauno Korpelainen provided some very helpful input.  There seem to be outstanding issues with TinyMCE like MDL-31606 and MDL-38329 etc.  I'm sure there are more.  I think the key to this is an umbrella tracker to make a general improvement to the control of TinyMCE within Moodle as actually suggested in the code by Petr Skoda (I think) where he states in the file '/lib/editor/tinymce/lib.php' - "//TODO: we need to implement user preferences that affect the editor setup too" - he further goes on to state in MDL-31342 "I believe we should not be hardcoding configuration like this, instead we could for example add 3 different toolbar options (normal, mobile, tablet) with reasonable defaults and let admins decide what is best for their users.".

So, what is the solution to all of this?  Well, I think that admins should have three congfiurations (as Petr suggests) in the administration for TinyMCE and then the theme uses the appropriate one according to what type it is.  In this way a theme can provide a better user experience given the screen area it has to work with.  But that the 'mobile' version defaults should be the simple interface as I screen shotted on MDL-31342.

Cheers,

Gareth

In reply to Gareth J Barnard

Re: TinyMCE settings in themes.

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

@David - I believe there is already a 'fullscreen' set up and 'normal' setup available in TinyMCE - so can't this be done by very simply setting the buttons required in each configuration? Or is the aim to be able to achieve this purely from the theme without touching the TinyMCE code at all? Although you are right - it can all be done through CSS as each button has its own class e.g. <span class="mceIcon mce_bold"></span> and <span class="mceIcon mce_moodlemedia">

@Gareth - I already use a system (in Mdl2.3) where I have 2 different toolbar options (I started with 3 but no-one wanted to use the simplest set!! So I removed it because there wasn't any point having a minimal toolset if no-one wanted it - which also begs the question of whether proper user research has been done in some of the comments raised in the tracker!) In my case the two options are selected using an if statement in the TinyMCE lib.php which is based on a custom setting in the User profile - I'm sure this could just as easily be from the theme or from anywhere else. I guess, taken to the extreme, that you could set up a system similar to the one I have where every individual user has control over what tools are available to them through settings in their user profile page. Whether this would be done by a text area box which holds the text for the configuration which can then be edited (potentially dangerous and needing quite considerable error trapping I would think!) or an entire series of radio buttons for each TinyMCE control, I'm not sure.

Anyway, just a few thoughts - I guess in part it depends whether you want Theme based (site wide) control, or user based individual preferences

Richard

In reply to Richard Oelmann

Re: TinyMCE settings in themes.

by David Scotson -
Hi Richard,

a key feature i'm looking for is the ability to switch between a full-featured editor and a simple editor right when you're doing the text. This was partly available in 1.9's old FCK editor (it went from complex to very complex), but doesn't seem to be available in TinyMCE as far as I can tell. There's an advanced and simple layout, but there doesn't seem to be a way to switch between theme easily.

It means you can avoid making hard decisions about what's in and what's out for most people. You just put the common, simple stuff on top of the little entry box, and then give them everything if they pop it out to full screen. I think this is the best of both worlds.


In reply to David Scotson

Re: TinyMCE settings in themes.

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Is this comment of Mauno's in another thread useful? Its what I had in mind when I saif there was already this sort of feature available (it may not be used in Moodle at present, but its there in TinyMCE)

https://moodle.org/mod/forum/discuss.php?d=223125#p970617

Richard

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: TinyMCE settings in themes.

by David Scotson -
Excellent, I'll give that a try. (edit: love that the Wordpress settings is called "hide_kitchen_sink")
In reply to David Scotson

Re: TinyMCE settings in themes.

by David Scotson -
Not tried it yet, but I have already found one caveat:

fullscreen_settings: This option gives you the ability to have different settings applied when the editor is in fullscreen mode for example more tools. This option will only work together with fullscreen_new_window.

fullscreen_new_window: This option enables you to switch on the old style new window mode this is disabled by default.

So to use it you need to turn on an old way of creating the new window. Why did they stop using the old way? It doesn't say.
In reply to David Scotson

Re: TinyMCE settings in themes.

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Sorry David, I don't know the answer to that one - hopefully someone will be able to help us out with it though.

My solution to date has always been the user profile and optional params in the tinymce lib.php so I hadn't looked into the fullscreen options as yet.

Richard

In reply to David Scotson

Re: TinyMCE settings in themes.

by Mauno Korpelainen -

This option will only work together with fullscreen_new_window.

This is some relic in documentation of tinymce - default value is false (no new window) and you can set fullscreen mode to open new window with false but both work fine in current versions of tinymce. Why did they stop using the old way? To get around popup blockers (in IE)... like in plugins (dialogs) are using floating DIV layers instead of popup windows if default is not changed to modal with dialog_type :"modal".

 

In reply to David Scotson

Re: TinyMCE settings in themes.

by Mauno Korpelainen -

It is also possible to use these plugins at the same time or create custom plugins to do different tasks.

In http://korpelainen.net/tinymce/demo2.htm 1st toolbar has a PDW button (left) and fullscreen button (right) and PDW is set to toggle 1st and second row of normal init code - fullscreen button has a "full set of buttons with different init code"

In reply to Mauno Korpelainen

Re: TinyMCE settings in themes.

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi David,

Following up from Mauno's post, the PDW Toggle Toolbars plugin is available (with demos) at http://sourceforge.net/tracker/?func=detail&aid=2904683&group_id=103281&atid=738747 and this functionality looks as if it pretty much does what you were looking for - I know I'm going to look carefully at it for my upgrade to 2.5 in the summer instead of the core tinyMCE init changes I had previously smile

And with the info Mauno has given previously about being able to set up tinymce init in the html/php of the page (therefore in the layout files of the theme), it seems like Gareth's query about controlling TinyMCE through the theme is answered too.

I would imagine also that if the tinyMCE init can be controlled via the layout file, we could also use theme settings pages to control options for that init section.

Many thanks Mauno, I think the rest of us had (small) parts of the answers but you have provided the glue to stick it all together! :D

Richard

In reply to Richard Oelmann

Re: TinyMCE settings in themes.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi all,

First of all, thank you for your input on this.

It is with regret that I am no longer persuing this as a means of making MyMobile better as I found out this morning that it is being droppped in core in favour of the Bootstap theme (I suspect without jQuery).  I was working hard with Mary Evans to make improvements across the board to the theme such that it was useable and had made significant progress.  We had identified quite a few changes and lined up many fixes.

You may have already noticed moves to the same effect if you attempt to view this forum from a mobile / iPod Touch.

Kind regards,

Gareth

In reply to Gareth J Barnard

Re: TinyMCE settings in themes.

by John St -

That's a bummer, I did not know this. Thanks for all your work on this (and Mary's). You're always patient and helpful.

If you guys can send me what you have, I will integrate it with my latest updates. I plan to support and upgrade this as I know a ton of people that use it. 

In reply to John St

Re: TinyMCE settings in themes.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear John,

No worries.  And can I say publically here a thank you to you for your support with MyMobile as I know I have asked and received on many occasions.

What I have is on Moodle Tracker already pending integration, bar the YUI Module thing that Andrew Nicols helped me with, please see the rampent discussions on jQuery in the tracker for this.  I was going to have this in core to ring fence jQuery but it was asking on the developer chat that sparked the revelation.

I now have a fully integrated Collapsed Topics add-on for MyMobile that took me three days to write and a few more to perfect.  Hence 'gutted' as people had been asking me for ages for it.  Plus a font and theme colour changer using bxslider with a new bespoke admin setting class - another two weeks.  But it uses jQuery, so will never get into core.

I've learnt a lot about the theme, jQuery and JQueryMobile in the process which I hope will be useful in other projects.

Cheers,

Gareth

In reply to Gareth J Barnard

Re: TinyMCE settings in themes.

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi Gareth,

Can you point us at any discussion about this, as my understanding is that the bootstrap theme hasn't made it to peer review yet (although its on the way) and when it is, then intention is for it to be a 'canvas' like theme for others to build on. Is there another mobile specific bootstrap theme in development or is this based around the one in the Tracker MDL-38016 ?

I would have hoped that no decision has been made to drop MyMobile until such time as there is a completely ready replacement for it. But maybe I have missed something somewhere?

Richard

In reply to Richard Oelmann

Re: TinyMCE settings in themes.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Richard,

As far as I'm aware from the developer chat, bootstrap will replace MyMobile - in what form I don't know.  But it was said that it would replace it when it's ready which makes me wonder why the forums have already had jQuery / jQueryMobile taken out - hence the poor rendering.  I had almost got a temporary good TinyMCE editor working for the posting in forum issue - this discussion.  I was also working on a number of improvements with Mary Evans and had a YUI wrapper lined up (thanks to Andrew Nicols) to ring fence jQuery within core.

To be honest, looking to the future, what exactly will survive who knows.  jQueryMobile my die, but then it is community supported.  Yahoo may go into receivership - but looking at their stock levels, probably not.  However with all the developments in mobiles, HTML5, embedded Java and the increase in true distrubuted technologies different things will be better and push developments in new directions.

My view is always to take the best of what is on offer, integrate it and provide the best user experience.  As Frank Herbert once wrote 'fear is the mind killer'.

Cheers,

Gareth

In reply to Richard Oelmann

Re: TinyMCE settings in themes.

by David Scotson -
The theme currently set for mobiles on moodle.org doesn't seem to be related to the work being done in MDL-38016.

It looks like it's based mostly on the MyMobile theme, going by the HTML and CSS, but there was some discussion that someone had been tasked with creating a Bootstrap-based theme for Moodle.org as they commented on a bug I submitted, but I can't remember who it was though.
In reply to David Scotson

Re: TinyMCE settings in themes.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear David,

The theme for mobiles on moodle.org is currenty MyMobile but with the jQuery taken out such that it does not render.  I was informed that the Bootstrap theme will replace MyMobile in core when it is finished.  I was also informed not to spend any more time on MyMobile bar what was to be integrated and not to work on a YUI Mobile version.

Cheers,

Gareth

In reply to Mauno Korpelainen

Re: TinyMCE settings in themes.

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi Mauno,

I've been trying to adjust the pdw plugin you have used as a Moodle plugin for TinyMce, but seem to have run into a problem with it at the first step.

I've posted in the editors forum https://moodle.org/mod/forum/discuss.php?d=224425 but would you be able to have a quick look and point me in the right direction?

Much appreciation for your time and support!

Richard

In reply to Gareth J Barnard

Re: TinyMCE settings in themes.

by David Scotson -
Yes, the best way to fix all these things is to get them into core. On the other hand, that takes a whole lot of effort and time, so if you can prototype solutions from within themes, or just by suggesting some admin settings that other people can try and give feedback on, that's a good place to start.

A META tracker bug would be good, it's very hard to know what other people are looking at and working on, or how to prioritise and focus your work without one (or more, if the work breaks down that way)