Модератор форума: Shеriff, Yuri_G  
Сообщество uCoz » Общение пользователей » Разговоры про uCoz » Визуальное редактирование сообщений (тестирование)
Визуальное редактирование сообщений (тестирование)
Модератор форума
Сообщение # 1 | 18:41:37
В данной теме Вы можете сообщить об ошибках, связанных с визуальным редактором сообщений, а также предложить улучшения.




Обновление uCoz в ночь с 15 на 16 января

Визуальный редактор комментариев был включен для всех сайтов в системе uCoz

Отключить этот редактор можно в Панели управления → пункт "Настройки" в Админ-баре → Общие настройки → Не использовать визуальный редактор комментариев.

Это вернет старую форму BB кодов.

Подробнее...

Ответы на вопросы 1
Ответы на вопросы 2

Инструкция по стилизации редактора от Шидла

Еще осталось достаточно проблем с работой этого редактора, в особенности в Opera и IE. Естественно, они будут исправляться.

Упущено:

- Редактор в личных сообщениях - включен на dev-сервере, с обновлением разойдется по остальным

Ошибки (баги):

Opera:
- Символы в тексте сообщения заменяется на OBJECT - исправлено на dev-сервере (а также здесь на форуме), с обновлением разойдется по остальным (Opera 11.10+)
- Неработоспособность кнопки выбора шрифта и размера текста в Opera 12.10+ - исправлено на dev-сервере (а также на этом форуме), с обновлением разойдется по остальным
- Закрытие модального окна (добавление ссылки, изображения) - исправлено на dev-сервере (а также здесь на форуме), с обновлением разойдется по остальным
- Пересмотреть настройку редактора в ПУ (изменения должны отображаться сразу после перетаскивания кнопок)
- "Прыжки" курсора - под вопросом, для исправления проблемы с модальными окнами был немного изменен алгоритм работы с выделением текста в Opera? теперь курсор ведет себя адекватнее
- Неудобно убирать цитату (приходится нажимать на кнопку "Цитата", по backspace не убирается)
- Выбор шрифта/размера для не выделенного текста

Общие:
- Текст остается в редакторе после добавления сообщения
- Удаление пустых BB-тегов (которые не понимает серверная сторона uCoz)
- Фильтрация переводов строк в теге URL
- Интегрировать смайлы в редактор вне зависимости от наличия $SMILES$ в шаблоне
- Неработоспособность "своих смайлов" в редакторе
- Смайлы в выпадающем списке заменяются на их коды при их выборе

IE:
- Будет полностью пересмотрен.
- Цитата некорректно преобразовывается в BB код.

В планах:

- Метод для очистки редактора (очистка поля ввода + удаление сохраненного текста) - JS
- Разделение наборов кнопок редактора для форума и остальных модулей
- Темный дизайн для редактора
- Пересмотреть стандартный набор кнопок редактора
- Inline изображения (визуальные $IMAGEX$)
- Кнопка AUDIO

Под вопросом:

- Настройка в ПУ "переносить смайлы в редактор"
- Настройка цвета компонентов интерфейса редактора в ПУ
- Отключение визуального редактора для отдельного посетителя (cookies)
- Кнопки Отменить/Вернуть (Undo/Redo)

Пожалуйста, воздержитесь от неконструктивной критики данного нововведения в этой теме!

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

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

- непосредственно описание проблемы
- название и версию Вашего браузера (обязательно в каждом Вашем сообщении об ошибке)

Очень желательно также указать:

- номер стандартного дизайна, при использовании которого можно наблюдать описанную Вами проблему
- адрес сайта, где наблюдается эта проблема (можно в личные сообщения mxCherry). При обращении в ЛС, продублируйте, пожалуйста, описание проблемы
Шидла
Репутация: 27

Сообщение # 601 | 13:59:27
Цитата (RulezZ-DM)
Для всех пользователей у которых появились вопросы касающиеся css стилей, я специально написал разбор полётов визуальной формы добавление комментарий.

1. Такой FAQ уже есть - //forum.ucoz.ru/forum/41-44051-972416-16-1358532675, но он ориентирован больше на новичков.
2. Ваш раш "разбор полетов" не будет работать, если не добавить в конце каждой строки перед запятыми !important, хоть и в будущем обещают сделать так, чтоб изменения работали без этого ухищрения.


I guess love is deaf, too.
Aqel
Сообщений: 3
Репутация: 0

Сообщение # 602 | 15:51:50
$BBCODES$ в шаблоне есть, сбрасывал, но над сообщением пропали (в форуме), стало так недавно, хотя на сайте ничего не менял до этого и в шаблонах не лазил.
Теперь что бы написать кому либо сообщение в форуме или создать тему - целая проблемма (надо искать в своей документации эти BB коды - все их не помню).
Помогите что делать?
bzzik
Сообщений: 212
Репутация: 4

Сообщение # 603 | 17:21:12
Ребят, нужна ваша помощь, после обновления uCoz'ом панельки ББ кодов (для добавления сообщений), она стала белая. Мне такая панель, совершенно не подходит под мой дизайн! Я выдернул коды, которые должны быть в CSS, втавил их туда, поменял как мне бы надо, но ничего не изменилось =(

Подскажите пожалуста, как и вообще можно ли вернуть страую панель ББ кодов, которая была до етого времени?
va5ilius
Сообщений: 2
Репутация: 5

Сообщение # 604 | 17:44:30
RulezZ-DM,

Код
/* SMILEBOX TOOLBAR - ЯЧЕЙКА СМАЙЛОВ */   
.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn.wbb-smilebox .wbb-list {   
    width:256px; /* ширина ячейки*/    
}   

/* ячейка span со смайлом */    
.smile {   
/*   
    height: 24px;    
    width: 24px;    
*/   
    line-height:20px; /* устанавливает меж строчный интервал */    
    padding: 5px 7px; /* внутренние отступы */    
    display: inline-block;*display:inline;zoom: 1; /* блочный элемент + изменяет масштаб объекта */    
    cursor: pointer; /* отображение курсора */    
    vertical-align:middle; /* выравнивает элемент по вертикали относительно своего родителя */    
}   
/* END SMILEBOX TOOLBAR */

Какую б ширину ячейки не задавал она все ровно остается 156 px....
Сообщение отредактировал va5ilius - Воскресенье, 20 Янв 2013, 17:44:56
Mr_News
Сообщений: 90
Репутация: 52

Сообщение # 605 | 17:57:22
А где "Подписка на комментарии" ?
Шидла
Репутация: 27

Сообщение # 606 | 17:58:49
Цитата (va5ilius)
Какую б ширину ячейки не задавал она все ровно остается 156 px....

В конце каждой строчки перед точкой с запятой добавьте !important, и все заработает...


I guess love is deaf, too.
va5ilius
Сообщений: 2
Репутация: 5

Сообщение # 607 | 18:21:04
Цитата (Шидла)
В конце каждой строчки перед точкой с запятой добавьте !important, и все заработает...


Спасибо Шидла!
ana4220
Сообщений: 24
Репутация: 20

Сообщение # 608 | 18:53:56
Цитата (Aqel)
$BBCODES$ в шаблоне есть, сбрасывал, но над сообщением пропали (в форуме), стало так недавно, хотя на сайте ничего не менял до этого и в шаблонах не лазил.Теперь что бы написать кому либо сообщение в форуме или создать тему - целая проблемма (надо искать в своей документации эти BB коды - все их не помню).
Помогите что делать?
Цитата (bzzik)
Ребят, нужна ваша помощь, после обновления uCoz'ом панельки ББ кодов (для добавления сообщений), она стала белая. Мне такая панель, совершенно не подходит под мой дизайн! Я выдернул коды, которые должны быть в CSS, втавил их туда, поменял как мне бы надо, но ничего не изменилось =(Подскажите пожалуста, как и вообще можно ли вернуть страую панель ББ кодов, которая была до етого времени?

Вам бы в шапке почитать прежде чем писать.
adminsayta
Сообщений: 47
Репутация: 10

Сообщение # 609 | 12:57:34
Добрый день!

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

Категорически запрещается любая реклама, в том числе реклама интернет-проектов.
Aura
Сообщений: 33
Репутация: 42

Сообщение # 610 | 13:19:57
adminsayta, Любой символ и он автоматически расширяется вниз.
Sovershenstvo3383
Сообщений: 6
Репутация: 2

Сообщение # 611 | 13:30:43
Цитата (RulezZ-DM)
Для всех пользователей у которых появились вопросы касающиеся css стилей, я специально написал разбор полётов визуальной формы добавление комментарий. up
Спасибо! Эта статья мне очень помогла, настроила все кнопки по своему вкусу!
mxCherry
Сообщений: 10
Репутация: 70

Сообщение # 612 | 15:03:44
Цитата (Ирокез)
По поводу изменения размера выделенного текста. Работает не всегда. Напечатал символы через пробел, изменил размер нескольких (см. скрин). При попытке изменить размер шрифта выделенного фрагмента на шестой ничего не вышло (нужно пробовать несколько раз, иногда работает).

Принято, посмотрю.

Цитата (Aura)
При введении неверного кода безопасности, вышеперечисленный текст в форме виз. редактора исчезает, т.е. стирается. Очень неудобно.

Понял, такое возможно (правильное поведение - очистка редактора при отправке формы). Неправильно работающая "фича" при коде безопасности. Посмотрю.

Цитата (Aura)
1. Жму кнопочку ИЗМЕНИТЬ, всё хорошо, нажала энтер (перенос строки), написала что надо. Нажала СОХРАНИТЬ и тут все переносы строки обнулились.
В общем в ajax быстром изменении сообщения не работают переносы строки, не заменяются br

В Chromium вроде бы ОК. Наверное, стоит посмотреть на Вашем сайте (Opera, Chrome).

Цитата (Aura)
2. При нажатии "ИЗМЕНИТЬ" фокус скачет по странице, обычно в разы ниже редактора.

Наверное, тоже на Вашем сайте нужно смотреть, так как подтвердить не могу. Корректное поведение - страница скроллится по вертикали, чтобы редактор стал в центр страницы (его я и наблюдаю).

Цитата (Aura)
3. Не сохраняется включение/выключение режима визуальной формы.

Тоже подтвердить не могу.

Цитата (Aura)
4. При копировании с одной темы/сообщения содержимого с цитатами, спойлерами в визуальном редакторе при переносе в другую тему - они портят внешний вид, т.е. плохо копируются. Решение проблема пока только отключение отключение визуальной формы (кнопочкой ББ).

Из визуального режима в визуальный, я так понимаю. Да, лучше таким образом сообщения копировать в BB режиме, хоть это и неудобно.
Во всех браузерах, кроме Opera, вставка проходит дополнительную фильтрацию от "неопознанных" элементов, наверное она слишком жесткая и нужно ее пересмотреть. В Opera при вставке форматирование вообще не сохраняется, как я заметил.

Цитата (Aura)
5. В Визуальной форме (и не только) не работает alt+backspace (восстановление удалённых символов/текстов)

У меня оно и в стандартной (старой) форме не работает. Думаю, это не будет сделано. Либо, если будет введена кнопка Undo, можно будет повесить такой обработчик, но не гарантирую.

SanyaSAN, проблема с видео не совсем касается обсуждаемого редактора, ее пропускаю. Если видим "неподдерживаемый формат видео" или что-то в этом роде - это серверная часть, а не клиентская (этот редактор).

Цитата (Stradavar)
Мне приходится 2 раза нажимать на "добавить ответ". В первый случай появляется "текст сообщения не указан", во второй случай "добавлено" то есть со второй попытки тока добавляет сообщение.

А вот об этом подробнее, пожалуйста smile На данном форуме это наблюдается? И уточните также название/версию браузера.

Как вернуть старую панель BB кодов написано в шапке темы:

Цитата (Victor)
Отключить этот редактор можно в Панели управления → пункт "Настройки" в Админ-баре → Общие настройки → Не использовать визуальный редактор комментариев.

P.S.: по поводу ближайших ощутимых обновлений редактора - уже начали рисовать темный дизайн.

#!/usr/bin/perl
Stradavar
Сообщений: 32
Репутация: 3

Сообщение # 613 | 15:30:55
mxCherry

Проблема с "Текст сообщения не указан".

При отправке сообщения выскакивает ajax окно с текстом "Текст сообщения не указан", но при повторном нажатие "добавить ответ" сообщение добавляется.

Вот данные:

http://www.alconite-horde.ru/forum
FF - 18.0.1
Сообщение отредактировал Stradavar - Понедельник, 21 Янв 2013, 15:32:43
Aura
Сообщений: 33
Репутация: 42

Сообщение # 614 | 15:34:09
mxCherry,

Цитата (mxCherry)
В Chromium вроде бы ОК. Наверное, стоит посмотреть на Вашем сайте (Opera, Chrome).
Цитата (mxCherry)
Наверное, тоже на Вашем сайте нужно смотреть, так как подтвердить не могу. Корректное поведение - страница скроллится по вертикали, чтобы редактор стал в центр страницы (его я и наблюдаю).

Не забудьте, должно быть включено ajax быстрое изменение сообщения.
Цитата (mxCherry)
Тоже подтвердить не могу.
Проверила в гугл хроме последней версии на этом сайте, аналогичная проблема (именно при изменении сообщения).

Цитата (mxCherry)
Undo
Если будет, скажу отдельное спасибо. smile

Кстати, ещё + к багам или фичам.
Гугл Хром последняя версия.


Например, я делаю пару цитат или кодов в ВИЗУАЛЬНОМ редакторе:

Цитата
Цитата

Как мы видим на картинке, 2 цитаты подряд. Мне надо вставить между ними текст, а чтобы это сделать, надо между ними поставить перенос строки. А как это сделать? Либо нажать в самый конец цитаты и нажать энтер, либо перед визуальной формы цитаты, и нажать также энтер.
Красным цветом выделена область, куда я кликаю мышкой, т.е. перед цитатой. И мерцающая линия (не помню как называется) оказывается не перед цитатой, а в самой цитате (где должен быть цитируемые текст).

Таким образом, чтобы написать между цитатами, нужно переключиться в ББ коды, там поставить перенос строки, а в виз. форме уже написать желаемое.

(у меня привычка сначала все тексты нацитировать, а потом уже что-то писать).



Код
выавып
Сообщение отредактировал Aura - Понедельник, 21 Янв 2013, 16:15:29
ana4220
Сообщений: 24
Репутация: 20

Сообщение # 615 | 17:57:47
Спасибо за редактор, удивляюсь, ни одного сбоя, пробовал: Opera, Mozilla Firefox. Хромом. Всё как часы, не налюбуюсь.
Скрин:

При переключении: скрин


Для желающих испытать, ставить: Общие шаблоны + Таблица стилей (CSS) в любое место

Код
/* ==== фон поля ввода редактора ==== */
.wysibb-body {
background: url("http://st.datapic.ru/img/13-01/20/Bx7fzRX8H0aJuc0EmeFyKEZCI.jpg") !important; /* здесь можно поставить фоновую картинку */
color: #000000 !important; /* цвет текста новой формы ввода */      
}
.wysibb-body {      
      background: ваш цвет !important; /* фоновой цвет новой формы ввода */
}
.wysibb {      
      border: 1px solid #006400 !important; /* цвет и толщина рамки новой формы ввода */
      border-radius: 6px !important; /* радиус закругления на углах новой формы ввода (0 - углы квадратные) */      
      border-bottom: 1px solid #DDDDDD /* цвет и толщина линии под панелькой с кнопками */
}
.wysibb .wysibb-toolbar {
      background: url("ссылка на картинку") !important; /* здесь можно поставить фоновую картинку */
      background: #607B8B !important; /* фон панельки с кнопками, первый цвет градиента */
      background-image: linear-gradient(bottom, #eee 50%, #fafafa 100%); /* второй цвет градиента */
      background-image: -o-linear-gradient(bottom, #eee 50%, #fafafa 100%); /* тоже второй цвет градиента, для других браузеров */
      background-image: -moz-linear-gradient(bottom, #eee 50%, #fafafa 100%); /* тоже второй цвет градиента, для других браузеров */
      background-image: -webkit-linear-gradient(bottom, #eee 50%, #fafafa 100%); /* тоже второй цвет градиента, для других браузеров */
      background-image: -ms-linear-gradient(bottom, #eee 50%, #fafafa 100%); /* тоже второй цвет градиента, для других браузеров */      
}
.wysibb-text textarea {
background: url("http://st.datapic.ru/img/13-01/20/4lCiRD51pxRZyPvDqoCGT6vPh.jpg") !important; /* здесь можно поставить фоновую картинку */
}
.wysibb-text textarea {      
      background: ваш цвет !important; /* фоновой цвет новой формы ввода, когда она переключена в режим bb-кодов */
}

textarea {      
      color: #000000 !important; /* цвет текста в новой форме ввода, когда она переключена в режим bb-кодов */
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn span.btn-inner {

      border-right:1px solid #b0b0b0 !important; /* цвет правой части лини, разделяющей кнопки */
}

.wysibb .ve-tlb-hide {      
      background: url("http://s64.ucoz.net/uwbb/style/img/icons-1.png") transparent !important; /* картинка со значками на кнопках новой формы ввода, если вы будете заменить их своими, то имейте ввиду, что каждый значок не должен быть больше 22 пикселей в высоту */
}

.wbb-select .val {
      background-image: linear-gradient(top, #7CFC00 17%, #FFC0CB 59%) !important; /* для гурманов: фон над надписью "Шрифт" на одноименной кнопке, первый и второй цвет градиента (можно сплошным цветом) */
      background-image: -o-linear-gradient(top, #7CFC00 17%, #FFC0CB 59%) !important; /* то же самое, для других браузеров */
      background-image: -moz-linear-gradient(top, #7CFC00 17%, #FFC0CB 59%) !important; /* то же самое, для других браузеров */
      background-image: -webkit-linear-gradient(top, #7CFC00 17%, #FFC0CB 59%) !important; /* то же самое, для других браузеров */
      background-image: -ms-linear-gradient(top, #7CFC00 17%, #FFC0CB 59%) !important; /* то же самое, для других браузеров */
      background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.17, #7CFC00),color-stop(0.59, #FFC0CB)) !important; /* то же самое, для других браузеров */
}

.wbb-ufontfamily .val {      
      color: #006400 !important; /* цвет надписи "Шрифт" на одноименной кнопке */
      font-family: "Georgia" !important; /* шрифт надписи "Шрифт" на одноименной кнопке (гурманы в экстазе) */
      font-size: 10px !important; /* размер надписи "Шрифт" на одноименной кнопке */
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container {
      background-image: linear-gradient(top, #BBFFFF 17%, #EEE8AA 59%) !important; /* фон кнопок новой формы ввода, первый и второй цвет градиента (можно сплошным цветом) */
      background-image: -o-linear-gradient(top, #BBFFFF 17%, #EEE8AA 59%) !important; /* то же самое, для других браузеров */
      background-image: -moz-linear-gradient(top, #BBFFFF 17%, #EEE8AA 59%) !important; /* то же самое, для других браузеров */
      background-image: -webkit-linear-gradient(top, #BBFFFF 17%, #EEE8AA 59%) !important; /* то же самое, для других браузеров */
      background-image: -ms-linear-gradient(top, #BBFFFF 17%, #EEE8AA 59%) !important; /* то же самое, для других браузеров */
      background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.17, #BBFFFF),color-stop(0.59, #EEE8AA)) !important; /* то же самое, для других браузеров */
      border: 2px solid #1E90FF !important; /* толщина и цвет рамки кнопок */
      border-radius:7px !important; /* радиус закругления углов кнопок (0 - углы квадратные) */
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn:hover {
      background-image: linear-gradient(top, #FF1493 17%, #FFD700 59%) !important; /* фон кнопок новой формы ввода когда наводишь курсором на них, первый и второй цвет градиента (можно сплошным цветом) */
      background-image: -o-linear-gradient(top, #FF1493 17%, #FFD700 59%) !important; /* то же самое, для других браузеров */
      background-image: -moz-linear-gradient(top, #FF1493 17%, #FFD700 59%) !important; /* то же самое, для других браузеров */
      background-image: -webkit-linear-gradient(top, #FF1493 17%, #FFD700 59%) !important; /* то же самое, для других браузеров */
      background-image: -ms-linear-gradient(top, #FF1493 17%, #FFD700 59%) !important; /* то же самое, для других браузеров */
      background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.17, #FF1493),color-stop(0.59, #FFD700)) !important; /* то же самое, для других браузеров */
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn.on,.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn.on:hover {
      background-image: linear-gradient(top, #FFD700 17%, #FF1493 59%) !important; /* фон кнопок новой формы ввода когда нажимаешь на них, первый и второй цвет градиента (можно сплошным цветом) */
      background-image: -o-linear-gradient(top, #FFD700 17%, #FF1493 59%) !important; /* то же самое, для других браузеров */
      background-image: -moz-linear-gradient(top, #FFD700 17%, #FF1493 59%) !important; /* то же самое, для других браузеров */
      background-image: -webkit-linear-gradient(top, #FFD700 17%, #FF1493 59%) !important; /* то же самое, для других браузеров */
      background-image: -ms-linear-gradient(top, #FFD700 17%, #FF1493 59%) !important; /* то же самое, для других браузеров */
      background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.17, #FFD700),color-stop(0.59, #FF1493)) !important; /* то же самое, для других браузеров */
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn span.btn-tooltip {
      background-image: linear-gradient(top, #00F5FF 17%, #FFFF00 59%) !important; /* фон всплывающей подсказки, которые появляются при наведении на кнопки, первый и второй цвет градиента (можно сплошным цветом) */
      background-image: -o-linear-gradient(top, #00F5FF 17%, #FFFF00 59%) !important; /* то же самое, для других браузеров */
      background-image: -moz-linear-gradient(top, #00F5FF 17%, #FFFF00 59%) !important; /* то же самое, для других браузеров */
      background-image: -webkit-linear-gradient(top, #00F5FF 17%, #FFFF00 59%) !important; /* то же самое, для других браузеров */
      background-image: -ms-linear-gradient(top, #00F5FF 17%, #FFFF00 59%) !important; /* то же самое, для других браузеров */
      background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.17, #00F5FF),color-stop(0.59, #FFFF00)) !important; /* то же самое, для других браузеров */
      border:2px solid #8B4513 !important; /* толщина и цвет рамки всплывающей подсказки */
      font-size:11px !important; /* размер шрифта всплывающей подсказки */
      color:#FF0000 !important; /* цвет шрифта всплывающей подсказки */
      border-radius:5px !important; /* радиус закругления углов рамки всплывающей подсказки (0 - углы квадратные) */
}
/* ==== Конец фона поля ввода редактора ==== */


За коды: Спасибо Шидла! Редакция цвета: ana4220
Сообщение отредактировал ana4220 - Вторник, 22 Янв 2013, 21:48:23
Сообщество uCoz » Общение пользователей » Разговоры про uCoz » Визуальное редактирование сообщений (тестирование)
Поиск: