Orchard CMS — Add font size and font color select to TinyMCE

TinyMCE is a great editor, but by default is not enabled the font size and font color select.The enabling of this two features is really easy.

Go to \src\Orchard.Web\Modules\TinyMce\Scripts\ and open orchard-tinymce.js.

Inside tinyMCE.init there is a toolbar property. After the formatselect add forecolor fontsizeselect.

Now the toolbar property should look like this:

toolbar: "undo redo cut copy paste | bold italic | bullist numlist outdent indent formatselect forecolor fontsizeselect | alignleft aligncenter alignright alignjustify ltr rtl | " + mediaPlugins + " link unlink charmap | code fullscreen"

If you want to change the font sizes values add this property after the toolbar property:

fontsize_formats: "8px 9px 10px 11px 12px 14px 16px 18px 24px 36px"

That’s it, you are ready!

Originally published at https://orchardtricks.dotnest.com.