How do I configure TinyMCE for Optimizely?

I did a few things recently, and I'd like them recorded.

Additional Posts

Almost every site has a very similar config so I'm going to just skip to the goods.

new { title = "Column Container", classes = "column-row", block = "div",  selector = "*", style_formats_merge = false },
new { title = "50%", classes = "column-6",  inline = "div", selector = "div.column-row", style_formats_merge = false },

Title - This property is how the editor will see the item in whatever list it is in

Classes - This property is a list of the classes that will be toggled by the button

Block - This will convert the current selected block into the specified tag. For example based on the code above, if my cursor is IN or selecting text inside of a <p> tag, That <p> tag will be converted to a div, and have the classes column-row added.

inline - This is similar to block, however this changes the Selected text, and not the select text's container. For example based on code above. I have a div.column-row, and I select some text within, I can now convert that to a <div> and add the column-6 class, INSIDE of the wrapping div.

Creating a plugin (in Optimizely 12)

Note: Optimizely 12, and TinyMce v2 (aka v4)

Your-Plug-Code.js:

tinymce.PluginManager.add('name of your plugin', function (editor, url) {
    editor.addButton('shortcode', {
        text: 'Short Code',
        onClick: function () {
           
        },

    });


    return {
        getMetadata: function () {
            return {
                name: 'plugin name',
                url: "required URL, but we don't need since this isn't public"
            };
        }
    };
});

TinyMceConfig.cs:

//...
    .AddExternalPlugin("name of your plugin", "/static/js/tinymce/shortcode.min.js")

This needs to have the same exact name to load. Your file path just needs to be accessible to the editor.

Note: More details can be found in the Gate City Bank Project, look for Tokenizer

Creating Multiple TinyMCE configs

services.Configure<TinyMceConfiguration>(config => 
{
    // Default config settings
     config.Default()
         // Additional default settings go here
        .ContentCss("editor.css")
        .AddSetting("style_formats_autohide", true);

    // Custom config settings
      config.Default()
         .Clone() //clones the default config as defined above
         .ContentCss("simple-editor.css"); // this overrides the default content css 
        // setting "style_formats_autohide" will be automatically be included in this
        // custom config since we're cloning the default config
};

.Clone() is important when defining additional configs. If you don't, it overrides previously defined default configs. Clone() also pulls in everything from the default config, so if you create a custom external plugin (like John did above) you only need to add the external plugin config once in the default config.