Umbraco 11 tinymce premium plugins

[ordo123]

I can't for the life of me figure out how to enable tinymce premium plugins (such as powerpaste) for Umbraco 11.
Is this something that is possible today? It's a massive loss going from umbraco 8 to 11 where this feature is lost.

If not there should be a documented way of purchasing and adding the premium tinymce plugins to umbraco 11.

[iOvergaard]

Hello, @ordo123

Umbraco 11 saw an upgrade of TinyMCE from the long-deprecated version 4 to the latest version 6 in an effort to avoid using outdated software inside Umbraco. Some of the plugins for TinyMCE 4 have been converted into the core functionality of TinyMCE 6. Unfortunately for some people, some of the features they were using have been split into Core functionality and Premium plugins including the former 'paste' plugin, which is now known as PowerPaste.

Umbraco is currently using the self-hosted version of TinyMCE, which is free for everyone to use because it is licensed under the MIT License just like Umbraco itself. This version of TinyMCE comes with a lot of functionality out of the box including a host of plugins that are pre-enabled. More plugins can be enabled using the Advanced Rich Text Editor Configuration available through appsettings.json.

As an example to enable the "wordcount" plugin, you can add the following configuration (the statusbar is required to be shown to show the wordcounter):

"Umbraco": {
  "CMS": {
    "RichTextEditor": {
      "CustomConfig": {
        "statusbar": "true",
      },
      "Plugins": ["wordcount"]
    },
  }
}

Premium plugins from Tiny
To use premium plugins as they come out of the box, you will have to use another kind of TinyMCE, namely the Tiny Cloud-Hosted version of TinyMCE. This is for all intents and purposes the same editor as the self-hosted version, but it is considered its own product entirely. Umbraco does not ship with other rich text editors than the self-hosted version of TinyMCE 6.

It is theoretically possible to install other rich text editors such as the Cloud-hosted version by building your own property editor, which is the ideal way of introducing a new editor not only limited to TinyMCE.

Downloaded plugins
There may be the possibility that you have downloaded a plugin (free or premium otherwise) and want to use that, or that you have built your own plugin. In those cases, you can load them using the aforementioned advanced configuration and specifying the external_plugins option.

An example of that looks like the following for your appsettings.json file with the plugin located in App_Settings -> myrte -> myrte.plugin.js:

"Umbraco": {
  "CMS": {
    "RichTextEditor": {
      "CustomConfig": {
        "external_plugins": "{\"myrteplugin\": \"/App_Plugins/myrte/myrte.plugin.js\"}"
      }
    }
  }
}

From there, you have access to the full API of TinyMCE on the tinymce object.

I am not sure if you can download plugins such as Power Paste, but if you can, this would be the way to load that and any other external plugins.

Stay tuned for updates to the Umbraco Documentation as well. We might extend the documentation regarding the Rich Text Editor and TinyMCE with more advanced use cases.

[iOvergaard]

For the sake of posterity, here is a custom plugin that adds a button to the toolbar in Umbraco 11 using TinyMCE 6.5.1: https://gist.github.com/iOvergaard/58776afb88e3359649d3457707a13401

[iOvergaard]

I just wanted to circle back around to this discussion since we now have some news to share:

We have planned a modification of the rich text editor for Umbraco 13.1 that enables developers to activate premium plugins for TinyMCE. You will need to provide your own tiny.cloud API key, and Umbraco will then load the premium plugins through Tiny's cloud service, which is known as a "cloud deployment of plugins only".

You can see the pull request enabling this here: #15367

The documentation will be updated when the time comes.