Rendering TipTap Rich Text Editor in MVC templates

Questions
1

I have yet to see how to apply the same stylesheets for TipTap editor on the front-end side to make it render similar to the backoffice.

Ex: embedded unordered lists in an existing unordered list should change the list-style-type to circle.
It should also add margins to the list.

I just need it to look like it does in the backoffice for consistency.

Thoughts?

2

Would you not be able to reference a stylesheet while configuring the datatype, just like with TiynMCE?

The image displays the "Rich text editor styles" settings for the "styles.css" stylesheet in the Umbraco content management system, allowing definition of styles for the rich text editor. (Captioned by AI)
The image displays the "Rich text editor styles" settings for the "styles.css" stylesheet in the Umbraco content management system, allowing definition of styles for the rich text editor. (Captioned by AI)1391×1021 94.5 KB

This image shows the Umbraco backoffice with the Richtext editor settings, including options for stylesheets, dimensions, and maximum size for inserted images. (Captioned by AI)
This image shows the Umbraco backoffice with the Richtext editor settings, including options for stylesheets, dimensions, and maximum size for inserted images. (Captioned by AI)3817×1121 212 KB

The styles that I see in my backoffice are the same that I can directly inject and use on my frontend.

3

Ah, I didn’t know you could set a style sheet at the RichText Editor level.

Do you know where to find the tiptap style sheet so I can set it?

4

I don’t think you can reference or use the styling for TipTap directly.

AFAIK you should create you own style to align with the platforms design guidelines.

More information can be found in the Umbraco Docs.

5

You can configure a stylesheet in the Data Type configuration for your Tiptap editor. You can select any stylesheet found in the wwwroot/css folder. You can also reference these stylesheets on your MVC frontend:

Reference from the Docs:

Stylesheets
To apply custom styles to the Rich Text Editor, you can select from any existing stylesheets.
Stylesheets can be created in the Settings section. To learn more about this feature, see the Stylesheets in the Backoffice article.

Found here: