Customizing the Rich Text Editor – Removing Toolbar Elements

💬 App Building
1

I'm using the Rich Text Editor component in Retool and would like to customize its toolbar. Specifically, I want to keep only the font color and background color options while hiding or removing all other formatting options (bold, italic, lists, etc.).

Is there a way to achieve this using built-in settings or custom configurations? If not, is there a workaround (e.g., CSS overrides or custom JavaScript) to modify the toolbar?

Thanks!
Screenshot 2025-02-18 102046

2

Hey @Islam_AlAfifi ,

Currently, it's not possible to edit the tooltip of the Rich Text Editor component directly. However, I have a solution for you:
you can use Quill.js Library for a customizable toolbar text editor. Here's a relevant forum post you can check out:

4 Likes
3

Thanks for the tip. I've used .ql and with display none to hide the unwanted items. It's sufficient for my case.


#richTextEditor1 .ql-toolbar,
#richTextEditor2 .ql-toolbar {
    display: flex !important;
}


#richTextEditor1 .ql-bold,  
#richTextEditor1 .ql-italic,  
#richTextEditor1 .ql-underline,  
#richTextEditor1 .ql-strike,  
#richTextEditor1 .ql-header,  
#richTextEditor1 .ql-list,  
#richTextEditor1 .ql-blockquote,  
#richTextEditor1 .ql-code-block,  
#richTextEditor1 .ql-script,  
#richTextEditor1 .ql-indent,  
#richTextEditor1 .ql-direction,  
#richTextEditor1 .ql-link,  
#richTextEditor1 .ql-image,  
#richTextEditor1 .ql-video,  
#richTextEditor1 .ql-clean,  
#richTextEditor2 .ql-bold,  
#richTextEditor2 .ql-italic,  
#richTextEditor2 .ql-underline,  
#richTextEditor2 .ql-strike,  
#richTextEditor2 .ql-header,  
#richTextEditor2 .ql-list,  
#richTextEditor2 .ql-blockquote,  
#richTextEditor2 .ql-code-block,  
#richTextEditor2 .ql-script,  
#richTextEditor2 .ql-indent,  
#richTextEditor2 .ql-direction,  
#richTextEditor2 .ql-link,  
#richTextEditor2 .ql-image,  
#richTextEditor2 .ql-video,  
#richTextEditor2 .ql-clean {  
    display: none !important;  
}
1 Like
4

Hey @Islam_AlAfifi ,

The solution works perfectly, and I haven’t encountered any issues. However, it may not be a permanent fix if Retool updates the component class, as changes could occur automatically. I would prefer not to rely on CSS in such a case, but if class names remain unchanged after updates, your CSS solution would be a reliable long-term fix. Thank you for providing the CSS. :slightly_smiling_face:

3 Likes
5

Got it! Thanks so much for the insights.

6

I'm not great at CSS so this might make more problems instead of prevent them but couldn't you do something bellow isntead of listing out all the possible classes?

#rightTextEditor2[class^="ql-"]{
    display: none !important;
}
7

Yeah, but the idea here is to keep the font and background colors while hiding all the other elements.

1 Like