Episerver : How To Add Custom Table Styles In The TinyMCE Editor

We had an issue recently with styling tables in EPiServer.  EPiServer implements the tinyMCE project as the text editor within Epi. tinyMCE is very flexible and uses a plug-in based framework to allow customization like adding custom buttons and overriding default behaviour.  In Episerver, if an editor wants to add a table to a page, they can click  on the table button which launches a model that allows them to add columns, add a style.  Our problem is our site uses a custom table style and we did not want editors to manually have to modify any HTML directly. To get around the problem I wanted to pre-populate the style box with a list of our custom styles.  I thought finding information about adding in a style would be simple, but after a few hours of searching, I couldn't find a tutorial on how to do it in EPi. I found two approaches to solving this problem so I thought I would share them 1) If you open the table.html file you can manually add in the styles in the HTML mark-up of the form. If you go to C:\Program Files (x86)\EPiServer\CMS\6.1.379.0\Application\Util\Editor\tinymce\jscripts\tiny_mce\plugins\table\table.htm You should be able to see the following snippet, simply add a new option for each new style you require.

  Now if you open up EPiserver you will see all the styles added into the table dialogue epserveritinymcetable

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-35662136-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();