how to customize rte editor style in backoffice

Go to solution

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

Marc-André 63 posts 279 karma points

Jun 07, 2019 @ 18:56
0

How to customize RTE editor style in backoffice

Extending Umbraco and using the API

Umbraco 8
Hello!

I've created a custom RTE object to use in a grid content. I was wondering if there's anyway to add a background color to this object in the backoffice.
```
    <div ng-controller="Umbraco.PropertyEditors.Grid.RichTextEditorController as vm">

        <grid-rte
            configuration="model.config.rte"
            value="control.value"
            unique-id="control.$uniqueId"
            style="background: red"
        >
        </grid-rte>

    </div>
```
Copy Link
Lewis Logan 21 posts 132 karma points

Jun 11, 2019 @ 15:54
100
Hi Marc-André,

I wouldn't be able to give you an Umbraco 8 specific answer but on Umbraco 7 I made a plugin to change the style of the back office.

I added a folder into the /App_Plugins folder named BackOfficeStyles then added JS and CSS files there with a package.manifest file that looked like this:
```
{
    "css" : [ "~/App_Plugins/BackOfficeStyles/backoffice.css" ]
    ,
    javascript: [ 
        "~/App_Plugins/BackOfficeStyles/backoffice.js",
         "~/app_plugins/Services/userinfo.resource.js"
        ]
}
```
With this setup you could add a class name to your rte div and change the styles in CSS.

Hope this helps!

Kind Regards, Lewis
Copy Link
Marc-André 63 posts 279 karma points

Jun 17, 2019 @ 14:12

1

Thanks! I added a css file and a class to my "ng-controller" div and it did the trick

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?