Hi

This is going to require some custom development. If it was me I would try and avoid creating a new RTE and see if I could extend the existing RTE without breaking the upgrade path.

It's generally better to extend than modify and try and follow SOLID approach to development

One approach is to add a new button and write a new plugin to trigger the logic you need.

There already appears to be a public function that might help (loadCSS)

I have created plugins in the past to add buttons that create custom logic so it definitely possible.

Alternatively, you might want to explore templates in TinyMCE this is a way to inject custom html into the RTE and could give you the flexibility you need to tailor layouts.

If you really want to create your own RTE then it's worth having a look at this repo by a friend of mine.

I hope this helps.

Thanks for the comprehensive aswer!! I totaly agree with you that extending is the best option.

What I had in mind is when the tinymce is loaded I'd add the css to Tinymce. Not as a format but as styling I'll define the formats in another stylesheet the umbraco way.

In javascript I would listen to the init and add the stylesheet but I'm new to angular and I can't find how the init works in Umbraco backofice...

Hi

I'm afraid I have only tweaked with the css formats in the past.

When you talk about styling do you mean changing the look of the UI of the RTE editor?

You can more generally modify the UI without breaking the upgrade path via http interceptors but this is more about hijacking views and replacing them with your own.

Generally as a principle this is not a great idea as the UI is being modified from the way the core product looks / works but if needs must, it is a way to do it.

I'm sorry I'm not the best at explaining :P

What I have:

main.css with the format styles

• h1
• h2
• other custom format.

theme.css

This is a normal css file I want to use to change for example the color of the formats in the rte dropdown and the editor.

Hi

I understand now but the above is about my limit on this stuff as I am a newbie to angular. However, looking at this article I think it might help cast some light on how to get it working. Hopefully another member of the community can help you further.

The Json configuration behind the RTE looks like it would need you to insert the theme.css into the stylesheet array but I'm not sure how to do this sorry. Presumably you would need to append a parent style class to the editor and then this would allow you to increase the specificity on the theme classes to apply the overrides to the formats without the need of duplicating the original css format styles.

  $scope.myProperty= {
        label: 'bodyText',
        description: 'Load some stuff here',
        view: 'rte',
        config: {
            editor: {
                toolbar: ["code", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "umbmacro", "table", "umbembeddialog"],
                stylesheets: [],
                dimensions: { height: 400, width: 250 }
            }
        }

Please re-post the solution once you sort it, I would be very interest to know how you did it.

is working on a reply...