Как настроить панель инструментов Composer?

Внести вклад Функция
1

Интересует, можно ли настроить, какие кнопки отображаются (и в каком порядке) на панели инструментов «Новая тема».

Конкретно я хочу заменить кнопку «Дата/время» на кнопку «Добавить событие». Кнопка «Дата/время» просто вызывает путаницу у новых пользователей, а в нашем контексте важно выделить именно события. Объяснять пользователям, что сначала нужно проигнорировать кнопку с видом календаря, нажать на значок шестерёнки, а затем нажать на другой значок с видом календаря, — не самое лучшее решение, учитывая, что в нашем сообществе много людей, не связанных с технологиями, и пожилых пользователей.

Я видел темы о настройке самой кнопки «Новая тема», но не о настройке самой панели инструментов.

3 лайка
2

Мне тоже интересно по этому поводу. Мы недавно добавили инструмент в панель инструментов редактора, и из-за этого значок :gear: переместился на следующую строку.

CleanShot 2024-08-27 at 10.44.59
CleanShot 2024-08-27 at 10.44.59644×386 17.4 KB

1 лайк
3

Настроек для конфигурации панели инструментов нет, но это можно сделать с помощью тем и плагинов.

Было бы здорово иметь такую функцию, поэтому я перекатегорирую этот запрос как предложение по улучшению.

На данный момент кнопки можно скрыть с помощью CSS, например:

.d-editor-button-bar {
  .local-dates {  // скрывает кнопку даты
    display: none;
  }
}

или чтобы скрыть опцию из меню :gear:

.toolbar-popup-menu-options {
  [data-name="Build Poll"] {
    display: none;
  }
}

С помощью CSS также довольно просто изменить порядок элементов в этих меню… можно сделать что-то вроде:

.d-editor-button-bar {
  .local-dates {  // перемещает кнопку даты в начало
    order: -1;
  }
}

У нас есть руководство о том, как изменить CSS, по этой ссылке:

Сказав всё это, более сложным изменением является перемещение элемента из выпадающего меню в основную панель инструментов или наоборот. Вам потребуется скрыть оригинальную кнопку с помощью CSS, а затем добавить дублирующую кнопку через API.

Посмотрите на пример компонента темы, например Discourse Gifs, чтобы получить общее представление о том, как это делается… хотя это может быть сложно, если вы не разработчик.

9 лайков
How to customize editor button? (remove couple option)
Add markdown to selected text
"Quote whole post" button location
How to customize editor button? (remove couple option)
4

Для меню :gear:

Когда я попытался написать это таким образом, порядок отображения не изменился.
PS: display: none; тоже не сработал.

.toolbar-popup-menu-options {
  [data-name="Создать событие"] {
    order: -1;
  }
}

Следующий синтаксис работает как ожидалось, перемещая «Создать событие» наверх.

.select-kit-collection {
  display: flex;
  flex-direction: column;
}

.select-kit-row[data-name="Создать событие"] {
  order: -1;
}

Я не очень хорошо разбираюсь в CSS, ChatGPT помог создать код выше.

1 лайк
5

Да, это действительно необходимо. Не просто опция «по умолчанию» для всех пользователей, но затем каждый пользователь мог бы настроить её сам, ведь не всем нужна кнопка для выделения текста «жирным», «курсивом» или даже «Спросить ИИ».

Но пока что возможность хотя бы перемещать элементы глобально и добавлять их в скрытое меню с шестерёнкой уже помогла бы.

На моём экране 13 дюймов места становится всё меньше (я всегда стараюсь оставлять видимой часть оригинальной темы для цитирования и т. п.):

image
image1013×596 51.4 KB

6

Мне интересно: как вы добавили эту заметку «требуется 20 символов», и показывает ли она, сколько символов уже ввёл пользователь?

А как насчёт заголовка?

7

Честно говоря, я не совсем уверен. Это было установлено в сообществе, которое я раньше вёл (но больше не веду). Выглядит это так, найти можно здесь.

2 лайка
8

Спасибо! Это именно то! :raising_hands:

1 лайк
9

У меня на форуме тоже есть пожилые пользователи, и мне неловко объяснять им это.

Шестерёнка — тоже очень непонятный символ для обозначения «есть ещё что-то». Может, три точки (многоточие) будут уместнее? Есть ли простой способ изменить значок?

Ещё одна проблема, с которой я столкнулся: на мобильных устройствах есть небольшой значок «гамбургер», который скрывает/показывает панель инструментов, и по умолчанию он отключён. Это вызывает гораздо больше путаницы, чем пользы. Я отключил его:

.composer-controls .toggle-toolbar {
  display: none;
}

.d-editor-button-bar {
  display: grid !important;
}
10

Привет! Я хотел бы узнать, по-прежнему ли рекомендуется этот метод или он затронут этим?

1 лайк
11

Использование api.onToolbarCreate из инициализатора .js всё ещё поддерживается :+1:

Тема, на которую вы ссылаетесь, касается только включения JavaScript в теги <script type="text/discourse-plugin">.

3 лайка
12

Привет,

У меня иконка «создать событие» размещена справа и вне меню «+», но вы можете разместить её слева, следуя этим инструкциям:

1° В заголовке вашей темы в админке > внешний вид > тема > редактировать > редактировать код > head добавьте этот JavaScript:

<!-- Custom Create Event Button (Icon-based, Language-proof) -->
<script>
(()=>{const e=".d-editor-button-bar",t=".btn.no-text.fk-d-menu__trigger.toolbar-menu__options-trigger.toolbar__button.options.toolbar-popup-menu-options",n=".fk-d-menu__inner-content",o=".d-modal.fk-d-menu-modal",c=e=>{const t=e.querySelector('svg use[href="#calendar-day"]');return t?t.closest("button"):null},r=(e,t,n=4e3)=>new Promise((o,c)=>{const r=t(e);if(r)return o(r);const l=new MutationObserver(()=>{const n=t(e);n&&(l.disconnect(),o(n))});l.observe(e,{childList:!0,subtree:!0}),setTimeout(()=>{l.disconnect(),c()},n)}),l=(e=4e3)=>{const t=new MutationObserver(()=>{document.querySelector(o)&&(t.disconnect())});t.observe(document.body,{childList:!0,subtree:!0}),setTimeout(()=>t.disconnect(),e)},s=e=>{if(e.querySelector(".custom-create-event-btn"))return;const o=document.createElement("button");o.className="btn no-text btn-icon toolbar__button link custom-create-event-btn",o.title="Create event",o.innerHTML='<svg class="fa d-icon d-icon-calendar-day svg-icon"><use href="#calendar-day"></use></svg>',e.appendChild(o),o.addEventListener("click",async()=>{const e=document.querySelector(t);if(!e)return;e.click();let o=document.querySelector(n);o||(await new Promise((e,t)=>{const c=new MutationObserver(()=>{(o=document.querySelector(n))&&(c.disconnect(),e())});c.observe(document.body,{childList:!0,subtree:!0}),setTimeout(()=>{c.disconnect(),t()},2e3)}));try{(await r(o,c)).click(),l()}catch{}})},u=new MutationObserver(()=>{const t=document.querySelector(e);t&&s(t)});u.observe(document.body,{childList:!0,subtree:!0});const d=document.querySelector(e);d&&s(d)})();
</script>

2° Если вы хотите, чтобы иконка была слева, а не справа: на той же странице администратора вы найдёте вкладку CSS, куда можно добавить следующее:

.btn.no-text.btn-icon.toolbar__button.link.custom-create-event-btn { order: -1; }

3° Бонус: если вы хотите, чтобы эта кнопка была видна в этом месте только в определённых категориях, используйте скрипт здесь и измените условия, указав названия ваших категорий: Discourse Calendar (and Event) - #547 by opcourdis

image
image1034×334 33.8 KB

1 лайк
13

Огромное спасибо @david и @opcourdis за полезные ответы.

2 лайка