Представляем нашего нового редактора, который делает работу на Discourse проще, чем когда-либо

Один из наших главных проектов в этом году — разработка нового режима редактирования форматированного текста для редактора сообщений, что делает написание постов на Discourse более привычным и интуитивно понятным. Новый редактор уже какое-то время доступен здесь, на Meta, и в качестве экспериментальной настройки, но мы достигли того момента, когда готовы снять пометку experimental и пригласить ваше сообщество опробовать его!

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

:writing_hand: Новый редактор форматированного текста для Discourse

Новый редактор форматированного текста упрощает процесс написания постов для пользователей Discourse, особенно для тех, кто менее технически подкован или не знаком и не чувствует себя комфортно при написании на Markdown. Редактор поддерживает Markdown, а также другие распространённые сочетания клавиш и инструменты форматирования на панели инструментов, при этом форматирование отображается мгновенно, обеспечивая опыт WYSIWYG («что видишь, то и получаешь»), похожий на привычные инструменты, такие как Google Docs и Notion.

:thought_balloon: Будущее Markdown

Мы знаем, что многие пользователи Discourse любят текущий редактор на Markdown и ценят его предсказуемый и простой опыт написания. Новый редактор — это «режим» редактора сообщений, который существует параллельно с существующим режимом Markdown, поэтому ваши участники могут выбрать стиль написания, который лучше всего подходит именно им.

Большинство действий, которые вы выполняли в классическом редакторе на Markdown, теперь поддерживаются в редакторе форматированного текста, включая:

  • Всё базовое форматирование, поддерживаемое в Markdown (**жирный**), с использованием распространённых сочетаний клавиш (Command + B) и иконок на панели инструментов.

  • Поддержку расширенных функций, таких как создание таблиц, опросов, вставка даты/времени, добавление разделов «скрыть детали», разделов с размытием спойлеров, загрузка файлов/изображений/видео, отображение ссылок в виде oneboxes, стилизация упоминаний категорий/тегов/пользователей, цитирование контента и вставка сносок.

  • Специальный интерфейс для работы со ссылками: переход по ссылке, редактирование, копирование, изменение заголовка или удаление ссылки.

  • Специальный интерфейс для работы с изображениями: изменение размера, добавление подписи или удаление изображений.

Однако есть области, над которыми мы всё ещё работаем, например, упрощение редактирования таблиц и опросов. Мы продолжим стремиться к функциональному паритету между режимами редактора и призываем вас делиться запросами на новые функции (#feature requests) о том, какие возможности для вас наиболее важны, чтобы помочь нам расставить приоритеты в работе. Тем временем вы всегда можете переключиться обратно в режим Markdown для выполнения сложных задач.

:hammer: Как мы это создали

Наша реализация построена на основе отличной библиотеки ProseMirror и её неосновного модуля Markdown, используя определения схемы, парсинга и сериализации этого модуля как основу для дальнейших функций, специфичных для Discourse.

:gear: Включение нового редактора

Редактор форматированного текста включён по умолчанию для всех сообществ. Когда вы или ваши участники откроете редактор, вы заметите переключатель на панели инструментов. Он позволяет переключаться между классическим режимом только для Markdown и новым редактором форматированного текста.

CleanShot 2025-06-11 at 15.45.35


Обновление: если вы предпочитаете, чтобы вашим участникам по умолчанию показывался редактор на Markdown:

45 лайков

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

3 лайка

Существует ли настройка, определяющая редактор по умолчанию после этого? Спасибо.

4 лайка

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

12 лайков

При нажатии кнопки «размер текста» (которая, кажется, отсутствует на этом сайте, но есть у меня) возникает эта ошибка

Также я не вижу «интерфейс изображения» в сообщении?

Я с нетерпением ждал возможности масштабирования изображений, и мне нравится простота этого решения!

8 лайков

это кастомизация, которую нужно обновить для совместимости с новым редактором. Возможно, вы используете компонент темы, например Composer Button Bonanza? (вероятно, есть и другие)

вы недавно обновляли Discourse? Если да, то вам нужно нажать на изображение в редакторе, чтобы увидеть его.

3 лайка

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

4 лайка

Мои предложения:

  1. Мне нравится писать в Markdown (возможно, я просто привык), но в версии с Markdown мне не нравится новый моноширинный шрифт, поэтому для меня нет смысла включать в моё сообщество богатый редактор (поскольку, скорее всего, писать буду в основном я). Тем не менее, это можно сделать настройкой, которую пользователь сможет включать или отключать. Например, если я её отключу, я всегда буду видеть только версию Markdown с «обычным» шрифтом (не моноширинным). Если включу — получу то, что реализовано сейчас. Как администратор я могу включить эту опцию для всего сообщества, но каждый пользователь сможет включать или отключать её для себя. Либо же каждый пользователь сможет сам выбирать шрифт для версии Markdown.
  2. Мне немного мешает то, что при включении богатого редактора весь блок написания сообщения меняет размер и перемещается. Особенно если я планирую переключаться между обеими версиями (а я буду), то постоянное изменение размера окна при нажатии переключателя кажется мне отвлекающим. Я понимаю, что с богатым редактором нам не нужна дополнительная панель предпросмотра справа, но всё же… может быть, это пространство можно использовать для чего-то другого?
  3. Это лишь небольшая деталь, но если изменение размера останется, то странно, что блок написания сообщения выровнен по центру страницы, но по сравнению с областью темы он не выровнен, и это бросается в глаза:

Честно говоря, я всё ещё не уверен, что буду использовать эту функцию. Понимаю, что в будущем она может оказаться полезной, но сейчас у меня всегда возникает чувство дискомфорта, когда я думаю о её использовании.

4 лайка

Пользователь попробовал использовать HTML-код, но он не был отображён в режиме WYSIWYG — всё, что произошло, это текст HTML был помещён в рамку. При переключении обратно в Markdown вы видите правильный результат в панели предпросмотра. Должно ли оно показывать результаты HTML, или нужно переключиться обратно в Markdown для предпросмотра? Например:


Статья вики находится в стадии разработки

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


2 лайка

Это намеренно: поддержка сложного HTML осуществляется только через блок «пропуск» (passthrough), как вы и заметили. Написание HTML, хотя частично поддерживается в таких элементах, как <kbd>, не предполагает полной поддержки в новом редакторе в визуальном режиме, поэтому существует HTML-редактор.

Тем не менее, если рассмотреть этот HTML:

<hr>
<H2 style="color:red;">Wiki article under construction</h2>
<p> Please allow the creator to work on this as they are able.  You are free to offer help or advice by replying, but please do not edit it without permission.</p>
<hr>

Свойство style удаляется фильтром безопасности. Почему бы не написать это так:

---
## Wiki article under construction

Please allow the creator to work on this as they are able.  You are free to offer help or advice by replying, but please do not edit it without permission.
---
2 лайка

Мы тестировали новый редактор на нашем форуме и он нам очень понравился, но в процессе тестирования мы столкнулись со странным поведением, и не знаем, является ли оно задуманным.

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

Однако при использовании нового редактора по умолчанию или при переключении на него во время написания ответа курсор автоматически перемещается в конец цитируемого текста:

Если начать вводить текст, он будет засчитываться как часть цитаты, и при попытке отправить ответ появится ошибка:

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

Спасибо.

1 лайк

Это не было сделано намеренно. У нас есть внутренняя задача, и мы очень скоро улучшим это поведение.

3 лайка

Привет :waving_hand: Спасибо, это довольно круто :heart_eyes:

Я заметил, что тег [wrap]Привет[/wrap] пока не поддерживается, и при попытке его использования получил следующее сообщение:

Тип токена wrap_open не поддерживается парсером Markdown

2 лайка

Я не думаю, что в ближайшем будущем планируется поддержка универсального узла «wrap». Как это должно выглядеть? Просто div?

Или вы ожидаете использовать [wrap=something] с новым редактором?

2 лайка

Где вы увидели это сообщение об ошибке? Мой экземпляр просто отбрасывает BB-код.



превращается в


Привет

Мы используем некоторые компоненты темы, такие как Discourse Icon и Discourse Stickers.

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

Вставьте его в сторону Рич-текстового редактора или переключитесь со стороны Markdown, если вы вставили туда.

2 лайка

У меня ошибка не появляется, но BB-код остаётся. На рабочем столе нет предпросмотра, когда выбран редактор с форматированием



Это было на коммите Discourse latest-release +269

и

коммите BBcode 1fbff6b1

Это работает как задумано: введённый BB-код намеренно экранируется (то есть отображается как текст), если он ещё не распознан или не реализован, что в данном случае и происходит.

Подойдёт ли вам это:

.d-editor-container .d-editor-textarea-wrapper textarea.d-editor-input {
    font-family: var(--font-family);
}

3 лайка