TinyMCE 6 - prototype available

TinyMCE 6 - prototype available

by Andrew Lyons -
Number of replies: 44
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi folks,

Many of you will have seen my previous post about proposed changes to our text editor and you may have been following along with MDL-75071 where these changes are being worked upon.

I'm please to inform you that the project is proceeding well and we are close to finalising our integration of TinyMCE version 6.

I have created a prototype site to demonstrate the TinyMCE editor, which you can access at https://tinymce.prototype.moodledemo.net/. I have created a course where you can try the editor in different areas, including:

  • Creating forum content
  • Taking a quiz both with, and without file attachments
  • Creating activities

The editor is nearing feature parity with Atto, and the following features have been implemented:

  • Standard formatting (bold, italics, colour, heading levels, tables)
  • Media - specifically images, videos, audio, and media management
  • RecordRTC
  • H5P
  • The Accessibility Checker

Several features are in-progress and will be ready in the coming week or so:

  • The equation editor

At this time, the intention is to include TinyMCE 6 in Moodle 4.1, alongside Atto and TinyMCE 3. It will not be the default editor in this release. In Moodle 4.2 we expect to make it the default editor. The timetable for removal of TinyMCE 3, and the migration of Atto to the plugins database has not yet been confirmed.

If you have any feedback on this prototype, it would be great if you could either leave it here, or in MDL-75071.

Thanks,

Andrew Lyons

Average of ratings: Useful (5)
In reply to Andrew Lyons

Re: TinyMCE 6 - prototype available

by AL Rachels -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
The new editor version seems to work fine, but I do not particularly care for the look of the tool icons. They look a little stark and unappealing to me without the borders, when compared to the rest of the Moodle 4.x.x look of nice, rounded, corners, when using the Boost theme.

My 4.x.x dev site allows me to use both the current TinyMCE and Atto editors. Both use tool icons with borders around each tool button, with the Atto icons using nice round corners that really fit in well with the look of the Boost theme. The TinyMCE editor icon borders have sharper, but still slightly rounded corners, that seem to fit in with both the Boost and classic themes.
Average of ratings: -
In reply to AL Rachels

Re: TinyMCE 6 - prototype available

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Thanks for the feedback.

We'll be working with our designers during the QA cycle to tweak the look and feel where relevant. I've raised MDL-75964 to cover this.

I'm not sure whether we will make changes to Tiny's general look and feel.

Personally I find that Atto (and old TinyMCE) feel very dates as a result of the rounded corners, and the shading they use and I've found it refreshing to use Tiny (though I'd like a _little_ colour).
Average of ratings: -
In reply to Andrew Lyons

Re: TinyMCE 6 - prototype available

by Brandon Jimenez -
I for one applaud moving away from that dated (and frankly ugly) design of the Atto buttons; still, I do believe there's some visual tweaking to be made.
Average of ratings: -
In reply to Andrew Lyons

Re: TinyMCE 6 - prototype available

by Luiggi Sansonetti -
Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Hi

New TinyMCE seems to be good

  • file menu is not necessary (we have "preview" in view menu)

But yes, it could be great !

Average of ratings: -
In reply to Luiggi Sansonetti

Re: TinyMCE 6 - prototype available

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Good point. I've updated the code to empty the current file menu (which removes it). Than you.
Average of ratings: Useful (1)
In reply to Andrew Lyons

Re: TinyMCE 6 - prototype available

by Vernon Spain -
Picture of Plugin developers Picture of Testers
This is brilliant, love it.
The big wins for me are the table - OMG such an improvement.
The insert template - It says "No templates Defined" ... Is that a site level item? Where would these be created? https://www.tiny.cloud/docs/plugins/opensource/template/#makingtemplates
Great work!
Average of ratings: Useful (1)
In reply to Vernon Spain

Re: TinyMCE 6 - prototype available

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Ah - thanks for that.

I've disabled that plugin for now. We don't currently supporting that feature in scope as it needs a fair amount of thought to determine how it should function - are these user templates? site templates? are they disabled when you're in a quiz? And so on
Average of ratings: -
In reply to Andrew Lyons

Re: TinyMCE 6 - prototype available

by Francis Devine -
Picture of Core developers
I note that code highlighting works within the editor view, but does not appear to work once you are returned to the codepage.

I assume missing styles only loaded when the editor is present.

Example https://tinymce.prototype.moodledemo.net/course/view.php?id=2#collapssesection3
Average of ratings: -
In reply to Francis Devine

Re: TinyMCE 6 - prototype available

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
I'm afraid so, yes - that's a slightly harder issue to solve but we'll aim to solve it before release. I've raised MDL-75963 to look into it.

Essentially the Editor is responsible for creating the content, but the Theme is responsible for displaying it. Obviously there is some overlap, but if we were to define the style for how those values are displayed within TinyMCE, then if it were later removed then all of the content would lose its styling.

For Moodle 4.1 that's largely okay, but the difficulty comes when we make TinyMCE available in the Plugins database and users install it in Moodle 3.11 where we have not (and will not) add those styles to the core theme.

It may be that we disable some features like that in the plugin database version of the editor to prevent this situation.
Average of ratings: -
In reply to Andrew Lyons

Re: TinyMCE 6 - prototype available

by Tue Korsgaard -
Picture of Plugin developers Picture of Translators

It generally looks great - and love that you now can resize images in the editor. However the sizes are set as explicit style pixelsizes which is not great for responsive content. 


<p><img class="img-fluid .tiny_image_button_text-top" role="presentation" src="https://tinymce.prototype.moodledemo.net/draftfile.php/11/user/draft/471330109/DALL%C2%B7E%202022-09-18%2017.02.54%20-%20A%20happy%20looking%20orange%20fluffy%20monster%20listening%20to%20what%20another%20monster%20is%20saying%20%203d%20rendering.png" alt="" width="664" height="664"></p>


I'm not sure whether this is in scope of this change, but it would be great if some effort was also put into making the image-properties a bit prettier.  It does not look great if 


Average of ratings: -
In reply to Tue Korsgaard

Re: TinyMCE 6 - prototype available

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Hi Tue,

The functionality and behaviour in the Image modal is the same as in Atto. It does accept percentage inputs too.

I am keen to improve it - what did you have in mind in particular?

Thanks,

Andrew
Average of ratings: -
In reply to Andrew Lyons

Re: TinyMCE 6 - prototype available

by Tue Korsgaard -
Picture of Plugin developers Picture of Translators
 The modal contains scrollbars, since the image is overflowing the size of the modal. Maybe the image width can be set to 100% of the modal.

Average of ratings: -
In reply to Tue Korsgaard

Re: TinyMCE 6 - prototype available

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
The image should be the same size as it will be shown in the editor. If it is resized down to fit the window, then it's misleading as to how it will be shown in the editor. I believe that the way it is shown in Atto is a bug - once the image is larger than the modal, you cease to be able to work this out.
Average of ratings: -
In reply to Andrew Lyons

Re: TinyMCE 6 - prototype available

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers
Its looking very nice. I was so used to 3 rows of icons that I had forgotten about menus.
I noticed when I dropped the screen size down to iPhone 12 (just in browser console) that the menu disappeared and I was left with a handful of icons.
Is this by design, no menu for mobile users? Or just something we did not get to implementing yet?
Average of ratings: -
In reply to Andrew Lyons

Re: TinyMCE 6 - prototype available

by Matthias Giger -
Picture of Particularly helpful Moodlers
Does the new editor remove styles and script tags in general or can that be adjusted in the administration settings?

How will existing plugins (from Atto) be incorporated into the new editor (menu, icons)?

Atto with all its shortcomings in producing HTML code is highly customizable (for instance placing of commands/icons you need often), will that be the case with the new editor?
Average of ratings: -
In reply to Matthias Giger

Re: TinyMCE 6 - prototype available

by Brandon Jimenez -
As far as I've read, they need to be recoded. From what I've seen it's absolutely different the way Atto plugins and Tiny 6 will be created (i still need to check the new plugin skeleton). I am finishing a plugin for Atto and it seems that I will have to start mostly from scratch, although documentation might prove me wrong.
Average of ratings: -
In reply to Matthias Giger

Re: TinyMCE 6 - prototype available

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers
Why has no one replied to Matthias Giger? Matthias asked:

Does the new editor remove styles and script tags in general...
Unfortunately, in Moodle 4.1, the answer is yes, style and script tags are instantly removed.

or can that be adjusted in the administration settings?
Unfortunately, in Moodle 4.1, the answer is no, that can not be adjusted in the administration settings.

Rick Jerz commented that Moodle is taking one step forward and around five steps backward with TinyMCE. With the automatic deletion of the script tag, I have no words to say how disappointed I am.

For many users, deleting the script tag is nothing less than sabotage since scripts are used in so many situations.

You can't just remove the script tag! Please re-allow it!

Well, I know you won't. And this is a real shame.

Average of ratings: Useful (4)
In reply to Andrew Lyons

Re: TinyMCE 6 - prototype available

by Przemek Kaszubski -
Picture of Particularly helpful Moodlers Picture of Testers
Hello,

Just had a little play with the new Tiny editor. First two questions:

1) Is it Ok that when we return from the "Source code" view back to the visual editor we have to hit the "Save" button ? Maybe that button should be a simple "OK" ? I believe "Save might suggest we are done with the edits and leaving the editing page completely?

2) The blockquote style does not appear to do anything? No indent, no smaller font etc?

First impressions: it feels great, and I will certainly return for some more testing. I always loved how Tiny displays the HTML elements structure underneath the editing area - so useful to see I'm in a p or in a div, etc.

I hope the developers of plugins such as atto_embedquestion and atto_cloze will be able to quickly catch up with these exciting developments.

Cheers, and many thanks,

Przemek
Average of ratings: -
In reply to Przemek Kaszubski

Re: TinyMCE 6 - prototype available

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

Argh! No! (runs screaming from the room wink). I am still working to update my last plugin that needs to be updated for Moodle 4.0, and I am about to have to start that process all over again. sad

Acutally, at one point when Andrew was talking about needing to document the process of converting an atto_ plugin to a tiny_ plugin, I cheekily suggested that atto_embedquestion would be the perfect example for Andrew to do as a case-study for the documentation wink. I wonder if anything came of that?

More seriously, I am sure we will make a new plugin in time, if no one else does, but I cannot promise when.

Average of ratings: Useful (4)
In reply to Tim Hunt

Re: TinyMCE 6 - prototype available

by Przemek Kaszubski -
Picture of Particularly helpful Moodlers Picture of Testers
We'll wait as long as it takes before we switch the default editor on our sites smile .
Average of ratings: -
In reply to Andrew Lyons

Re: TinyMCE 6 - prototype available

by Luca Bösch -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I for sure would miss the out-of-the-box syntax highlighting in HTML view which helped inexperienced persons a lot.

Would it be possible to bring that back?

Thanks for inquiring!

Best,
Luca

Average of ratings: Useful (5)
In reply to Luca Bösch

Re: TinyMCE 6 - prototype available

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Sorry for the late delay - I only just discovered the e-mail notification for this post.

At the moment we are using the default Source code plugin from TinyMCE. I had hoped to replace this with a Moodle-specific version in time for the 4.1 one release but other issues took priority.

This has been flagged for our Phase two work on this project for Moodle 4.2 in MDL-75265. This was also the approach that we took in Atto.
Average of ratings: -
In reply to Andrew Lyons

Re: TinyMCE 6 - prototype available

by Matthias Giger -
Picture of Particularly helpful Moodlers

I just played around some more and found that the same symbol is used for two different purposes:

1) The <> is used to switch to the HTML view:

<> to switch to HTML code

2) It is used again for the code view (display code in your page):

<> to display code in webpage

Average of ratings: -
In reply to Matthias Giger

Re: TinyMCE 6 - prototype available

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Sorry for the delay - I lose the e-mail notification of this until Ricks' latest comment surfaced it.

This is a TinyMCE thing. We will be replacing the current "Source code" plugin in MDL-75265 but I don't know whether we will use the same icon, or a different one at this time.
Average of ratings: -
In reply to Andrew Lyons

Re: TinyMCE 6 - prototype available

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
I might be a little ahead of things, but I did install an experimental version of Moodle 4.1, Moodle 4.1rc1 (Build: 20221118). I made TinyMCE 6 the default editor to see what it is about.

What I cannot seem to do is to modify the buttons that appear in the new TinyMCE 6. For example, I would like to remove the H5P button. Exactly how do I do this? The method that I use for ATTO (a textbox with button words) doesn't seem to exist.
Average of ratings: Useful (5)
In reply to Rick Jerz

Re: TinyMCE 6 - prototype available

by Nathan Lind -
Thanks for making this important discovery Rick. We also have used that method of modifying the list and order of tools in the Atto text editor, and hope to continue to be able to do that if/when Moodle switches back to TinyMCE 6+ for the default text editor.
Average of ratings: Useful (1)
In reply to Nathan Lind

Re: TinyMCE 6 - prototype available

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
The Tinymce (legacy) provides a "settings" area to configure its toolbar. But this is missing from the newer Tinymce (6) options. I did see that the H5P button is a plugin, and that removing it from moodle core can remove the toolbar button. But this would be an odd way of having to disable a tool. Other tools, like audio and video record, I want to disable because I don't want students consuming server disk space.
Average of ratings: Useful (1)
In reply to Nathan Lind

Re: TinyMCE 6 - prototype available

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Hi Nathan,

We currently do not plan to introduce an admin setting to control the menu and toolbars. They are simply too complex to achieve all of the possibly options. Rather than doing this we are trying to encourage developers to think about the optimal configuration for their plugins. We will also be looking to add the ability to enable and disable plugins more easily within the UI.

It's also worth noting that the menu and toolbar can both be configured from within a plugin, so a plugin could be written to control the toolbar configuration. This is a much more powerful approach from a developer perspective and we've already heard that some organisations are really. keen on this approach as it will allow them to provide different configurations for different roles, activities, locations within Moodle, etc. For example, it would be very easy to only show the formatting tools, and remove all menus and justification tooling for students, or for those in a forum.
Average of ratings: Useful (2)
In reply to Rick Jerz

Re: TinyMCE 6 - prototype available

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Rick,

We have not included an admin utility to modify the toolbar at this time. This may be something that is added later, but the difficulty is that the TinyMCE options are significantly more complicated than Atto and there is no easy way to manage them.

With regards H5P, there are two capabilities that control whether:

  • a user can upload H5P packages in Moodle (not a TinyMCE capability): moodle/h5p:deploy
  • a user can embed H5P packages from elsewhere (TinyMCE specific capability): tiny/h5p:addembed

These were also present in Atto.

Average of ratings: Useful (1)
In reply to Andrew Lyons

Re: TinyMCE 6 - prototype available

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
Thanks for your reply, Andrew. So, what should one do if one wants to control the tools made available to students? Continue using ATTO? Or run the legacy TinyMCE? Running the newest TinyMCE 6 doesn't seem to provide control yet... you get what you get until someone develops a plugin. It seems odd that the "newest" Tinymce has fewer features and control than the legacy TinyMCE.

Yes, I noticed that the H5P button could be turned off by removing it as a plugin. But when upgrading Moodle, one has always to remember to do this.

How do I disable the "record audio" and "record video" tools?

Yes, I realize that TinyMCE 6 is more complex. But it seems that Moodle is taking one step forward and around five steps backward with TinyMCE. However, maybe I am missing something. Re-reading the posts from above, I am not sure what it is. I will continue to monitor this discussion.
Average of ratings: -
In reply to Rick Jerz

Re: TinyMCE 6 - prototype available

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Rick,

So, what should one do if one wants to control the tools made available to students?

Generally all of the tools available should be suitable for all users. I'm not aware of any tools which you would want to disable completely, and always.

Continue using ATTO? Or run the legacy TinyMCE?

We will not be removing the Atto plugin until around Moodle 4.4. We hope that you will use the new TinyMCE integration, but if it does not currently suit your needs then we understand that you may wish to wait.

Running the newest TinyMCE 6 doesn't seem to provide control yet... you get what you get until someone develops a plugin.

Whilst TinyMCE 6 does not provide the same level of control, I'd argue that the control in Atto is very weak. Yes it allows you to configure the toolbar, but it is a very blunt instrument and offers no finer-grained detail. That's something that is possible in Tiny, but not currently out-of-the-box. I would rather implement something well, and with appropriate user research, than to implement it poorly as in Atto and legacy Tiny.

It seems odd that the "newest" Tinymce has fewer features and control than the legacy TinyMCE.

The legacy TinyMCE really does have to go and we anticipate removing it in Moodle 4.2. It has not been maintained for a very long time, and it doesn't really offer anything that is not available in the new integration with the exception of the toolbar configuration. It does not have many of our newer features (for example RecordRTC, H5P, etc). What features do you feel are missing?

Yes, I noticed that the H5P button could be turned off by removing it as a plugin. But when upgrading Moodle, one has always to remember to do this.

As I noted in my previous reply, the better way to do this is to modify the permissions for this. It is not necessary to remove the plugin.

How do I disable the "record audio" and "record video" tools?

We have not allowed for this at this time. Use of these plugins is no different in terms of disk utilisation than a user uploading media, which is still allowed. If a user wants to include a video submission of some kind, they could do so previously by recording it and uploading using the Media plugin. The RecordRTC plugin just provides a shortcut to this. You can, of course, nobble it and reduce the maximum recording length down so that it is practically useless. I would not recommend this approach.

Yes, I realize that TinyMCE 6 is more complex. But it seems that Moodle is taking one step forward and around five steps backward with TinyMCE. However, maybe I am missing something. Re-reading the posts from above, I am not sure what it is. I will continue to monitor this discussion.

Thanks for the feedback. The integration of TinyMCE 6 is Moodle 4.1 was never going to suit every need, no matter how hard we have tried to do so. We wanted to get it into core for our LTS release to encourage plugin developers to add support for their features to it -- the LTS release is a good carrot to encourage greater plugin availability. We have tried to get feedback from the community on these changes, but as you see in this discussion, the feedback we've had so far is fairly limited.

We are aware that some features are not the same as in Atto (or legacy Tiny) but I would argue that we shouldn't be seeking to make them identical. In some cases those existing features are problematic and limiting when it comes to making change. You can already see an example of this with Atto - the existing configuration value is an absolute nightmare to manage and as the default plugin list changes it's quite challenging to update it, or add/remove plugins in a reliable programmatic way. We've had requests for making 'simple' versions of the editor for some situations, and it simply isn't easily possible.

We have tried to make sure that the new plugin platform is solid, and detailed, and that the configuration that is present does not cause issues with the hope that all community plugins can be made to work in Moodle 4.1.

In terms of configuraiton if we had implemented a rudimentary configuration system in core for Tiny 6 in 4.1, and later get feedback that something very different is required, it becomes more and more challenging to migrate to that position. As I have mentioned, we've already had several people comment that the organisation of toolbars and menus should allow for much richer and fine-grained configuration and this could be very difficult to achieve if we implement some of these features in core incorrectly at the outset.

Thanks again for your feedback,

Andrew

Average of ratings: -
In reply to Rick Jerz

Re: TinyMCE 6 - prototype available

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Really, if you want to impose the rule "this tool is available to students" (or not) - well, you just mentioned a role name there.

Therefore, it does not make sense to say this should be controled by an admin setting which affects all users.

The presence or absence of a particular button should be controlled by a capability - which is already done. For example, in Atto, the button for our embedded question filter (https://moodle.org/plugins/atto_embedquestion) only appears to users with permission to embed a question. Same thing should apply to the H5P button. If we want some users to embed H5P and other not, there should be a capability to control that, and that should affect all aspects of how this feature appears to users, not just the presensce of absence of the button in the edtior toolbar.
Average of ratings: Useful (8)
In reply to Tim Hunt

Re: TinyMCE 6 - prototype available

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
"How do I disable the "record audio" and "record video" tools?"

Yes, Tim, perhaps this should be controlled by "capability" and "roles." This would be acceptable.

Currently, using ATTO, I just easily remove these buttons. That's it! In TinyMCE 6, as Andrew suggests, nope, can't do. Perhaps students can upload large videos, but I am controlling this by disabling the file system for students.

I am not arguing the point; I am just trying to present what I see as a problem with TinyMCE 6 and hoping that a solution is found in the future, realizing that this move to TinyMCE 6 is new. When I visit the TinyMCE website, there seem to be all kinds of nice features available. For example, buttons to color the text and background, which I currently have to add as a plugin to ATTO. It would be great if I could simply turn on a button in TinyMCE 6. When I look at TinyMCE 6 in Moodle 4.1, it appears to be a dramatically scaled-down version of TinyMCE. However, I am still learning, and perhaps I am missing something.

I have found that when you show things to students that do not do anything, it creates student questions that the instructor has to waste time explaining. This is why I like to remove things (like buttons) that I don't support on my Moodle.
Average of ratings: Useful (5)
In reply to Tim Hunt

Re: TinyMCE 6 - prototype available

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers
+1 on this. If there is not a capability system for hiding/showing icons, I think we should add one.
In my experience there are definitely situations where teachers/admins want to control who can see what buttons on the toolbar. Video recording is a good example.
Average of ratings: Useful (3)
In reply to Justin Hunt

Re: TinyMCE 6 - prototype available

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
Justin, you would probably agree that some folks might want to disable the built-in "record video" and replace it with one that saves videos to a video-server.

The interesting thing is that the TinyMCE website boasts how one can customize TinyMCE!  I wonder if the one that Moodle is using is a reduced "free" version of the editor?  I appreciate that perhaps even though TinyMCE can be "customized," providing a nice user interface to these features might be challenging.

The TinyMCE website says:
"Use TinyMCE as:
A basic editor
An advanced 📝 editor
A @collaborative editor
A totally customized editor"

And it shows:

10     toolbar:
11      'undo redo | casechange blocks | bold italic backcolor | \
12      alignleft aligncenter alignright alignjustify | \
13      bullist numlist checklist outdent indent | removeformat | a11ycheck code table help'
14   }"

Average of ratings: Useful (1)
In reply to Rick Jerz

Re: TinyMCE 6 - prototype available

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators
I believe there are capablities for the audio and video recording - 
  • tiny/recordrtc:recordaudio
  • tiny/recordrtc:recordvideo

Average of ratings: -
In reply to Rick Jerz

Re: TinyMCE 6 - prototype available

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Hi Rick,

The "Free" version of TinyMCE that Moodle uses is the standard TinyMCE and not some reduced one. We have almost all of the standard features - those which are not enabled we have either been actively disabled and replaced with Moodle variants, or do not make sense in our environment. There is a Pro license that you can purchase, and we are exploring whether this is something that will be of benefit to Moodle users - many of the Pro features are not really relevant to Moodle because they're things like Collaborative editing, their Accessibility checker, their Spell Checker, their file manager (which does not integrate with Moodle files and stores all files in the Tiny Cloud environment) etc. You can see a list of the Premium plugins at https://www.tiny.cloud/docs/tinymce/6/plugins/. It's worth pointing out that several of those Premium plugins require you to install additional software on your server for them to work (for example, the Spellchecker). The Premium plugins of note are the Advanced code editor (which we intend to implement ourselves for Moodle 4.2 anyway). Power Paste, Format Painter, Link Checker, and maybe a couple of others depending on need and requirement. Note: If we were to go down this road, it would be a case of adding the space for you to enter your own license key that you have purchased.

When they say that it is highly customizable, they mean for a developer. It is not customisable at run-time at all, or by users, and they do not provide any UI to do so at all. All customisation comes from the way in which it is instantiated. The snippet you show above is a part of the configuration that is provided to Tiny when it is instantiated - see it here: https://www.tiny.cloud/docs/tinymce/6/basic-example/. We define a very similar configuration here: https://github.com/moodle/moodle/blob/master/lib/editor/tiny/amd/src/defaults.js#L26-L100 and we modify it here: https://github.com/moodle/moodle/blob/master/lib/editor/tiny/amd/src/editor.js#L250-L305. We also allow any plugin to modify it further.

To allow customisation of this, Moodle does have capabilities as I have noted. Mary has also pointed out that we have capabilities for RecordRTC to enable who should have access to these buttons.

Andrew
Average of ratings: Useful (2)
In reply to Justin Hunt

Re: TinyMCE 6 - prototype available

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
There is a capability system for configuring many of the icons, but not all. H5P, Video recording, and Audio recording are include din that list.
Average of ratings: -
In reply to Tim Hunt

Re: TinyMCE 6 - prototype available

by Peter W. Schlatter -
+2, suported issue. Moodle LMS is used in totally different environments. The configuration of the editor should be adaptable with the goal of highest efficiency in handling and learning. The structure and "design" of text is a part of smooth learning. 
Average of ratings: Useful (2)
In reply to Andrew Lyons

Re: TinyMCE 6 - prototype available

by Josh Manders -

Few comments and +1's to add to the thread:

First — amazing efforts from individuals & the Moodle community to admit the long term issues with ATTO and move everyone back to TinyMCE. 👏 I believe I can speak for most of our users when I say, "YEEEEESSS!! — we'll be able to edit tables and make them accessible again!"

  • #1 Concern: How to upload/attach documents (pdf, doc, ect)? As everyone scrambles to condense their courses to a more manageable list of activities, one of the major ways we can reduce endless scrolling is by embedding or linking documents directly within books, pages, glossaries, ect. With ATTO, we use the "Link..." Option and navigate to an uploaded file via the "Browse repositories..." function. This currently isn't the case for TinyMCE 6 but it seems some of the functionality is partially there via the "Media Manger". PDF & doc are currently not accepted formats if you use the Insert > Multimedia option.

  • RE: The need to disable certain functions = YES! As @Rick points out, many institutions use enterprise solutions for audio/video and need to disable/limit RTC (side rant: RTC still not entirely mobile compatible). As @Mary points out, if done through privileges/capabilities, this will work for most.
  • Utilize limited TinyMCE Stylesheet control - customizable at the site level similar to custom CSS function for Boost theme.
    • Basic text styling color presets — especially a highlighter. The plugins for ATTO were ok but personally believe folks at basecamp nailed it with their editor options (see image)
      TinyMCE v6 - website editor Basecamp3

    • Bootstrap elements — most notably, the flexible grid. Moving users away from using tables for layout is critical to a mobile friendly course. Making it easy for users to add these layout templates without need for coding was extremely helpful. Expanding this to buttons and other bootstrap elements would make some users really happy.
  • Codeblock & HTML mode Styling
    • Codeblock: The styling is problematic and really should mirror what we're seeing elsewhere on the web. Which would you rather look at?
      TinyMCE v6 Rest of the web...


    • Beautified HTML code mode – props to Andrew Lyons for maintaining that function in ATTO!
Average of ratings: Useful (4)
In reply to Josh Manders

Re: TinyMCE 6 - prototype available

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Hi Joshm

Thanks for the feedback.

1) Unfortunately this was an oversight and will be added in 4.2. The link plugin was inadvertently missed as a feature needing to use the Repository. We have MDL- to cover this.

2) Disabling featurs

As Mary and I have pointed out, this is already possible. We already define RecordRTC capabilities for this. We also do so for several other features (like H5P).

Re your side rant, we're trying to solve this, but different browser and OS combinations offer different support for different codecs. The only solutions is to transcode the content once recorded, but this would require something like ffmpeg being installed on the server - which is unlikely to be a popular move, and is also difficult to get right.

We are also trying to transcode the content using WASM modules at play-time but this solution is not perfect.

It's also not clear how best to solve this one.

3) This is a tricky one to solve.

TinyMCE's default colour selector is very problematic and we deliberately disabled it with the intent to replace it with something more suitable in the future.

The problem boil down to the way in which it sets the colour on the selected content - specifically it does so by setting a style attribute with a hard-coded hex colour in the element. Whilst that seems like a really simple and obvious way to do things, it does not work well in our case where we have multiple theme support, and themes may change
over time, or offer features such as dark mode.

As a case in point, you may create content which has a yellow background using the TinyMCE colour palette, and use the standard font colour (dark grey I believe). That works well, until someone updates the theme to support dark mode and flips the background colour to dark grey and the font colour to an off-white. Because of the way in which TinyMCE sets the colour on the content, it's only set the background colour (pale yellow), but the font colour is now an off-white. As a result you have content which has dark grey page background, with the content itself having a pale yellow background and off-white text. It's totally illegible.

The other concern with using colours for content is that they are often used to highlight content. Again your suggestion pretty much hits the nail on the head - your suggestion is to add a "highlighter", but that's only a visual highlight. It does not work for users of screenreaders with very low or no visual acuity. Ideally we need to find a way that indicates that content has a high priority to them in some way too.

We are looking to solve this - and the first part is relatively easy.

Rather than hardcoding colorus onto the element via a style attribute, we can set a class name on it with the theme filling in the colours. We can do this using CSS variables so that the editor can consume them from whichever compiled CSS the theme uses (SCSS, LESS, SASS, etc.). A little work is required here as we need to essentially define a contract between the theme and the editor on the styles that they should use, and the list of available colour groups. We don't want to use something that is TinyMCE-specific because if you later remove the editor, along with its bundled style content, any styles bundled will be removed and your content will lose all styling.

The latter part is a little more challening and we'll likely need to work with our accessibility consultants and UX designers to find a solution which makes this possible with the least difficulty.

4) Flexible grid

That sounds like a really useful feature. Again we do have the concern with theme interactions and requiring a contract with all theme as to which CSS classes they will commit to supporting for which features. That's mostly a discussion rather than a technical challenge.

Could I ask you to create a new issue on MDL-75926 with more information on this one?

5) Codeblock & HTML mode Styling

The view source code tool is going to be updated via MDL-75265 to support beautification, and code styling.

We'll have to look separately at handling this in the rendered content though - again we get into issues with themes doing things differently and this one is possibly harder to solve.

We'll handle theming of code blocks in rendered content separately. I have created MDL-76518 to cover this.

Andrew
Average of ratings: Useful (5)
In reply to Andrew Lyons

Re: TinyMCE 6 - prototype available

by Josh Manders -
Thanks Andrew! — Super helpful and direct responses. Appreciate the collaboration with the accessibility folks. The more we can help our users make good design choices through the presets we provide them, the less remediation work we need to do. I'll follow up on MDL-75926 smile
Average of ratings: -
In reply to Andrew Lyons

Re: TinyMCE 6 - prototype available

by Gemma Lesterhuis -
Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Hi Andrew,

I just gave a Moodle 4.1 presentation - and when showing the TinyMCE 6 editor the first question I got from one of the teachers: is it possible to give text colour.
I though I would you let you know, so hopefully this is something high on the to do list. I am not sure if there is already a tracker on this, or that you would like me to create one so this does not get lost in the conversation.

- Gemma
Average of ratings: -