Итак, встречайте: "Упрощенный визуальный редактор"
Если говорить правильно и без лишних эмоций, это элемент управления, предоставляющий средства минимального редактирования различных текстовых данных. Использоваться может (и будет, я предполагаю) повсеместно.
[spoiler]
В ближайшем обновлении модуля «Управление структурой» выйдет в виде служебного компонента, однако, чтобы его эффективно использовать, бросить компонент на страницу – недостаточно. Но это, в общем то понятно: визредактор в чистом виде никому не нужен) Он должен редактировать что-то, и это что-то нужно обрабатывать и сохранять
Ниже я еще вернусь к этому.
А сейчас просто брошу свеженарисованную "желтую таблетку" во "взрослом" редакторе. Сохраняем страницу и смотрим. Выглядеть будет как на рисунке выше а может и так:
Или даже так:
В параметрах компонента можно настроить его внешний вид, ширину, высоту и отображение тулбара:
Плавающая панель инструментов – позволяет корректно использовать редактор с небольшой шириной. А если поставить флажок «Скрывать плавающую панель при потере фокуса», то, соответственно, панель будет прятаться
Набор и порядок кнопок тоже может меняться, но не в параметрах компонента (пока!).
При разработке редактора одной из главных целей было устранение «монструозности» взрослого редактора, со множеством его возможностей, и расширяемостью. Кроме того удалось упростить его ядро, парсеры, значительно уменьшить время загрузки, сделать «легкозапускаемым» в публичке (работать может даже для анонимов).
Базовый функционал редактора остался, описывать не буду, остановлюсь на небольших новшествах.
- Возможность править текст ссылок, или создавать ссылки не выделяя текст:
- В диалоге вставки и редактирования изображения появилась возможность изменять размеры с сохранением пропорций:
- Появилась возможность вставки видео:
если задать картинку предпросмотра, по в области редактирования увидим эту самую картинку:
- Модернизированный колорпикер с расширенным набором популярных Web-цветов:
- Возможность задания шрифтов, размеров, и заголовков. Списки стали компактнее:
- Работает контекстное меню для элементов: ссылка, рисунок, видео(Для Opera контекстное меню можно вызвать Shift+Click, для остальных - RightClick).
- Весь основной функционал работает в IE7, FF3, Opera 9.5, Google Chrome, Safari. Но в экзотических браузерах (IE6--, FF2--, Google Chrome, Safari) могут быть различные нюансы.
И еще раз про использование. Попробовать и посмотреть на результат можно при помощи простой формы, например так:
<? $content = isset($_POST['html_content']) ? $_POST['html_content'] : "<i>Put</i> <b>content</b> here"; echo $content; //* Не стоит забывать о проверке поступающих данных, фильтровать от XSS ?> <hr /> <form action="<?=POST_FORM_ACTION_URI?>" method="post" enctype="multipart/form-data" name="my_form" id="my_form"> <?$APPLICATION->IncludeComponent( "bitrix:fileman.light_editor", ".default", Array( "CONTENT" => $content, "INPUT_NAME" => "html_content", "WIDTH" => "300px", "HEIGHT" => "200px", "USE_FILE_DIALOGS" => "N", "FLOATING_TOOLBAR" => "Y", "ARISING_TOOLBAR" => "Y", ) );?> <input type="submit" value="Submit"> </form> |
Я добавил рисунок и "запостил" форму... Получилось так:
Этот пример только для демонстрации, но я думаю воображение разработчиков и желания заказчиков помогут найти разумные варианты использования
Сейчас легкий визуальный редактор уже интегрирован в пользовательские свойства инфоблока типа "HTML".
Скоро появится в формах компонента добавления элемента инфоблока.
Наверное, успею интегрировать в корпортальный "Календарь событий" - для описания событий, выглядеть будет как-то так:
В планах, облегченный редактор научится понимать и сохранять BB-коды. Набор кнопок, конечно же немного изменится, появятся смайлы, цитаты, а параметры в диалогах поредеют:)
Но зато его можно будет использовать в блогах и форумах.
Последние месяцы работы были очень и очень напряженными, и совсем немного времени осталось до часа «Ч»
, и многое еще предстоит сделать, проверить, доработать…А сейчас чувствую сильную усталость и ...удовлетворение от проделанной работы. Большую часть из запланированного удалось выполнить, а это, безусловно, - гуд!
Всем удачи! Ждите новых обновлений 8.х.х!
По быстрее бы...
Отличная работа, Дим, отличная статья!
Дмитрий, Сергей, спасибо за поднятое настроение!!
А приоткройте еще, плз, завесу.
Парсер вынесен, наконец, в отдельный централизованный класс?
А как с расширяемостью будет, в т.ч. парсера?
А как будут обстоять дела с внедрением в админку (форма, редактирование списком)?
И даже дизайн поменять - легко?
/оффтопик/
А будет ли медиабиблиотека? Чтобы фотки, музычку, доки, видео и прочие файлики на сервере хранить в порядке.
Блин, неужели жизнь налаживается...
Парсер вынесен, наконец, в отдельный централизованный класс?
А как с расширяемостью будет, в т.ч. парсера?
Т.е. разные хитрые конструкции, скрипты, пхп, не поддерживаются.
Вообще я склонен, скореее доработать и опубликовать апи по полноценному визуальному редактору, там возможностей было и будет гораздо больше.
Целевое назначение Упрощенного редактора - только HTML.
Все поддерживаемые настройки, и конфигурации будут документированы (для класса) и вынесены в параметры компонента.
А как будут обстоять дела с внедрением в админку (форма, редактирование списком)?
И даже дизайн поменять - легко?
Будет возможность в параметрах компонентов уазывать набор и порядок кнопок.
Также будет еще ряд настроек, для ограничения настройки списков шрифтов, размеров, и, наверное, классов.
А будет ли медиабиблиотека? Чтобы фотки, музычку, доки, видео и прочие файлики на сервере хранить в порядке.
Будет!
/кроме медиабиблиотеки/
Вот скажите, с какой целью делается чрезмерная денормализация всего функционала?
Вопрос даже не персонально к Вам, а вообще глобально по продукту.
А конкретно по редактору. Вот будет у меня в ТЗ: визуальный редактор для текстовых полей с дополнительными кнопками "таблица", "музыкальный файл",
"флэш" (не видео через ссылку, а чистый флэш), дизайн в стиле "air со спецэффектами" и еще куча всего другого.
Поможет мне этот редактор? Ответ - нет! Учтут эти моменты менеджеры, которые составляли и подписывали смету на проект? Скорее всего, тоже нет.
А если и учтут, то стоимость разработки вряд ли устроит заказчка, а значит, он откажется от специфического функционала и/или дизайна, а может и вообще от услуг студии, но в обоих случаях продукт потеряет свою привлекательность, как для заказчика, так и для студии.
Ладно, предполагаю, что вы скажите: "в полноценном редкаторе все это будет", ну, мне бы хотелось в это верить, но позвольте, в моем понимании облегченный от полноценного отличается количеством допустимого/включенного функционала, а ядро должно быть одно. Вы выпустите облегченный редактор, за время разработки полноценного,
облегченный уже успеют "навнедрять" партнеры на ряде своих проектов, навешают на него кучу костылей (куда уж здесь без них), а потом бац - "И снова здравствуйте!"...
В общем, плохо все это.
Часто в попытке сделать все очень универсально, расширяемо и настраиваемо разработчики "улетают в космос". В итоге получается все очень универсально, но только пользоваться этим почему-то неудобно. Уверен, что с каждым такое было.
Упрощенный редактор основан на своем ядре, для увеличения быстродействия, и уменьшения объема кода, упрощения, все это было сделано осознанно.
Понимаю, что хочется чтобы в стандарной поставке было все что написано в ТЗ, но только тогда стандартная поставка настолько распухнет, что от "Упрощенным" будет только слово в названии.
- Функционал редактирования таблиц, - наверное, будет (в отдельном подключаемом файле)
- Функционал добавления flash, - вероятно, будет (в отдельном подключаемом файле)
- Дизайн в стиле air со спецэфектами - не будет!
- API по по добавлении кнопок, диалогов, и парсеров - будет!
Внешний вид можно очень сильно поменять одними только css.В конце-концов Вы можете прекрутить FCK-Editor в публичку (не знаю, может там есть дизайн в стиле air со спецэффектами).
Упрощенный редактор - это штатная ему замена, с легкой интеграцией.
Я не утверждаю, что денормализация - это зло, я говорю о чрезмерной денормализации, которой грешит в последнее "битрикс".
Кстати, логику стандартных кнопочек, которые я сейчас вижу на картинках, уверен на 100%, что рано или поздно мне нужно будет изменить. Не потому, что там "все плохо", а потому, что нужна будет просто другая логика. Если текущая реализация редактора мне позволит сделать эту работу без костылей и я смогу повторно использовать результат на других проектах, тогда нет вопросов абсолютно, это и будет то, что нужно. То же самое касается и дизайна самого редактора и его элементов, а изменением тольок css не всегда можно добиться желаемого результата.
А как дела обстоят с безопасностью? Если юзер захочет добавить картинку, то в какую папку оно будет ложиться и как?
А как дела обстоят с безопасностью? Если юзер захочет добавить картинку, то в какую папку оно будет ложиться и как?
Все проверки контента должны быть реализованы на сервере.
Никакая загрузка картинок редактором не реализуется. Это только клиентский элемент управления. В диалогах вставки ссылки, картинки и видео можно включить файловый диалог(из параметров). Хитрой вставки картинок с одновременной загрузкой (как в блогах) - сейчас нет!
Все отзывы и пожелания Вы можете оставлять здесь или, что более правильно, отправлять в техническую поддержку.
Как вариант вставка как Flash, т.к. с тегом embed разные браузеры в визуальном режиме расправляются по-разному.
Но, пришел в голову еще один вариант... В общем посмотрим, подумаем.
А теперь по существу. Когда сделаете чтобы при нажатии на Enter появлялся тег <p>?
А при нажатии на Enter+Shift -- <br/>
Сейчас происходит маразм - в каждом броузере по своему, то br, то div, то p...
Это очень не удобно!!!
А при нажатии на Enter+Shift -- <br/>
Сейчас происходит маразм - в каждом броузере по своему, то br, то div, то p...
Это очень не удобно!!
У разных браузеров - разные разработчики
Вот тут вы не правы. FСKEditor смогли сделать, а вы получается не можете?
Но там же можно подсмотреть как они это реализовали!!!
Я бы так и сделал на вашем месте.
Ну очень неудобное вы сделали. Не понимаю, как это можно допустить в релиз...
Сложных? Теперь я вас вообще не понимаю. По статистике многие еще сидят на IE6. Как можно их в аутсайдеры включать?
Но там же можно подсмотреть как они это реализовали!!!
Я бы так и сделал на вашем месте.
Ну очень неудобное вы сделали. Не понимаю, как это можно допустить в релиз...
Вы всегда можете поставить себя на мое место. Визуальный редактор допускает расширяемость, и переопределение практически любых методов. Как это сделать, можно найти в документации.
Честь и хвала разработчикам FCKEditor. Но на данный момент задача переопределение обработки браузером нажатия Enter-а далеко не самая актуальная задача.
Надеюсь что вы все-таки это сделаете.
Впрочем мы попробуем также сами сделать. Патч примете?
В обработчике необходимо учесть, что Enter м.б. нажат в списке, в ссылке, в праграфе, спане и пр. А также стараться избегать генерации вложенных параграфов.
Из методов редактора могут пригодиться insertHTML, и все что связанно с selection-ами.
Включение в поставку, ровно как и любые вознаграждения в виде балов, не могут быть обещаны авансом
А Google Chrome фигурирует в обоих списках.
И все-таки очень хочется подсветку кода html и php
Сейчас с упрощенным редактором известна проблема с некорректной подгрузкой рисунков в CSS. Мы планируем исправить ее в очередных обновлениях.
Кроме того в скором времени появитятся штатные методы для очистки содержимого (полученного из визредактора) от XSS.
Юзерам они очень нужны!!!