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 87 posts 233 karma points
    Oct 28, 2024 @ 12:20
    David Gregory
    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

  • Farshad 8 posts 78 karma points
    Oct 31, 2024 @ 10:25
    Farshad
    0

    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"
        }}}}}
    
  • David Gregory 87 posts 233 karma points
    Nov 01, 2024 @ 10:19
    David Gregory
    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?

  • Farshad 8 posts 78 karma points
    Nov 04, 2024 @ 04:52
    Farshad
    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/

Please Sign in or register to post replies

Write your reply to:

Draft