WYSIWYG Editor

[lfdebrux]

Also known as: rich text editor

What

A text area which allows users to enter rich text, including styles and links.

Why

This has been requested by multiple people in the x-gov Slack.

Anything else

GOV.UK publisher and GOV.UK Notify have textarea components which accept Markdown to achieve a similar effect.

• rich text editor in MOJ pattern library

[CharlotteDowns]

This component has a relationship with #65 Textarea component

[gregtyler]

Commenting to note that we've deprecated this component from the MOJ Pattern Library because it's too complex for us to support. Rich text editing comes with a myriad of accessibility, security and usability concerns that we weren't comfortable taking on, and we don't want to provide components in a semi-supported state.

In our documentation we've suggested TinyMCE as an alternative but are investigating whether it is sufficiently accessible. If it is, we may investigate creating a custom GOV.UK-alike skin so that it can be more naturally integrated.

[mariana-castro]

@gregtyler do you have any news about the TinyMCE and rich text investigation? Is any kind of text editor a possibility?

In my current project, our users feel the need for (in a certain part of the app), to be able to add text with links and bullet points (at least). User testing showed us that ideally users would like to copy-paste from a word document into our platform maintaining some of the formatting. Technically, it is possible to have a rich-text/markdown editor, but NHS design system and GOV.UK has nothing of this kind. The most similar approach that we've found was the MOJ rich text editor pattern you have mentioned above.

Does anyone know of any other pattern or approach we can use to give the users some flexibility when entering information?

[gregtyler]

@mariana-castro Sorry for the lack of update. When we investigated last year, our accessibility team found that TinyMCE didn't have an accessibility statement or VPAT, and we weren't able to speak to any accessibility specialists on their team, so we weren't comfortable advising its usage over anything else. I don't know if that has changed since.

Specifically on the subject of copy-pasting: worth noting that as of version 6 of TinyMCE the functionality to paste from a Word document (or similar) is a paid feature.

[steve-oconnor]

@gregtyler Did you try any other rich text software? I tried a few out at the beginning of last year looking for an accessible solution and put forward the possibility of using CK Editor. It's the only one that addresses accessibility in any depth and meets standards. CK Editor accessibility

[gregtyler]

Not that I'm aware of. We had a narrow remit of knowing that TinyMCE was in use and wondering if we could formally state it as an official recommendation. My service team has an upcoming spike on looking at alternatives though, so I've added a note to check CKEditor then. If it passes muster for us, we'll run it up the pole to see if it's something we can align on.

[anupshah]

Hi @gregtyler , just specifically commenting on this bit:

When we investigated last year, our accessibility team found that TinyMCE didn't have an accessibility statement or VPAT, and we weren't able to speak to any accessibility specialists on their team, so we weren't comfortable advising its usage over anything else. I don't know if that has changed since.

Their more recent versions do, e.g. version 6. https://www.tiny.cloud/docs/tinymce/6/tinymce-and-screenreaders/

Keyboard accessibility is okay, for example - once you know the keyboard shortcut to get into the toolbar, that is...! I've not looked at it for a while myself, so dunno if they've improved that a bit more recently or not (don't think so from the above link - though it is supporting screenreaders also)