Virtual Happy Hour this month, Jun 28, we'll be getting a sneak preview at our soon to launch SaaS CMS!

Try our conversational search powered by Generative AI!

Create Tiny MCE Snippets

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
Vote:
 

Anyone please?

#82664
Mar 18, 2014 8:30
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
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
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.