I ve got some instructions from my coworker how they created Umbraco #package-development

I've got some instructions from my coworker how th...

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

D_Inventor

09/28/2022, 10:50 AM

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.

D_Inventor

09/28/2022, 10:52 AM

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

D_Inventor

09/28/2022, 10:52 AM

The last step is to open your umbraco, go to the rich text editor data type and find your button there and enable it!

D_Inventor

09/28/2022, 10:53 AM

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

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!

jnprov

09/28/2022, 1:40 PM

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

hackerman2

11/21/2022, 12:58 PM

Which version of Umbraco is this for?

D_Inventor

11/21/2022, 2:26 PM

This is for Umbraco 9+

hackerman2

11/21/2022, 2:50 PM

Ah okay - I'm on V10 and the

Copy code

wwwroot/umbraco

directory doesn't exist

hackerman2

11/21/2022, 2:54 PM

I think I figured it out though, I just created that path.. Not sure how it will compile but it's working locally 😄

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

Previous Next