You can configure allowed elements and attributes. Please see http://world.episerver.com/documentation/developer-guides/CMS/editing/Customizing-the-TinyMCE-editor/, http://krompaco.nu/2010/05/alter-default-initoptions-for-tinymce-in-episerver-6/ (still valid even though it's Episerver 6) and http://archive.tinymce.com/wiki.php/Configuration3x:valid_elements.
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.
To get rid of the script error you can set ServerSideOnly = true in TinyMCEPluginNonVisual.
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
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.
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));
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.
Yes, you have IContentEvents you can subscribe to, please see this blog https://talk.alfnilsson.se/2017/01/11/episerver-event-helper-v3-0/
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.