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

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

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


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


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

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

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

131

VK видео редактор не распознаёт. В ссылке embed-кода нет, он как тег во фрейме прописан.

0

132

В админке при создании статичной страницы реально другой редактор стоит, он всё понимает. Как тот редактор в топик пользователям вкрутить?

0

133

ivanches
Приведите пример BB-кода, который не распознаётся визуальным редактором.
В разделе Администрирование - Страницы используется редактор TinyMCE, в имеющейся там реализации он работает с HTML, а не BB-кодом. С реализацией BBCode, использующейся на MyBB, он не имеет полноценной совместимости, как и с HTML-разметкой сообщений. Оказалось проще для форумов написать свой визуальный редактор с нуля, чем адаптировать уже имеющиеся варианты.

0

134

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

ivanches
Приведите пример BB-кода, который не распознаётся визуальным редактором.
В разделе Администрирование - Страницы используется редактор TinyMCE, в имеющейся там реализации он работает с HTML, а не BB-кодом. С реализацией BBCode, использующейся на MyBB, он не имеет полноценной совместимости, как и с HTML-разметкой сообщений. Оказалось проще для форумов написать свой визуальный редактор с нуля, чем адаптировать уже имеющиеся варианты.

Какого bb кода когда я пытался вквидео через плагин в вашем редакторе вставить ссылкой вставки фрейма embed? Он пишет что код не распознан. Рутуб распознаёт.

0

135

https://upforme.ru/uploads/0000/14/1c/39596/t246853.png
https://upforme.ru/uploads/0000/14/1c/39596/t449777.png
Ни вкру, ни вкком не понимает

0

136

no-match
Рутуб без проблем

0

137

Аааа. Рутуб только редактор понимает, форум не хочет понимать - no-match))
no-match
https://upforme.ru/uploads/0000/14/1c/39596/t915835.png

0

138

[html]<iframe width="640" height="360" src="https://rutube.ru/play/embed/e549bab8dd8bd222f9f7755d997bdbc0/" style="border: none;" allow="clipboard-write; autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>[/html]

Через HTML вставку работает!

[html]<iframe src="https://vkvideo.ru/video_ext.php?oid=-228763557&id=456239648&hd=1" width="640" height="360" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;" frameborder="0" allowfullscreen></iframe>[/html]

Отредактировано ivanches (Ср, 18 Мар 2026 13:45:13)

0

139

ivanches
Понял, это другая проблема, не связанная с визуальным редактором.
embed-код видеофайла vk.com - код не распознан
О проблеме известно, сроков устранения назвать пока не могу.

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

0

140

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

ivanches
Понял, это другая проблема, не связанная с визуальным редактором.
embed-код видеофайла vk.com - код не распознан
О проблеме известно, сроков устранения назвать пока не могу.

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

Я в той теме отписался. На премодерацию ушло. Могли бы хотя бы редактор шаблонов вставить.  Чтобы без всяких ковыряний недоредактора сервер проверял на запрещённые символы в шаблоне. А шаблон сам юзер делает.
У меня , кстати, в редакторе нет вставки HTML кода, как у вас. У вас в админке разрешено HTML отправлять? Это безопасно?https://upforme.ru/uploads/0000/14/1c/39596/t209853.png

Отредактировано ivanches (Чт, 19 Мар 2026 17:44:08)

0


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