Formatting toolbar

[Steven]

Я не думаю, что смогу сделать что-то подобное. Когда я создавал плагин, мы еще не использовали FontAwesome5, и я не нашел подходящей иконки для отступа вправо. Если у вас есть

Но если вы хотите изменить кнопку по умолчанию, у вас есть два варианта:

• Вы можете форкнуть плагин на GitHub и отредактировать этот файл: https://github.com/iunctis/discourse-formatting-toolbar/blob/master/assets/javascripts/discourse/initializers/formattingtlb-ui.js.es6#L32
  Замените floatl на floatr; текст можно легко изменить в вашем экземпляре Discourse позже.

• Или вы можете использовать это:

Скройте кнопку «по левому краю» с помощью этого CSS:

/* КНОПКА ПО ЛЕВОМУ КРАЮ */
.d-editor-button-bar .floatl_ui_button {
    display: none;
}

И импортируйте компонент темы, который добавит кнопку floatr.

Вы можете использовать discourse-floatr.zip (1.2 КБ).

Это компонент темы, который я только что создал в Discourse Theme, чтобы добавить кнопку floatr с той же иконкой, что и у бывшей кнопки floatl.

https://theme-creator.discourse.org/theme/Steven/floatr

[jord8on (Jordan)]

Стивен! Ты гений! Большое спасибо за дополнительную работу над этим

Я выбрал вариант 2, потому что понятия не имею, как сделать форк и модифицировать плагин!

Всё сработало идеально, и теперь эта кнопка делает именно то, что нам нужно!

[jord8on (Jordan)]

Ещё один вопрос… есть ли простой способ переместить конкретные кнопки из главной панели и скрыть их в меню значка шестерёнки?

Например,

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

[Steven]

Простого способа нет. Потребуется некоторая доработка, аналогичная кнопке floatr.

Либо нужно сделать форк и отредактировать плагин, либо скрыть существующие элементы и воссоздать их в выпадающем меню панели инструментов.

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

MD Composer extras

This theme component adds few formatting options in the composer : underline, align center, align right, justify and strikethrough. You can customize the text of each button in the settings, making it compatible with every languages. Exist in rtl version (change align right to align left).

https://github.com/iunctis/md-composer-extras

[jord8on (Jordan)]

Прежде всего, ещё раз ОГРОМНОЕ СПАСИБО за эту доработку кнопки floatr! Я уже использовал её полдюжины раз и очень рад, что теперь не нужно переключаться с floatl на floatr! Спасибо!!!

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

@Steven

Я мог бы отредактировать созданный мной компонент floatr, чтобы добавить эту кнопку в параметры всплывающего меню, а вы легко завершите работу после этого.

Было бы здорово, если бы вы добавили эти дополнительные кнопки в всплывающее меню значка шестерёнки, чтобы у обычных пользователей было меньше видимых опций. Я хорошо разбираюсь в CSS и умею использовать инспектор элементов браузера, чтобы находить нужные классы и ID для изменения. Смог бы я сделать то же самое с вашим «компонентом», чтобы изучить синтаксис кода и легко решить, какие кнопки добавить в меню и/или убрать из него, вернув их на панель? Или это немного сложнее?

[Steven]

Это сложнее, потому что используется другой JavaScript.

Я создал быстрый пример: если вы хотите добавить кнопку зачёркивания в редактор, вам нужно использовать этот JavaScript:

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "strike_button",
        group: "fontStyles",
        icon: "strikethrough",
	perform: e => e.applySurround('<s>', '</s>', 'strike_text')
    });
});

Однако для пунктов меню панели инструментов подход совершенно другой:

api.addToolbarPopupMenuOptionsCallback(() => {
  return {
    action: "strike",
    icon: "strikethrough",
    label: "strike_button"
  };
});

api.modifyClass("controller:composer", {
  actions: {
    strike() {
      this.get("toolbarEvent").applySurround("<s>", "</s>", "strike_prompt");
    },
  }
});

Я не добавил необходимые переводы для пунктов меню панели инструментов и т. д., но суть вы уловили.

У меня нет достаточных знаний, чтобы добавить выбор между панелью инструментов и пунктами меню, а также адаптировать JavaScript. Моя попытка добавить опцию для активации/деактивации кнопок какое-то время работала, но недавно перестала, и я не совсем понимаю, как это исправить. Поэтому мне пришлось принять решение ради большинства пользователей.

В любом случае, если вы хотите сохранить BBCode, но перенести кнопки в пункты меню, я считаю, что лучший способ — оставить плагин, скрыть кнопки через CSS и использовать компонент темы для добавления кнопок в пункты меню. Это вполне реально, поскольку мы уже делали что-то похожее для плавающей кнопки. Это потребует времени, но если вы запутались в этом вопросе, я могу помочь.

Для компонентов темы лучше всего использовать Discourse Theme. Вы можете добавлять в свой компонент настройки, переводы и код, а также просматривать результат. Это отличный инструмент для создателей тем.

[jord8on (Jordan)]

Вы невероятны, @Steven! Спасибо за такой подробный ответ. Я думаю, что посмотрю, как сообщество справится со всеми этими опциями, и если услышу, что это запутанно, то воспользуюсь вашим вторым подходом здесь с компонентами темы. Этот подход кажется мне очень понятным.

Еще раз спасибо за вашу помощь и за поддержку этого фантастического плагина. Кстати… я не могу выразить вам достаточно благодарности за то, что помогли мне переключить кнопку по умолчанию на «справа». Это было замечательно!

[neounix (Dark Matter)]

Короткий вопрос: что нужно изменить в коде api.onToolbarCreate в нашей теме, чтобы кнопка в редакторе выполняла другое действие?

По сути, мы хотим добавить новую кнопку в редактор, которая будет оборачивать многострочный блок кода следующим MD:

```text

```

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "code_button",
        group: "fontStyles",
        icon: "code",
        perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text')
    });
});

Таким образом, результат должен оборачивать весь многострочный блок кода, а не применять наше новое действие к каждой строке отдельно?

До действия кнопки:

После действия кнопки:

Предполагаю, что существует метод, отличный от e.applySurround, который работает с многострочным блоком текста? Но поиск по сайту и в Google ничего не дал, поэтому после 30 минут поиска решил задать вопрос.

Также искал на https://docs.discourse.org/ с разными ключевыми словами, но безрезультатно.

Спасибо,

[neounix (Dark Matter)]

Я нашел метод/параметр multiline: false с помощью дальнейшего поиска в Google…

perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text', { multiline: false } )

});
api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "code_button",
        group: "fontStyles",
        icon: "code",
        perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text', { multiline: false } )
    });
});

Так что я полностью готов. Спасибо.

[AntiMetaman]

Поправьте меня, если я ошибаюсь, но официальный bbcode-дискурс уже включён в последнюю версию Discourse. Если я установлю этот плагин, возникнет ли конфликт? Основная причина, по которой я хочу эту панель форматирования, — это возможность менять цвет текста с помощью кнопки.

[neounix (Dark Matter)]

Конфликта нет совершенно.

[Steven]

Плагин Discourse BBCode по-прежнему является внешним плагином и не входит в основную поставку.

У вас есть два варианта:

• Этот плагин, который добавляет BB-коды в движок и некоторые кнопки в панель инструментов.
• Официальный плагин BBCode + Composer extras (опциональный компонент темы, добавляющий кнопки в панель инструментов).

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

Панель форматирования не должна быть повреждена или создавать конфликт с ядром Discourse.

[AntiMetaman]

Раньше я использовал компонент темы md composer с официальным плагином BBCode. Однако в этом плагине есть кнопка для изменения цвета текста, которой не было в моём варианте. В идеале был бы удобный выбор цвета, но, думаю, это невозможно.

[Steven]

Ах, я понял: компонент использует только элементы, доступные в ядре, а для цветовой разметки BBCode, как вы знаете, требуется один плагин. Изменить кнопку в компоненте (или сделать форк на GitHub) не так уж сложно, но в вашем случае вы правы — этот плагин является лучшим выбором.

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

Что касается выбора цвета, то честно говоря, я не очень хороший программист. Я просто использовал некоторые доступные инструменты, чтобы поделиться ими с сообществом. Я с радостью приму pull request, чтобы сделать этот плагин лучше.

[AntiMetaman]

Скорее всего, я буду изучать, как добавлять кнопки в редактор, так как планирую создать собственный плагин. Однако я не уверен, что мне стоит отправлять pull request для добавления выбора цвета, поскольку я только недавно начал знакомиться с Discourse.

И да, я удалил официальный плагин bbcode. Также существовал плагин awesome bbcode с автодополнением. Но, учитывая кнопку выбора цвета, я думаю, что этот вариант лучше подходит для обычных пользователей, которые только начинают работать с Discourse и не знакомы с bbcode.

[AntiMetaman]

Я заметил, что этот плагин добавляет ещё одну кнопку «вставить изображение». Действительно ли это необходимо, ведь оригинальная кнопка уже позволяет вставлять вложения или ссылки на URL? Мне в целом нравятся кнопки форматирования, но я просто задаюсь вопросом, так как наличие двух иконок изображений в редакторе выглядит странно. Если эту кнопку нельзя убрать, мне придётся вернуться к использованию md-редактора + официального bbcode.

[neounix (Dark Matter)]

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

Или другой вариант:

Вы можете легко изменить плагин, чтобы удалить любую кнопку, которую вы не хотите отображать в панели инструментов редактора.

[Steven]

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

[AntiMetaman]

Если я закомментирую строки, этого будет достаточно, чтобы убрать эту кнопку?

https://github.com/iunctis/discourse-formatting-toolbar/blob/master/assets/javascripts/discourse/initializers/formattingtlb-ui.js.es6#L18L25

plugin.rb

[Steven]

Лучше добавить немного CSS в вашу тему

/* КНОПКА ИЗОБРАЖЕНИЯ */
.d-editor-button-bar .addimg_ui_button {
    display: none;
}