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

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

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


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


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

Сообщений 61 страница 80 из 84

1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Функционал является экспериментальным, ввиду отсутствия прецедентов реализации чего-то подобного на MyBB.
В связи с этим на данном этапе (на время предварительной отладки) визуальный редактор предоставляется в формате закрытого бета-тестирования.
Чтобы получить установочный код и инструкцию, обращайтесь в личные сообщения, указав адрес вашего форума.

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

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

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

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

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

+13

61

Теперь визуальный редактор работает и при заполнении подписи в профиле пользователя.
Как и в форме ответа, точно так же есть возможность переключения в классический режим BB-кодов.
До последнего обновления (версия 0.1.16 beta) визуальный редактор при редактировании подписи включался, но выдавал ошибку.

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

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

+2

62

В связи с многичисленными жалобами на непредсказуемое поведение под Android с некоторыми клавиатурами, внесены правки под мобильные устройства (версии 0.1.20-0.1.22 beta).
Должны устраниться следующие проблемы:

  • дублирование и перемешивание введённого в форму ответа;

  • дублирование тега [you], в том числе частичное, при вводе текста после этого тега;

  • потеря выделения и/или сворачивание экранной клавиатуры при применении форматирования.

Протестировано и отлажено под Emoji&Font Keyboard, GBoard (MIUI 12, Android 10).
При сохранении/появлении новых проблем сообщайте здесь в теме, указывайте используемую оболочку, браузер и клавиатуру.

+4

63

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

В связи с многичисленными жалобами на непредсказуемое поведение под Android с некоторыми клавиатурами, внесены правки под мобильные устройства (версии 0.1.20-0.1.22 beta).
Должны устраниться следующие проблемы:

  • дублирование и перемешивание введённого в форму ответа;

  • дублирование тега [you], в том числе частичное, при вводе текста после этого тега;

  • потеря выделения и/или сворачивание экранной клавиатуры при применении форматирования.

Протестировано и отлажено под Emoji&Font Keyboard, GBoard (MIUI 12, Android 10).
При сохранении/появлении новых проблем сообщайте здесь в теме, указывайте используемую оболочку, браузер и клавиатуру.

Ура, теперь работает замечательно!

+2

64

C3La-NS
Тем временем под SwiftKey обнаружились новые баги, работаю дальше )

+1

65

Вот фидбек от админов на моём форуме:

       
https://forumupload.ru/uploads/0000/14/1c/34864/227606.png
У меня тоже на больших постах (статьи, лонгриды и прочее) редактор тормозит, кстати. Может быть это связано с производительностью устройства с которого работаешь? Но даже если так, то будет здорово если можно как-то это пофиксить для слабых устройств...

+1

66

Мэрилин Мэрис
Да, есть такое, сам замечаю. В процессе будет фикситься.

0

67

Looks good, thanks.

0

68

В визуальном редакторе плохо работает "Аватар в цитате V.2 © Alex_63", то есть в предпросмотре с цитатой всё ОК, а при отображении получается неправильно)

0

69

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

0

70

При нажатии на кнопку "Цитировать" или при выделении текста и нажатии на кнопку "Цитировать", в форму быстрого ответа в режиме WYSIWYG  цитата отображается нормально
https://i.imgur.com/Iykzu1Q.png

А после отправки сообщения она имеет такой вид:

https://i.imgur.com/k67gvzM.png

А при предпросмотре в режиме BBCode это вот "Сообщение от Сообщение" проявляется сразу.

0

71

Merlin777
Попробуйте ниже визуального редактора поставить такой код:

Код:
<script type="text/javascript" src="https://forumstatic.ru/f/su/1bb/bbquote.custom_quotes.js?v=1"></script>

+1

72

Ещё небольшая проблемка - при отправке сообщения  оно остаётся в окне ввода. Из-за чего могут возникнут дубли при повторной отправке.

0

73

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

+1

74

Ещё про отображение цитат.
Когда есть вложенные цитаты, они в теме "режутся" по вертикали, пример:

цитата

Но при визуальном просмотре, редактировании или при нажатии кнопки "Удалить" показывается всё целиком (то есть правильно).

0

75

Merlin777
Это уже проблема не в редакторе ) У вас в HTML верх стоит скрипт сворачивания длинных цитат:

Код:
<script type="text/javascript" src="https://forumstatic.ru/files/0015/c4/3f/91221.js"></script>

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

Код:
<style type="text/css">
.quote-box.toggle blockquote,.quote-box.toggle{position:relative;overflow-y:hidden}
.quote-box .quote-after{width:100%;height:2em;position:absolute;display:block;bottom:-.1em;transition:background-image .4s ease;cursor:pointer}
.quote-after:before {content:"^";width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;font-size:1.2em;bottom:-.3em;transition:opacity .4s ease;opacity:.6}
.quote-after.q-resize-1:before {transform:rotate(180deg);top:0;bottom:0;}
.quote-box:hover .quote-after:before{opacity:1;}
</style>

+2

76

Здравствуйте. А можно отключить визуальный редактор на совсем? Есть некоторые минусы, которые допускают новые редакторы случайно. Пока хотел бы отказаться от тестирования. Мой форум.

0

77

POLIGON
Здравствуйте, можете просто убрать установочный код редактора из HTML в форме ответа.
Также хотелось бы подробнее узнать, что за минусы, возможно это можно поправить.

0

78

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

POLIGON
Здравствуйте, можете просто убрать установочный код редактора из HTML в форме ответа.
Также хотелось бы подробнее узнать, что за минусы, возможно это можно поправить.

Выявилась вот такая проблема. Это таблица, все упорядочено:https://forumupload.ru/uploads/0000/14/1c/37881/t687806.png

А это после включения редактора: https://forumupload.ru/uploads/0000/14/1c/37881/t72668.png

Структура нарушается, так как все теги смещаются. Это мешает дальше редактировать ее ВВ кодом.
Но для общего использования ВР очень полезен, особенно для новичков, которые не сильны коде форума )

0

79

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

Таблицу же в большинстве случаев нет необходимости редактировать в виде BB-кода, в меню таблиц в форме ответа редактор добавляет кнопки для форматирования: добавление и удаление столбцов/строк/ячеек таблицы либо таблицы целиком.

0

80

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

Таблицу же в большинстве случаев нет необходимости редактировать в виде BB-кода, в меню таблиц в форме ответа редактор добавляет кнопки для форматирования: добавление и удаление столбцов/строк/ячеек таблицы либо таблицы целиком.

Тут проблема в том, что таблица довольно большая и ВР работает очень медленно, при ее редактировании. Поэтому приходится использовать ВВ-код.

0


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