CMS Development

DM2
Member

Add a custom 'style' to rich text editor

SOLVE

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

1 Accepted solution
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Add a custom 'style' to rich text editor

SOLVE

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

Anton Bujanowski Signature

View solution in original post

0 Upvotes
2 Replies 2
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Add a custom 'style' to rich text editor

SOLVE

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

Anton Bujanowski Signature
0 Upvotes
DM2
Member

Add a custom 'style' to rich text editor

SOLVE

thanks Anton, I've done something similar.

0 Upvotes