TinyMce - the default text editor

ImpressPages uses TinyMCE as the default text editor. It is configured to provide minimal toolset to make it easier to use. The philosophy behind it is that a user should not try to build the layout using the text editor. Text editor has to be simple and used just for text. 

Nevertheless if you want to use more features of TinyMCE, you can add one of the several available plugins that extend default TinyMCE capabilities.

If you want to use TinyMCE in your own plugin, you can get the default configuration using ipTinyMceConfig() function in JavaScript which is defined in Ip/Internal/Core/assets/tinymce/default.js file. And vice versa. If your plugin overrides ipTinyMceConfig() function, ImpressPages core will use it to initialize text editor.

TinyMCE configuration

You can easily add your own style or set other TinyMCE modifications in your theme. Just add Theme/MyTheme/setup/admin.js file with content like this (available since 4.5.0 version):

var ipTinyMceConfigOriginalFunction = ipTinyMceConfig; 
var ipTinyMceConfig = function () {
    var customizedConfig = ipTinyMceConfigOriginalFunction();

    //adding Button2 style to the existing styles
    //more details on TinyMCE website
    customizedConfig.style_formats.push({title: 'MyCustomStyle', inline: 'span', classes: 'customClassForResultingHtml'});

    //replace any other default setting
    //customizedConfig.configName = 'customValue';

    return customizedConfig;

Want to alter TinyMCE configuration in your plugin? Have a look at a bunch of plugins already doing this:  


Default configuration implements paste_preprocess callback and valid_elements setting of TinyMCE to cleanup content pasted from other sources. It cleans up all foreign styles, but leaves lists, links and recognized styles intact. That gives unseen experience, when pasted content gets styles of the website without any additional effort.

comments powered by Disqus