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

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

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


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


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

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

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

101

Тоха написал(а):

А здесь есть обновленная версия Цитирования с ВВ кодами? Вот эта версия Актуальна?

Да, это актуальная версия BB-цитирования.
Она же включена в визуальный редактор: если он используется на форуме, отдельно bbquote.js устанавливать не надо.
Стоит отметить, что создание этой версии BB-цитирования проспонсировано командой ForumD.ru, поэтому скрипт официально распространяется только там, на условиях, указанных в теме: https://forumd.ru/viewtopic.php?id=7965

0

102

Alex_63
Есть такая возможность в визуальном редакторе, например берем адрес ссылки(или копируем) фото из сети, копируем его и вставляем в форму ответа. И редактор сам его оборачивает в теги img? Есла да Я думаю его стоит себе поставить.

Отредактировано Тоха (Ср, 26 Мар 2025 11:34:21)

0

103

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

При нажатии на кнопку "Цитировать" или при выделении текста и нажатии на кнопку "Цитировать", в форму быстрого ответа в режиме WYSIWYG  цитата отображается нормально
А после отправки сообщения она имеет такой вид:

У меня такая же проблема) Только после отправки "Сообщение от Сообщение" не появляется, но убирается автор) Вроде первую версию скрипта использую

0

104

Тоха написал(а):

например берем адрес ссылки(или копируем) фото из сети, копируем его и вставляем в форму ответа. И редактор сам его оборачивает в теги img?

В случае с картинкой из буфера обмена - если возможно, редактор оборачивает её в тег изображения. При копировании нужно именно копировать картинку, а не URL или адрес ссылки. В ином случае вставится в виде URL (как текст, с дальнейшим оборачиванием в тег ссылки).
В общем-то можете на этом форуме попробовать и убедиться, является ли нынешнее поведение визуального редактора ожидаемым или нет.

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

Только после отправки "Сообщение от Сообщение" не появляется, но убирается автор) Вроде первую версию скрипта использую

Где можно потестировать (лучше адрес конкретного поста с проблемой) и как воспроизвести?

+1

105

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

Где можно потестировать (лучше адрес конкретного поста с проблемой) и как воспроизвести?

Такое на всех постах происходит, но потестировать можно здесь (открыто для гостей)
А как воспроизвести — просто процитировать любое сообщение в теме и отправить

0

106

Alex_63
А вот в визуальном редакторе есть Автоуменьшение больших фото? Если нет то где можно найти такой скрипт, желательно чтобы был адаптирован по утилиту Майбб и под Визуальный редактор. И еще для непонимающих пользователей добавить в скрипт Центрирование фото по Центру.

Отредактировано Тоха (Пт, 28 Мар 2025 14:27:35)

0

107

Тоха написал(а):

Alex_63
А вот в визуальном редакторе есть Автоуменьшение больших фото? Если нет то где можно найти такой скрипт, желательно чтобы был адаптирован по утилиту Майбб и под Визуальный редактор. И еще для непонимающих пользователей добавить в скрипт Центрирование фото по Центру.

У меня CSS скрипт просто уменьшает размеры картинки до 400px в обычном режиме просмотра и до 350px в мобильном (оптимальный размер определен экспериментально). Более "правильно" всё это прописать в относительных единицах, но и так тоже получается неплохо)

Центрирование картинок точно так же делается, как и для текста - кнопкой в форме быстрого ответа :)

+1

108

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

У меня CSS скрипт просто уменьшает размеры картинки до 400px в обычном режиме просмотра и до 350px в мобильном (оптимальный размер определен экспериментально). Более "правильно" всё это прописать в относительных единицах, но и так тоже получается неплохо)

Центрирование картинок точно так же делается, как и для текста - кнопкой в форме быстрого ответа :)

Мне вот Понравилось что у тебя на форуме есть Скприпты и все Актуальы и все Красиво размещено.

+1

109

Тоха написал(а):

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

Новый загрузчик изображений (Imgur+Instagram, добавка перетаскиванием) позволяет вставлять изображения из буфера обмена прямо в форму ответа с возможностью последующей загрузки в файлы форума или на другие доступные хостинги (при этом можно выбрать размер, до которого будет уменьшено изображение, а также размер превью). С визуальным редактором, MyBBCode и стандартными возможностями MyBB - совместимость полная.

0

110

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

Такое на всех постах происходит, но потестировать можно здесь (открыто для гостей)

У вас стоит модификация аватары в цитате от Герды, не уверен что с ней визуальный редактор будет корректно работать (да и BB-цитирование). Попробуйте поставить исходную версию с этого форума (из темы Скрипты от пользователей 3).
Это во-первых, а во-вторых BB-цитата уже включена в состав визуального редактора, её не нужно устанавливать повторно, вероятно что это и есть основная причина некорректной работы визуального редактора (код ниже - нужно удалить):

Код:
<!-- BB-цитирование © Alex_63, 2024 -->
<script type="text/javascript" src="https://forumstatic.ru/f/su/1bb/bbquote.js?v=1"></script>

0

111

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

0

112

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

0

113

Весь оффтоп перенесён в тему Про визуальные редакторы, смайлики и прочее.

+1

114

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

+2

115

Визуальный редактор сообщений обновлён до версии 0.1.33 (beta).
Внесены некоторые исправления:

  • Улучшена обработка вставляемого содержимого из буфера обмена (работа с содержимым из Google Docs; сохранение форматирования и переносов строк; обработка маркированных и нумерованных списков; другие изменения);

  • Исправлена одновременная вставка нескольких картинок ("Вставить всё") через стандартный загрузчик изображений.

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

+1

116

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

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

Нужно адаптировать под Визинг следующие Скрипты (после установки Визинг ломает эти скрипты, также бывает что некоторые скрипты нормально работают, НО после отправки сообщения - действие скриптов пропадает вообще):

1)

Код:
<!--Окрас фона сообщений-->
<script type="text/javascript">
    $(document).ready(function(){
    $("#post #button-color").after('<td title="Фон сообщения цветом" id=button-bgColor align=center valign=center><img onclick="bbcode(\'[url=http://PostBgColor]\',\'[/url]\')" src="https://forumstatic.ru/files/001b/d8/65/78987.png" style="width:22px!important;height:22px!important"/></td>');});
    $('.post-content a[href$="PostBgColor"] span').each(function() {
      var color=$(this).css('color');
      var box=$(this).parents('.post-box');
      var quote=box.find('.quote-box');
      box.css({'background-color':color});
      //quote.css({'background-color':color}); //Если нужна окраска цитат - первые две палки убираем
    });
    </script>
<!--Окончание-->

2)

Код:
<!--Фон для текста с любыми параметрами с регулированием ширины и высоты-->
    <script type="text/javascript">
    $('td#button-font').after('<td id="backgr" style=\'background-image:url("https://forumstatic.ru/files/001b/d8/65/72408.png")\' title="Фон для текста картинкой" onclick="tag_background()"></td>');
    $(function(){
    $('.post-content:contains("[background=")').each(function(){
    var htmlbackground = $(this).html().replace(/\[background=(.*?)\,(.*?)\,(.*?)\]([^`]*?)\[\/background\]/gi, "<div style='background:$1;width:$2;height:$3;'>$4</div>");
    $(this).html(htmlbackground)
    });
    });
    function tag_background(){
    var FoundErrorsBACKGROUND = '';
    var backgroundTIT = prompt('Введите параметры фона', 'url("") no-repeat');
    var backgroundTIT2 = prompt('Введите ширину', '100%');
    var backgroundTIT3 = prompt('Введите Высоту', '350px');
    if (FoundErrorsBACKGROUND)
    {alert("Ошибка!" + FoundErrorsBACKGROUND);
    return;}
    bbcode('[background='+backgroundTIT+','+backgroundTIT2+','+backgroundTIT3+']','[/background]');
    }
    </script>
<!-- Окончание -->

3)

Код:
<script>
MyBBCode.addAdapter((container) => {
    $('.custom_tag_postbg', container).each((i, element) => {
        const color = $(element).attr('alt');
        const quote = $('.quote-box', container);
        container.css({'background-image':color});
    });
});
MyBBCode.addEditorButton('postbg', {
    name: "Фон сообщения картинкой",
    onclick: () => {
        const image = prompt('Введите ссылку на картинку на фон сообщения', 'url("")');
        smile(`[postbg=${image}]`);
    },
}, 'table');
</script>
<style>
#button-postbg {
    background: url(https://forumstatic.ru/files/001b/d8/65/76713.png) no-repeat center;
}
</style>

4)

Код:
<!--ТЕГ абзаца - [indent] -->
<style>#button-indent {background:url(http://s7.uploads.ru/t/mnkgq.png)no-repeat center 6px!important;}
.custom_tag_indent {margin:1em 1.1em;}</style>
<script>
    MyBBCode.addEditorButton('indent', {
        name: "Красная строка",
        onclick: () => smile('[indent]'),
    }, 'left');
</script>

5)

Код:
<style>
#button-shadow {background-image:url("http://www.iconsearch.ru/uploads/icons/gnomeicontheme/16x16/stock_text-shadow.png");}
</style>
<script>
MyBBCode.addTag('shadow', (elem, selector, set_html) => {
    elem.css('text-shadow', elem.attr('alt') + ' 1px 1px 2px');
});

MyBBCode.addEditorButton('shadow', {
    name: "Шрифт с тенью",
    onclick: () => {
        const value = prompt('Введите цвет тени', 'red');
        if (!value) return;
        bbcode(`[shadow="${value}"]`, '[/shadow]');
    },
}, 'link');
</script>

6)

Код:
<!-- Бегущая строка в сообщениях с выбором направления -->    
<style type="text/css">
    #button-marquee {background: url(https://forumstatic.ru/files/0013/76/d2/11255.png) no-repeat center;}
    #marquee-area img {cursor: pointer;}
    </style>
    <script type="text/javascript">
    $('#button-right').after('<td id="button-marquee" title="Бегущая строка"><img onclick="changeVisibility(\'marquee-area\')" src="/i/blank.gif"></td>');$('#form-buttons').append('<div class="container" id="marquee-area" style="display: none; padding: 10px; position: absolute; right: 6px; top: 43px; width: auto;"><img src="https://forumstatic.ru/files/0013/76/d2/30491.png" onclick="bbcode(\'[marquee=left]\',\'[/marquee]\');">&nbsp;&nbsp;&nbsp;<img src="https://forumstatic.ru/files/0013/76/d2/51628.png" onclick="bbcode(\'[marquee=right]\',\'[/marquee]\');"></div>');
    $('.post-content p:contains("[marquee")').each(function(){$(this).html($(this).html().replace(/\[marquee=(.*?)\](.*?)\[\/marquee\]/gm, '<marquee direction="$1" onMouseOver="this.stop()"  onMouseOut="this.start()">$2</marquee>'));});
    </script>
<!-- Окончание -->

Отредактировано Тоха (Чт, 16 Окт 2025 09:55:07)

0

117

Тоха написал(а):

4)

Вдобавок к уже имеющемуся коду добавьте в HTML в форме ответа:

Код:
<!-- Форма ответа: Обработка кастомных тегов в визуальном редакторе -->
<script>
WYSI.extend({
    'indent': ['.custom_tag_indent', '[indent]', ''],
    // сюда можно добавить также правила и для других тегов
});
</script>
Тоха написал(а):

5)

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

Код:
    'shadow': ['.custom_tag_shadow', '[shadow]', '[/shadow]', function(startTag,elem) {
        return BBQuote.addAttribute(startTag, elem.attr('alt'))
    }]
Тоха написал(а):

3)

Аналогично:

Код:
    'postbg': ['.custom_tag_postbg', '[postbg]', '', function(startTag,elem) {
        return BBQuote.addAttribute(startTag, elem.attr('alt'))
    }]

Остальные вариации скриптов на тему кастомных BB-тегов можно переделать по аналогии с приведёнными примерами, вы можете попробовать это сделать самостоятельно.

0

118

Alex_63 написал(а):
  • 'postbg': ['.custom_tag_postbg', '[postbg]', '', function(startTag,elem) {

  • return BBQuote.addAttribute(startTag, elem.attr('alt'))

  • }]

В форме ответа Картинка есть, НО после отправки сообщения Визинг ее Съедает - Текст остается а фон Пропадает вообще)))). Не катит тут Аналогия))) (я пробовал!).

Отредактировано Тоха (Пт, 17 Окт 2025 11:50:40)

0

119

С красной строкой и с Тенями все нормально.

Отредактировано Тоха (Пт, 17 Окт 2025 12:15:50)

0

120

Тоха написал(а):

В форме ответа Картинка есть, НО после отправки сообщения Визинг ее Съедает - Текст остается а фон Пропадает вообще))))

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

0


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