Accessibility Checker for TinyMCE plugin

CM1 Ideas and Feature Requests
1

Beside SiteImprove integration in 5.4, what about this TinyMCE a11y - https://www.tinymce.com/docs/plugins/a11ychecker/

Will the TinyMCE Accessibility Checker be a part of 5.4?

These are the various rules that are checked:

  • Usage of paragraphs as headings
  • Sequential headings
  • Adjacent links
  • Ordered list structure
  • Unordered list structure
  • Contrast ratio of the text
  • Image ALT text
  • Alt text filename
  • Table caption
  • Complex table summary
  • Table caption and summary
  • Table heading scope
  • Table markup
  • Table headers
    This will be very nice especially the table. A TinyMCE Enterprise subscription includes the ability to download and install the accessibility checker feature for the editor.
2

Hi Aaron,

The upcoming CM1 patch changes the way that TincyMCE is configured in such that you can add a number of 3rd party plugins like this.  Role based configuration of the editor will also be supported. 

You can see the preliminary documentation on what the configuration options will look like on the staging help site. 

The new configuration options will apply to the Rich Text, Simple Text, Blog Post, and Custom Widget uses of TinyMCE and are designed to survive the upgrade or Patch process.

-n

3

Nate,

I just finished applying cmPatch5315_20180306_201608R05 and do not see where rx_resources/tinymce/config/customer_config_override.json was made available.

But my end goal is a little different - I’d like to add FontAwesome to TinyMCE https://github.com/josh18/TinyMCE-FontAwesome-Plugin

4

Hi David,

It should be in the /rx_resources/tinymce/config/customer_config_override.json location. If the file is not there you can create it:

Here is an example that specifies the custom styles used in the Rich Text Editor. 

 [{

“fields”: [


“percRichTextAsset.text”


],


“style_formats_merge”: true,


“style_formats”: [


{ “title”: “Custom Styles2”,“items”: [


{ “title”: “Custom Body text 1”, “classes”: “perc-body-text-1”,“inline”: “span”},


{ “title”: “Custom text 2”, “classes”: “perc-body-text-2”,“inline”: “span”},


{ “title”: “Custom Box 1”,“classes”: “perc-box-1”,“inline”: “span”},


{ “title”: “Custom Box 2”,“classes”: “perc-box-2”,“inline”: “span”},


{ “title”: “Custom Box 3”,“classes”: “perc-box-3”,“inline”: “span”},


{ “title”: “Custom List 1”,“classes”: “perc-list-1”,“inline”: “span”},


{ “title”: “Custom List 2”,“classes”: “perc-list-2”,“inline”: “span”},


{ “title”: “Custom List 3”,“classes”: “perc-list-3”,“inline”: “span”},


{ “title”: “Custom Quote 1”,“classes”: “perc-quote-1”,“inline”: “span”},


{ “title”: “Custom Quote 2”,“classes”: “perc-quote-2”,“inline”: “span”},


{ “title”: “Custom Table 1”,“classes”: “perc-table-1”,“inline”: “span”},


{ “title”: “Custom Table 2”,“classes”: “perc-table-2”,“inline”: “span”},


{ “title”: “Custom Title 1”,“classes”: “perc-title-1”,“inline”: “span”},


{ “title”: “Custom Title 2”,“classes”: “perc-title-2”,“inline”: “span”}


]


}


] }]
5

I don’t even see a config folder. Would it be fine to create both the config folder and the _customer_config_override.json_ file?

6

Hi David,

I just created an example of doing this and posted it here:  Example TinyMCE FontAwesome plugin configuration. 

You should create a plugins folder and a config folder under the tinymce folder.  I think the behavior was updated to not generate those by default in the latest patch.  

Let me know if you have any questions,

-n

7

This is cool Nate. Is this something that can be done on SaaS?

8

Hi Shon,

Yes it can.  We don’t have this folder exposed through the UI yet, so we would just need you to create a support ticket requesting a specific plugin / menu configuration be applied to your instance and we can get that scheduled for you. 

-n

9

Great. Thanks.

10

Nate,

Followed the directions from http://help.percussion.com/percussion-cm1/site-administration/customizing-the-rich-text-editor/tinym… and am still not seeing FontAwesome added to the Icon Selection dialog in a Rich Text editor. Even restarted Percussion to be sure.

11

That’s awesome! I didn’t know there’s a page out there…

When you select the font awesome icon, does it generate as _or tag? Per SiteImprove, best practice is and not tag for custom fonts, etc. 

Let me know._

12

David,

If you inspect element with the Rich Text Editor open in Chrome and Refresh cache, then open the editor again, you should see a good deal of output in the console that is echoing the JSON configuration.  If you paste that here we should be able to sort it out.  If not we can create a support ticket to confirm that the patch installed correctly.  You definitely should not need to restart to see these configuration changes - they are read on load of the Editor. 

Aaron - This fontawesome tinymce plugin generates a span.

-n

13

Nate,

I’ve got the add-on working and am able to add AwesomeFont icons within TinyMCE, but they disappear after I hit the save button.

However, I am able to keep the AwesomeFont icons if I manually add a inside the AwesomeFont’s span.

ex:
will disappear
will appear on the page

14

Hi David,

Try changing the extended_valid_elements option to:

“extended_valid_elements”: “#span[*]”,

I don’t like that it injects a space instead of a comment, but it does resolve the problem with the empty span tag getting pulled out. 

Will update the article with that change.

-n

15

Hay Nate,

Looks good to me, thanks for the update!

-David