Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Chris Kim 48 posts 254 karma points c-trib
    Oct 14, 2022 @ 02:32
    Chris Kim

    Custom TinyMCE plugin with infinite editor

    I am building a custom TinyMCE plugin, which adds a button to the rich text editor. On click of the button, we open a form that allows the user to search and select a search result. On the callback from selecting a result, the markup in the rich text editor is updated to insert some special markup.

    This works using a "popup" by invoking, however, that doesn't feel very "Umbraco".

    It would be much nicer if I could define an infinite editor for the search and results interface, but I can't figure out how to piece those together.

    The tinymce plugin code sits in wwwroot/umbraco/lib/tinymce/plugins/[myplugin]/plugin.min.js and uses plain js with a tinymce.PluginManager.add directive. I don't think I can get to the Umbraco editorService from here to open the infinite editor?

    I had a look at the Umbraco source code to see how the media picker button etc work. This all appears to be happening within the and within that in the initializeEditor method.

    I was thinking my code should go into App_Plugins instead so I can create an AngularJS controller that inherits editorService (and possibly tinyMceService), but then how would that even get added to the rich text editor?

    I also started looking into using directives to extend the default implementation (, but this seems like a bit of a black box and I haven't found what directive I would extend for the RTE.

    Any ideas how I can do either of the following?

    1. Get the editorService in my TinyMCE plugin (pure JS)
    2. Put AngularJS code in App_Plugins that would allow me to add the button to the RTE


Please Sign in or register to post replies

Write your reply to: