Try our conversational search powered by Generative AI!

TinyMCE and WCAG 2.0 compliance in EpiServer

Vote:
 

Our team has been asked to work on conforming to Web Content Accessibility Guidelines (2.0 at level AA), and ran into an issue with the TinyMCE control output in EpiServer.  The table editor in TinyMCE shows a "Border" field, which defaults to 0, but always adds a border="x" attribute to the table.  For instance, if you keep the default of zero, the markup produces this:

Unfortunately, that border attribute is not supported in HTML 5.  And this gets flagged by our compliance checking software (SortSite).

We found the TinyMCE script in the following path of our solutions: modules\_protected\CMS\EPiServer.Cms.Shell.UI.zip\Util\Editor\tinymce

In EpiServer CMS versions 8 and 10 we can see that the TinyMCE version is 3.3.9.3.  According to the TinyMCE site, their version 4 is accessible and also has a built in accessibility checker.  And version 4 doesn't append that deprecated border attribute to their borders.  Here is a link to their demo page.

https://www.tinymce.com/docs/demo/basic-example/

Can we upgrade our version of TinyMCE to version 4?  Or can the TinyMCE version 4 control be added to the next version of EpiServer?  Thanks.

#174099
Edited, Jan 18, 2017 17:07
Vote:
 

Thanks for the guidance Johan.  I've been struggling with this today.  Still don't have it working.  Initially I just added a class and tried his code verbatim.

http://krompaco.nu/2010/05/alter-default-initoptions-for-tinymce-in-episerver-6/

But when I edit a page, and select the "All Properties" button to see the control, the following error appears:

Failed to load: /Util/Editor/tinymce/plugins/OptimizedEditor/editor_plugin.js?moduleArea=Util

I'll keep hammering on this tomorrow.

#174154
Jan 19, 2017 22:54
Vote:
 

To get rid of the script error you can set ServerSideOnly = true in TinyMCEPluginNonVisual.

#174164
Jan 20, 2017 10:02
Vote:
 

Thanks Johan!  That worked.  The ServerSideOnly property is documented (link below for other devs), I just didn't see it.  So now I just need to incorporate the the right combination of valid_elements.

http://world.episerver.com/documentation/Class-library/?documentId=cms/9/3845F0DB

#174177
Jan 20, 2017 13:23
Vote:
 

Is there a way to remove the displayed fields in the table management dialog as well?  I was able to successfully strip away obsolete table markup attributes (like border) via EditorInitConfigurationOptions.  But the table management dialog in the editor still shows those fields.  Here is my class:

using EPiServer.Editor.TinyMCE;

namespace epiTroubleShooting.Helpers
{

    /// <summary>
    /// This class tweaks the TinyMCE settings.  Originally added for WCAG compliance.
    /// </summary>
    [TinyMCEPluginNonVisualAttribute(
        ServerSideOnly = true,
        AlwaysEnabled = true,
        PlugInName = "TinyMCECustomizer",
        DisplayName = "Custom editor init options",
        Description = "Loads custom editor init options.",
        EditorInitConfigurationOptions = @"{
            body_class : ""module-text"",
            paste_auto_cleanup_on_paste : true,
            theme_advanced_resizing : false,
            theme_advanced_blockformats : ""h2,h3,h4,h5,h6,p"",
            valid_elements : ""@[id|class|style|title|dir<ltr?rtl|lang|xml::lang|
                onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],
                a[rel|rev|charset|hreflang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur],
                strong/b,em/i,strike,u,#p,-ol[type|compact],-ul[type|compact],-li,br,
                img[longdesc|usemap|src|border|alt=|title|hspace|vspace|width|height|align],-sub,-sup,-blockquote,
                table[-border|-cellspacing|-cellpadding|-width|-frame|-rules|height|-align|summary|-bgcolor|background|bordercolor],
                -tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,
                #td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],
                #th[colspan|rowspan|width|height|align|valign|scope],caption,-div,-span,-code,-pre,address,-h1,-h2,-h3,-h4,-h5,-h6,hr[size|noshade],
                -font[face|size|color],dd,dl,dt,cite,abbr,acronym,del[datetime|cite],ins[datetime|cite],
                object[classid|width|height|codebase|*],param[name|value|_value],embed[type|width|height|src|*],
                script[src|type],map[name],area[shape|coords|href|alt|target],bdo,button,
                col[align|char|charoff|span|valign|width],colgroup[align|char|charoff|span|valign|width],
                dfn,fieldset,form[action|accept|accept-charset|enctype|method],
                input[accept|alt|checked|disabled|maxlength|name|readonly|size|src|type|value],
                kbd,label[for],legend,noscript,optgroup[label|disabled],option[disabled|label|selected|value],
                q[cite],samp,select[disabled|multiple|name|size],small,textarea[cols|rows|disabled|name|readonly],tt,var,big""
        }"
    )]
    public class TinyMCECustomizer
    {
        
    }

}

Thanks again for your help.

#174325
Edited, Jan 24, 2017 15:04
Vote:
 
<p></p> <p>I don't think that's possible, without adding your own plugins or changing the plugins that ships with Episerver&nbsp;(which might get overwritten when upgrading Episerver).</p> <p></p>
#174328
Jan 24, 2017 15:13
Vote:
 

Please note that body_class only works in All Properties view, not on on-page-edit view. This is a bug that will not get fixed, for some weird reason. I solved it by removing ServerSideOnly and then added this script in /util/editor/tinymce/plugins/{name of your plugin, in this case TinyMCECustomizer}/editor_plugin.js:

(function (tinymce, $) {
	tinymce.create('tinymce.plugins.OptimizedEditor', {
		init: function (ed, url) {
			ed.onLoad.add(function (editor) {
				// We can't use editor.settings.body_class unfortunately
				editor.dom.addClass(editor.dom.select('body'), 'text');
			});
		}
	});
	tinymce.PluginManager.add('optimizededitor', tinymce.plugins.OptimizedEditor);
}(tinymce, epiJQuery));
#174329
Jan 24, 2017 15:18
Vote:
 

Thanks so much Johan. So it's just a current limitation. I'll pass this along to our team so they can inform our clients. At least we can strip out the unwanted attributes. I hope that in the future EpiServer upgrades TinyMCE to version 4. That would solve this dilemma. WCAG compliance is something that we are increasingly seeing our clients request.

One last question on this, is it possible to intercept the post when a page edit occurs, so that we can programmatically parse the markup? I've got a request to inject some classes. Thanks.

#174336
Jan 24, 2017 15:58
Vote:
 

Yes, you have IContentEvents you can subscribe to, please see this blog https://talk.alfnilsson.se/2017/01/11/episerver-event-helper-v3-0/

#174337
Jan 24, 2017 16:06
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.