Cancels the display of less commonly used buttons

Plugins and Custom CSS CSS
#1

Is there any CSS code that prevents bold, italic, underline, quote, and highlight buttons from appearing after selected text?

The buttons in the red circle are shown in the figure below.

These actions are an important part of text editing, but for me, they are rarely needed.

One line of code that might help me is display:none;

But I don’t know exactly where to put this line of code

Thank you!

Quicker_20210531_052639
Quicker_20210531_052639810×67 14 KB

#2

The below snippet does this in one way. One thing to keep in mind is, in case more icons are added to the selected text menu in the future, this snippet may hide those new icons, but you can play with those n numbers in this snippet and display what you want.

div.rich-text-editor__selected-text-menu 
> div.rich-text-editor__selected-text-menu__doc-options 
> span:nth-child(n+6):nth-last-child(n+2) {
    display: none;
}
div.rich-text-editor__selected-text-menu 
> div.rich-text-editor__selected-text-menu__doc-options 
> div:nth-child(n+1):nth-last-child(n+1) {
    display: none;
}

The above gives this.

image

2 Likes
#3

Thanks for your reply!
Your snippet has helped me a lot.