Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Новые возможности форумов » WYSI — визуальный редактор сообщений


WYSI — визуальный редактор сообщений

Сообщений 121 страница 130 из 130

1

Давно назревал вопрос о внедрении на форумы
полноценного WYSIWYG-редактора в форме ответа.
Этот скрипт — первая попытка воплотить данную идею в жизнь,
не используя каких-либо сторонних решений:

WYSI — визуальный редактор сообщений
Создан специально для форумов MyBB
https://upforme.ru/uploads/0015/c4/3f/2/613655.png

Описание
  • WYSI — визуальный редактор, созданный с нуля специально для форумов MyBB. Таким образом, главная его особенность — полная совместимость со всеми стандартными тегами форматирования сообщений, включая блочные (цитаты, код, спойлеры и т.д.). Кроме того, имеется возможность добавлять обработку пользовательских тегов, добавленных через стандартную форму в Администрировании. Отформатированный текст в форме ответа будет выглядеть так же, как и в уже отправленном сообщении.

  • Имеется возможность в любой момент переключиться в классический режим BB-кодов и обратно (с запоминанием выбора). Внизу формы ответа для этого доступны опции [ BBCode ] и [ WYSIWYG ] соответственно.

  • С визуальным редактором по умолчанию работает весь стандартный функционал формы ответа, но не ограничиваясь этим. В целях удобства и простоты использования добавлен дополнительный функционал, например, очистка форматирования (в секции Дополнительно), функции для работы с таблицами или форматирование с использованием горячих клавиш.

  • Реализована подсветка элементов управления (кнопок форматирования), которые применены к выделенному участку введенного текста, как и в полноценных текстовых редакторах (см. скриншот). Повторное нажатие на элемент приводит к снятию соответствующего типа форматирования.

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

  • В скрипте имеется поддержка расширенного функционала от сервиса, такого как HTML в сообщениях. HTML-вставки можно редактировать в реальном времени и сразу же видеть результат.

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

  • Реализована совместимость с утилитой MyBBCode от @kozhilya (подробнее см. здесь), что позволяет обрабатывать любые элементы (в том числе пользовательские BB-теги) в редакторе таким же образом, как они будут обработаны в сообщениях.

  • Встроенная поддержка "быстрого" редактирования и отправки сообщений с использованием AJAX. Предпросмотр в режиме визуального редактора отключен за ненадобностью, но включается и работает привычным образом в режиме BB-кодов.

  • Имеется поддержка вставки форматированного текста из текстовых редакторов, например Word, с сохранением основного форматирования (начертание, цвет, размер и т.п.) и обратно. При вставке содержимого в виде BB-кодов они также автоматически преобразуются в визуальный формат.

  • Поддерживаются все современные браузеры. Функционал доступен в полной мере также и на мобильных устройствах.

Установка и подключение

На данном этапе (с 16 октября 2025) визуальный редактор предоставляется в формате открытого бета-тестирования. Это значит, что вы можете свободно использовать его на своём форуме, взяв приведённый ниже код.

Установочный код: в HTML в форме ответа

Код:
<!-- WYSI - визуальный редактор сообщений © Alex_63, 2024 -->
<link rel="stylesheet" type="text/css" href="//forumstatic.ru/f/ru/bestbb/wysi.css" />
<script type="text/javascript" src="//forumstatic.ru/f/ru/bestbb/wysi.js"></script>

Если на форуме присутствует цитирование с BB-кодами (любой версии), его необходимо удалить.

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

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

Визуальный редактор использует в своём составе цитирование с BB-кодами как неотъемлемую часть.
Актуальная версия цитирования с BB-кодами разработана по заказу команды ForumD.ru и распространяется на условиях, обозначенных в сообщении по ссылке выше.
Если вы желаете установить цитирование с BB-кодами отдельно от визуального редактора, используйте установочный код из первоисточника.

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

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

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

Копирование исходного кода и любые модификации запрещены.

+15

121

Вот так просто делается визуальный редактор с публикацией визуальных тем https://softo.top/blog/index.html
Успеха Вам в Ваших делах!

0

122

а то, что при выборе размера 8 пикселей выделяется ещё и 18 пикселей, так и задумано?

+1

123

AGScratcherBest
Спасибо, это баг. Поправлю в ближайших обновлениях.

0

124

Здравствуйте!
В целом новый редактор нравится. НО вопрос - можно ли на конкретном сообщении отключить визуальный редактор и вставить чистым кодом? Поискал в значках над блоком ввода - не нашел такой кнопки(
Или может как это сделать?

0

125

megagogo написал(а):

Здравствуйте!
В целом новый редактор нравится. НО вопрос - можно ли на конкретном сообщении отключить визуальный редактор и вставить чистым кодом? Поискал в значках над блоком ввода - не нашел такой кнопки(
Или может как это сделать?

https://upforme.ru/uploads/0000/14/1c/32894/t419592.png

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

Отредактировано ACT3255 (Пт, 20 Фев 2026 09:23:19)

+2

126

ACT3255 написал(а):

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

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

0

127

Alex_63 написал(а):

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

Ну можно же просто сделать как кнопку "Отправить" Только естественно написать на ней: Включение визуального редактора и Выключение визуального редактора.

0

128

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

+1

129

Можете скриптом поменять названия кнопок [ WYSIWYG ] и  [ BBCode ] на то, что лично вам нравится :)

0

130

Alex_63 написал(а):

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

Ну, Визивинг мало кто знает - Редактор или Визуальный редактор, BBCode можно оставить или бб-код. Ну, и вариации иконок:

Визуальный 📝 лист
BBCode [ ] или [b]

Я бы еще такой вариант рассмотрел:  [bb] или bb - тоже классика..

Кстати, в данном конкретном случае бб-код отработал лучше, чем визивинг, визивинг выдал вот это:

Визуальный

📝 лист

BBCode

[ ] или [b]

Если что, это одно и тоже, но в двух режимах. Копировал с ChatGpt.

Посмотрел оригинал:

Код:
<table data-start="674" data-end="758" class="w-fit min-w-(--thread-content-width)"><thead data-start="674" data-end="692"><tr data-start="674" data-end="692"><th data-start="674" data-end="682" data-col-size="sm" class="">режим</th><th data-start="682" data-end="692" data-col-size="sm" class="">иконка</th></tr></thead><tbody data-start="709" data-end="758"><tr data-start="709" data-end="733"><td data-start="709" data-end="722" data-col-size="sm">Визуальный</td><td data-col-size="sm" data-start="722" data-end="733">📝 лист</td></tr><tr data-start="734" data-end="758"><td data-start="734" data-end="743" data-col-size="sm">BBCode</td><td data-col-size="sm" data-start="743" data-end="758">[ ] или [b]</td></tr></tbody></table>

Не думал, что и там еще используют таблицы))

+1


Вы здесь » Единый форум поддержки » Новые возможности форумов » WYSI — визуальный редактор сообщений