tinymce add search and replace u13

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

David Gregory 85 posts 211 karma points

27 days ago

0

tinyMCE add Search and Replace u13

Hello all

Please could you advise how to add the searchreplace plugin to the tinymce editor in Umbraco 13

I have added this to config

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

but I don't know how to get the icon to appear.

I tried adding

toolbar: 'searchreplace' which worked but then all the other icons disappeared.

David

Copy Link

Farshad 6 posts 76 karma points

24 days ago

To add the searchreplace plugin to the TinyMCE editor in Umbraco 13, you can simply include it in both the Plugins and Toolbar sections in your configuration. This way, the icon will appear alongside the existing toolbar items.

Here's how you can update your configuration (in appsettings.json):

"Umbraco": { "CMS": {
"Content": {
  "RichTextEditor": {
    "Plugins": [ "wordcount", "searchreplace", "autolink", "lists", "link", "table", "image", "media" ],
    "Toolbar": [
      "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | searchreplace"
    ],
    "CustomConfig": {
      "statusbar": "true"
    }}}}}

Copy Link

David Gregory 85 posts 211 karma points

23 days ago

0

Thanks for the reply.

Does this mean then, if I want to add 1 plugin I have to add them all and use this config instead of the one in the backend of Umbraco?

That is to say, do I have to replicate my set up from within the backend in here instead?

There is no way to just add 1 extra plugin in here and the rest will remain as configured in the backend?

Copy Link
Farshad 6 posts 76 karma points

20 days ago
0
Apologies for the confusion. You can add a custom plugin to TinyMCE in umbraco v13 by following these steps:

To start, create your custom plugin JavaScript file in the following path within your Umbraco project:

/App_Plugins/RTEPlugin/plugin.js

Define the Custom Plugin

Within your plugin.js file, register your plugin with TinyMCE’s PluginManager by adding the following code:
```
tinymce.PluginManager.add('contentGenerator', function (editor) {
// Add a custom button to the TinyMCE editor
editor.ui.registry.addButton('generateText', {
    text: 'Generate Text',
    icon: 'custom-generate-icon',
    onAction: function () {
        openGeneratePopup(); // Function to handle the action
    }
});

// Define additional functionality for your plugin as needed});
```
tinymce.PluginManager.add(): Registers your custom plugin with TinyMCE.

editor.ui.registry.addButton(): Adds a custom button to the editor toolbar.

To integrate the custom plugin with Umbraco, update the appsettings.json file with the necessary configuration:
```
"RichTextEditor": {
"CustomConfig": {
    "external_plugins": "{\"contentGenerator\":\"/App_Plugins/RTEPlugin/plugin.js\"}"
},
"Commands": [
    {
        "Alias": "generateText",
        "Name": "Generate Text",
        "Mode": "Insert"
    }
]
```
}

hope this will help you.

You can refer to the TinyMCE documentation, but there will be slight changes when applying it to Umbraco.

https://www.tiny.cloud/docs/tinymce/latest/creating-a-plugin/
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?