https://discord.umbraco.com logo
#package-development
Title
# package-development
d

d_inventor

09/28/2022, 10:49 AM
I've got some instructions from my coworker how they created an extra button in the tiny mce editor, let me try to make a thread here to relay the instructions without polluting the channel
You will need to add these settings to your appsettings.json
Copy code
json
{
    "Umbraco":{
        "CMS":{
            "RichTextEditor":{
                "Commands":[
                    {
                        "Alias": "myplugin",
                        "Name": "My plugin",
                        "Mode": "All"
                    }
                ],
                "Plugins":[
                    "myplugin"
                ]
            }
        }
    }
}
You can probably play with the names here to a certain degree, I am not sure how exact these need to be.
You will also need to write some javascript. Add a file
wwwroot/umbraco/lib/tinymce/plugins/myplugin/plugin.min.js
Copy code
javascript
// register plugin
tinymce.PluginManager.add("myplugin", function (editor)
{
    editor.addButton("myplugin", {
        text: "myplugin",
        style: "background-color:rgb(255, 200, 0); color:rgb(255, 0, 105)!important;",
        classes: "myclass",
        tooltip: "My cool plugin",
        onclick: function () {
            alert("Hello world!");
            // your custom logic can fit here!
        }
    })
});
That should be all you need to create the button, though it's likely not visible yet
The last step is to open your umbraco, go to the rich text editor data type and find your button there and enable it!
My discord isn't currently showing my first message with the appsettings.json configuration. Let me know if you can't see it either or if that's just on my end
j

jnprov

09/28/2022, 1:25 PM
I can see it. I'll give it a shot and get back to you. Thanks to both you and your coworker!
wow... it works. It feels like bolting on a bunch of old crap to a new car, but it works. Thank you so much! Try it out @Ian Houghton
h

hackerman2

11/21/2022, 12:58 PM
Which version of Umbraco is this for?
d

d_inventor

11/21/2022, 2:26 PM
This is for Umbraco 9+
h

hackerman2

11/21/2022, 2:50 PM
Ah okay - I'm on V10 and the
Copy code
wwwroot/umbraco
directory doesn't exist
I think I figured it out though, I just created that path.. Not sure how it will compile but it's working locally 😄
d

d_inventor

11/21/2022, 4:07 PM
I believe, since v10, umbraco uses a razor class library, so the folder doesn't physically exist anymore, but creating it physically shouldn't break anything. That being said, I would recommend the razor class library approach if possible, for its convenience