Vaadin: ограничить доступные опции форматирования RichTextArea

Question

Я хотел бы разрешить только следующие параметры формата в виде RichTextArea

• Regular
• Жирный
• Курсив
• Подстрочный/Надстрочные

Я не могу найти никаких подсказок о том, как это сделать. За исключением информации, которая составляет> 4 года.

Любая помощь в том, как архивировать это, очень ценится. Благодаря!

Answer 1

Информация по-прежнему верна, для этого требования нет API. Вам необходимо внести изменения в стили RichTextArea. См. Vaadin RichTextArea Docs.

Если вы посмотрите на сгенерированные стили vaadin, вы можете найти стили, начинающиеся с «.v-richtextarea .gwt-RichTextToolbar». На основе семейства шрифтов «ThemeIcons» на кнопочные и ToggleButton определяются следующим образом:

.v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Bold"] { 
    content: "\f032"; 
} 

Чтобы отключить кнопки, эти параметры должны быть перекрыты с «дисплей: нет». Чтобы избежать каждую кнопку, чтобы обрабатываться как это, вы можете изменить стиль для ToggleButton и PUSHBUTTON:

.v-richtextarea .gwt-ToggleButton, .v-richtextarea .gwt-PushButton { ... } 

Требования:

• Вы просто хотите увидеть переключаемых Кнопки для Bold, Текст курсива, подстрочный и надстрочный текст, ничего больше.
• Для регулярного повторного форматирования я снова включил кнопку «Удалить форматирование».
• Я полагаю, вы также хотите, чтобы кнопки были выровнены влево без каких-либо зазоров.

Решение (работает в современных браузерах):

Изменить/Override стилей и перекомпилировать их для вашего приложения.

1.) Отключите нижнюю панель инструментов (содержащий раскрывающиеся окна):

.gwt-RichTextToolbar-bottom { display: none; } 

2.) Отключить все кнопочные

.v-richtextarea .gwt-PushButton { 
    display:none; 
} 

3.) Не изменяйте необходимые переключаемых кнопки для Жирный , Курсив, подстрочный индекс и надстрочный индекс; исходные параметры:

.v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Bold"]:before { 
    content: "\f032"; 
} 
.v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Italic"]:before { 
    content: "\f033"; 
} 
.v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Subscript"]:before { 
    content: "\f12c"; 
} 
.v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Superscript"]:before { 
    content: "\f12b"; 
} 

4.) Отключить конкретные ToggleButtons:

.v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Underline"] { 
    display:none; 
} 
.v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Strikethrough"] { 
    display:none; 
} 

5.) Снова включите «Удалить форматирование» КНОПКА унаследовав бывший стиль PushButton удален для всех остальных кнопочные в 2.)

.v-richtextarea .gwt-RichTextToolbar-top div[title="Remove Formatting"] { 
    content: "\f12d"; 
    display: inline-block; 
    line-height: 37px; 
    width: 37px; 
    text-align: center; 
    outline: none; 
} 

Если вы хотите работать с встроенной RichTextArea и изменить этот материал подробно вы в настоящее время нужно справиться со стилями. Или вы попробуете другой компонент RichText/Wysiwyg, предложенный как Vaadin Addons.