Как правильно настроить кнопки панели инструментов Jodit с индивидуальным порядком и группировкой?
Я хочу настроить jodit для использования определенных кнопок в порядке и группах по моему выбору. Например: (Отменить-Повторить-Разделитель) группа; (Жирный шрифт — курсив — подчеркивание — разделитель) группа; И т. д. Также есть возможность смешивать пользовательские кнопки. Как я могу это сделать?
Я попробовал как использовать опцию «кнопки» в конфигурации Jodit make, которая позволяет легко включать кнопки по умолчанию, так и включать пользовательские кнопки, но не позволяет мне создавать группы.
buttons: [
'undo',
'redo',
'italic',
'bold',
{ name: 'foo', text: 'bar', exec: () => { ...}
]
Я также попробовал использовать этот метод:
editor.toolbar.build([
new UIGroup(
editor,
[editor.toolbar.buttons.find(b => b.name === 'undo')],
{ name: 'undo' }
),
new UIGroup(
editor,
[editor.toolbar.buttons.find(b => b.name === 'redo')],
{ name: 'redo' }
),
new UIGroup(
editor,
[new UISelect(
editor,
{
name: 'select-dropdown',
options: [
{ value: 'a', text: 'a' },
{ value: 'b', text: 'b' },
{ value: 'c', text: 'c' },
]
}
)],
{ name: 'select-dropdown' }
),
используя систему пользовательского интерфейса, предоставленную Jodit, и это позволит мне легко использовать кнопки по умолчанию и включать разделители/группировки с помощью UISeparator, но UIButton не имеет свойства exec, поэтому я не знаю, можно ли добавить пользовательские функции . Это также невероятно громоздко, и, очевидно, UISelect не работает должным образом: Скриншот
Каков правильный способ сделать это? Заранее большое спасибо.
Ответы 1
Мне немного неясно, хотите ли вы визуального разделения или фактической группировки с раскрывающимся списком. Просто для визуального разделения можно использовать какие-нибудь разделители, например | между кнопками или --- для разделения:
buttons: [
'undo',
'redo',
'|',
'italic',
'bold',
'---',
{ name: 'foo', text: 'bar', exec: () => {} },
],
Также можно сгруппировать кнопки с помощью раскрывающегося списка или, если вы хотите сгруппировать их вместе, чтобы они не разделялись на меньшие окна, можно использовать «группу:». Я приведу пример: вы перечисляете кнопки вместе, но добавляете любые пользовательские функции в элементы управления:
const editor = Jodit.make('#editor', {
buttons: [
'fontsize',
'|',
{
name: 'group1',
text: 'Group 1',
list: {
undo: 'undo',
redo: 'redo',
customButton1: 'Custom 1',
},
},
{
name: 'group2',
text: 'Group 2',
id: '2',
class: 'gr-2',
list: {
bold: 'bold',
italic: 'italic',
underline: 'underline',
customButton2: 'Custom 2',
},
},
'---',
{
group: 'group3',
buttons: ['bold', 'italic', 'underline', 'customButton1']
},
],
controls: {
customButton1: {
text: 'Custom Button 1',
exec: () => {
editor.value = 'Hello';
},
},
customButton2: {
text: 'Custom Button 2',
class: 'btn-2',
exec: () => {
editor.s.insertHTML('<p>Hello</p>');
},
},
},
});
В документации не хватает подробностей, поэтому я время от времени находил решения при попытке реализовать Jodit. Пытаясь ответить на ваш вопрос, я узнал о «---» и «группе:», поскольку сам использовал только «|». и 'list:' для группировки кнопок. О '---' я нашел это, прочитав проблему GitHub и исправление: github.com/xdan/jodit/issues/713 github.com/xdan/jodit/commit/… '-- -' переместит следующие за ним кнопки на другую сторону панели инструментов, так что имейте это в виду. Если просто разделение, то '|' лучше.
Честно говоря, это то, что я искал: возможность настраивать группы панелей инструментов и кнопки так, как мне нравится. где ты нашел эту информацию? '|' и '---' "магические строки" для разделителей и пробелов, которые я бы никогда не понял.