Adding css classes to the rich text editor

[NPeters]

I have previously worked with rich text editors such as tiny MCE, all of these have had some ability to allow adding custom CSS to the config. For example I would like to provide headings styles available that are in colours of the brand.

https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x@content_css/

How can I do this?

I would also like to be able to target the container which the default rich text module uses: I can see that the class widget-type-rich_text is there. Is this a safe class to target in my css?

[NPeters]

Looking at this again. For DnD pages, the only real way I could find something that worked was using: data-hs-cos-type="rich_text".

[albertsg]

Hi @NPeters, if you inspect the code, you will notice that Hubspot wraps every rich text editor (even the "default" one in Blog posts) with some unique IDs and classes, something like:

<span id="hs_cos_wrapper_post_body" class="hs_cos_wrapper hs_cos_wrapper_meta_field hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="meta_field" data-hs-cos-type="rich_text">

With that information, you can easily do a CSS file and add it to your page, so when you are editing something in a rich text editor you will already see the new styles. 

But the same will happen if you just have a CSS file for all your styles in your page, you should be able to see the styles also when editing the rich text editor.

Also, remember you can see the Source Code in a rich text editor, so you can easily add classes to your elements. 

But in general, all styles you have in your page should also apply to the editor, so just make sure you are targetting properly the elements in your page using CSS.

[NPeters]

Thank you for both your inputs! Both valid solutions.

I should have clarified, the purpose of the custom dropdown classes is not for me the Developer who can do this manually, but for the non-technical content editors who cannot.

Typically when I setup custom class dropdowns I liken it to the preset text styles that they are accusomted to in MS Word.

As a Developer these are features that I use in WYSIWYG editors to make the end user experience more palatable.

[webdew]

Hi @NPeters ,

Class widget-type-rich_text is not safe class.
Use Richtext id https://prnt.sc/13plhdu you can style as per ID refrence.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

[John]

With the levels of customization that you are wanting, it sounds like you'll want to make your own Rich Text module and/or Heading module. You can limit the functionality of the RT field in custom modules, and you could even separate out headings into their own headings custom module. From there you can provide custom options and styles that match brand guidelines as well as custom classes.

[NPeters]

So for example I would like to a intro style paragraph. In my css I have a class:

.intro-text {}

In TinyMCE I would add the class as a option to the config. That would enable a Editor to see the custom class in the text styles dropdown.

[John]

Unfortunately you're not gonna be able to replicate that TinyMCE feature. But you can get somewhat close to that with custom modules and you can make your module part of your theme so it will show above all other "common modules" in a drag and drop editor – minimizing confusion to content editors.

[DanielSanchez]

Hi @NPeters ,

You can test if 2 rich text fields from different pages use the same class. If yes then it is safe to use.

There are also 2 paths:

1 - Edit your page template and insert a class in the module or flexible column that will be using Rich Text;

2 - In Rich Text click on "Advanced" and "Source Code" and insert a DIV with class around your content.

Did this post help solve your problem? If so, please mark it as a solution.

Best! 🙂

[NPeters]

I am using the native HubSpot rich text editor. There is no option to wrap a div around it. That forces me to make a duplicate module for rich text editing! How can I hide the native rich text editior from the list of module options?

Having duplicate modules will confuse our content editors.