Create Tiny MCE Snippets

Daniel Söderberg

Vote:

Does anyone have any example how you create a snippet for the Tiny MCE editor and then integrate it in the editor. For example I would like to create a snippet that inserts a div with a class named "highlight".

Thanks!

#82441

Mar 12, 2014 13:06

Daniel Söderberg

Vote:

Anyone please?

#82664

Mar 18, 2014 8:30

Linus Ekström

Vote:

Not sure if this works for the Tiny MCE version in EPiServer (3.5 if you are using EPiServer 7.1+), but have you checked this http://www.tinymce.com/wiki.php/plugin:template ?

#82679

Mar 18, 2014 10:19

Vote:

Having to complex things in a Editor init module will tend to break because of the JSON parser used. This could be the case when trying to hookup the template plugin but I'm not sure.

We have built a TinyMCE-plugin once to handle something similiar. In our case we showed a dropdown and a button in it's own tool window.

This works for 6 R2 (should work for 7 as well but you'll have to place your plugin dir elsewhere).

Add a plugin definition to project:

namespace Example.Project.Plugins.TinyMCE
{
    using EPiServer.Editor.TinyMCE;

    [TinyMCEPluginButton(
        LanguagePath = "/tinymce/examplebox",
        GroupName = "media",
        ButtonSortIndex = 21,
        ButtonName = "btnExampleBox",
        PlugInName = "ExampleBox",
        IconUrl = "/Util/Editor/TinyMCE/Plugins/examplebox/i/examplebox.png",
        DisplayName = "Informationsruta",
        Description = "Infogar en informationsruta"
    )]
    public class ExampleBox
    {
    }
}

I've removed the VPP hookup for Util and copied it to a local path below the project and added my plugin directory among the regular ones but for 7 you need to store it elsewhere, haven't looked into the specifics for this (yet).

In your plugin directory (named examplebox if above code is used) you have a editor_plugin.js file where you can do windowManager.open() and open a HTML-file. Could be a dropdown and a button or if no options need to be made you can do stuff directly on the button click from editor_plugin.js.

Typically something like this:

var box = '<div class="some-class"><p>non breaking space</p></div>';

if (n.nodeName == 'P') {
  e.dom.setOuterHTML(n, e.dom.getOuterHTML(n) + box);
}
else {
  e.selection.setContent(box);
}

#82691

Mar 18, 2014 11:55

Henrik Fransas

Vote:

Look at this guide, we have followed it and done what you like to do:
http://world.episerver.com/Documentation/Items/Developers-Guide/EPiServer-CMS/75/Editing/Customizing-the-TinyMCE-editor/

#82838

Mar 20, 2014 11:18

Try our conversational search powered by Generative AI!

Create Tiny MCE Snippets