Add a custom 'style' to rich text editor

Developer Support CMS Development
1

When you edit a text area (rich text/header etc) in Hubspot page edit view you get the toolbar at the top with various formatting options - Style / Font / Size / Bold / Italic / Underline etc… is it possible to add a custom option to the ‘Style’ list?

I’d like to add some custom classes in my css that I can then allow the end user to select in that area. similar to ‘Blockquote’ I guess…

Thanks

2

Hi @DM2,

it’s not possible to modify the rich-text editor.

You could write a simple custom module.

You’ll need only two widgets.

- a “Select” widget

- a text field(you can use a rich-text)

First:

create a new module

Second:

Add the two widgets to the module.

Third:

Add all the “html tags” as values to the select options. Naming is up to you

Forth:

Write the default code for the module

<> </>

Fifth:
Insert the value of the select widget into the brackets(it will highlight as error but it’s no error). E.g if you name the select widget “custom_html_attribute” the code should look like this:

<{{module.custom_html_attribute}}>

</{{module.custom_html_attribute}}>

Last Step:

Add the text module between the tags. If you name it “custom_content” the code should look like this

<{{module.custom_html_attribute}}> 
{{module.custom_content}}
</{{module.custom_html_attribute}}>

best,
Anton

3

thanks Anton, I’ve done something similar.