tinyMCE custom style

Topics: Controls
Feb 11, 2015 at 3:19 AM
I'd like to add a couple of custom "code" styles to the editor. The process is fairly well documented here:

http://www.tinymce.com/wiki.php/Configuration:style_formats

I boiled that down to:

<script type="text/javascript">tinymce.init({
style_formats: [{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}] });</script>

However, to my surprise I didn't see any "style_formats" defined in either editors/tiny_mce3/tiny_mce.js or in tinyMCE.ascx so I'm not sure where to put this and without the style_formats_merge option in the later version I can't add it on it's own.
Feb 11, 2015 at 4:03 PM
What versions of BE and tinyMCE do you have?

The last version of BE that I know of that used the tinyMCE.ascx file was 2.8 which used a 3.x version of tinyMCE.
So up until BE 2.8 you would indeed edit the “tinyMCE.init” function found within tinyMCE.ascx. The documentation referenced above looks like it’s intended for the 4.x version of tinyMCE, so if you are using BE < 2.9 and are using the default editor (tinyMCE 3.x) check the 3.x documentation(4.x was a major overhaul and many things changed).

The latest versions of BE include tinyMCE 4.x as an option. The important thing is to edit the file containing that “tinyMCE.init” function. In most recent versions of BE it’s at admin/editors/tinymce/editor.js

Modified editor.js as follows – make sure and refresh browser or any other cache to see changes effected.
var editorGetHtml = function () {
    return tinymce.activeEditor.getContent();
}

var htmlContent;

var editorSetHtml = function (html) {
    if (tinymce.activeEditor) {
        tinymce.activeEditor.setContent(html);
    }
    else {
        // If not initialized yet, we need to delay it
        htmlContent = html;
    }
}

tinymce.init({
    selector: '#txtContent',
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste sh4tinymce"
    ],
    
    // Start additional**********************************************
    style_formats_merge: true,
    style_formats: [        
        { title: 'Red header', block: 'h1', styles: { color: '#ff0000' } }       
    ],
    // End additional***********************************************

    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | sh4tinymce",
    autosave_ask_before_unload: false,
    max_height: 400,
    min_height: 160,
    height: 280,
    setup: function (editor) {

        editor.on('init', function (e) {
            
            if (htmlContent) {
                editor.setContent(htmlContent);
            }
        });
    }
});
Feb 16, 2015 at 4:36 PM
"include tinyMCE 4.x as an option" - this was the hint I needed. I thought it was the default. I didn't even realize that "summernote" was the current editor. Once I changed the default editor in the web.config, things started working as I expected (including my customizations).