Customizing the Rich Text Editor – Removing Toolbar Elements

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

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

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

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

Got it! Thanks so much for the insights.

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;
}

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

1 Like