Хочу представить на суд общественности один наш продукт, выпущенный под open source лицензией.
elRTE и
elFinder — это свободный WYSIWYG редактор для сайтов и систем управления контентом (CMS) и файловый менеджер для него.
Сайт проекта:
elrte.ru | Проект на sourceforge:
sourceforge.net/projects/elrte/
Расскажу, в общих чертах, почему мы за это взялись и, что у нас получилось. В нашей CMS мы пользовали FCKEditor. Почему же решили написать свой редактор? Сложно сказать. Решение вызревало довольно долго. Немаловажную роль оказала любовь разработчиков начинать проекты с нуля и изобретать велосипеды. Но это так — эмоции.
Объективными причинами разработки стали известные недостатки существующих редакторов:
● отсутствие интерфейса для работы с css для «непосвященных». К примеру, невозможно для картинки задать отступы отдельно по каждому направлению — вместо этого создаются невалидные hsize и vsize.
● Невалидный код (align, border и тд), который становится бесполезен при использовании css фреймворков со своими reset'ами
● Отсутствие простых но необходимых мелочей. Например можно создать картинку, плавающую в тексте, но нет возможности остановить плавание в нужном месте без знания html.
Мелочь конечно, но попробуйте объяснить секретарше, что делать, чтобы иллюстрации в новостях не наползали друг на друга.
● Куча разных шаблонов для диалоговых окон и пр… Концов не найдешь, если надо что-нибудь «подпилить»
● Баги, которые кочуют из версии в версию, пока сам редактор обрастает бестолковыми бантиками.
К примеру — FCKEditor, будучи размещенным в плавающих дивах, при разворачивании в полное окно просто исчезает с экрана, зато у него теперь новые иконки.
● Тяжеловесность и медлительность на старте.
● Уродливые, извиняюсь за резкость, файловые менеджеры с невероятной логикой хранения файлов по типам и неудобным интерфейсом.
Все эти причины по отдельности — незначительны, но вместе они и создали ту критическую массу, что толкнула нас ввязаться в подобное безнадежное предприятие.
Хотя я довольно резко отозвался о существующих редакторах, я с большим уважением отношением отношусь к разработчикам FCKEditor'a и TinyMCE. Некоторое количество идей я позаимствовал из этих проектов. Но с самого начала я отказался от мысли делать независимое от других библиотек приложение.
Вся рутинная работа по работе с селекторами, ajax, созданию диалоговых и пр… была отдана jquery jquery-ui. Понимаю, что это может ограничить круг пользователей, но все равно считаю это решение правильным.
Если с интерфейсом редактора все просто и понятно, то с файловым менеджером все сложнее. Хотелось, чтобы он максимально был приближен к десктопными приложениям. Когда вы выбираете файлы в файловом менеджере вы, ведь, не делаете это с помощью чекбоксов. Именно такой интерфейс мы и попытались сделать. Выделяете файлы простым кликом мыши. Можно выбрать группу файлов с Ctl/Command/Shift. А дальше — как больше привыкли — используйте иконки на панели инструментов или контекстное меню или сочетания клавиш (Ctl+C/Ctl-V).
Вторая цель, которую мы преследовали при разработке elFinder, как мы для себя ее определили — минимально необходимый функционал. Никаких указаний размеров превьюшек и прочих ненужных настроек. Только то, что необходимо для работы. Именно поэтому он и получил такое имя — elFinder. Он очень ограничен, но свою работу выполняет как положено. Я считаю, что мы справились с поставленными задачами.
Хотя редактор еще в стадии второго релиз кандидата, он уже обладает 80% возможностей своих старших собратьев, не считая его собственный уникальных возможностей. Он значительно легче — 139kb elRTE + elFinder в одном файле (минимизированный без офускации кода). Инициализация происходит заметно быстрее, чем у FCKEditor'а. elFinder — он просто работает и все тут.
Хотя редактор и разрабатывался для нашей системы управления, мы с самого начала решили сделать его открытым. В ближайших планах — попробовать интегрировать его в Joomla.
P.S. Текст написан Дмитрием
dio, являющимся техническим директором и разработчиком проекта. Опубликован по его просьбе. Я лично к данному проекту отношения не имею. Все вопросы, респекты и плюсы в карму к нему.
комментарии (114)
Давно уже в закладках, сейчас поковыриваю его интеграцию в django, с вашего позволения.
Так держать!
+В Опере не закрывается почему-то сообщение о создании папки,
не кликается «бордюр», «отступы» в окне изображения (тестировал на 9.51)
+В хроме при выделении картинки, она не подсвечивается и даже не исчезает курсор (версия 4, portable)
+В хроме панель «изображение» — «дополнительно» открывается совершенно пустой
+При создании папки файлменеджер не прокручивает список файлов/папок к созданной.
+Редактирование таблиц в хроме тоже работает некорректно.
+В опере если выделить часть заголовка и часть текста дальше и изменить им цвет, выделением поглощается лишняя часть текста
+Текст из ворда не очищается, я так и не понял в чем смысл кнопки «вставить из ворда», если вставляет она так же как и прямая
+Нет контекстного меню у редактора
+Выбор цвета из фиксированной палитры неудобен, кроме того сделали бы cursor:pointer хотя-бы
+А как же вставка спецсимволов?
+В ИЕ6 судя по всему полный анус, т. к. даже кнопки нормально не отображаются, дальше тестировать не стал
+В ИЕ8 проблеммы с z-index выделения картинок, оно вылазит на панель с кнопками
+Переключение редактор/исходник в самомнизу редактора не очень удобно
+В статус-баре внизу DOM-путь хорошо бысделать кликабельным для выделения родительских элементов n-ного уровня
+А как мне посмотреть файл-менеджер не вставляя картинку? Могли уже бы вставить кнопку туда где редактор\источник
+Очень неюзабельные выпадающие менюшки, я интуитивно после клика тащу курсор вниз, на место выпадающего меню, а оно сразу сворачивается. Видимо это из-за анимации (хотя сама анимация симпатична конечно, но как-то неприкольно что все время они у меня закрываются раньше времени)
+Как жить без списка классов для текста? Хотелось бы единый кастомизируемый список где классы совмещены с типами элементов, например заголовок А — это h1 с каким-то классом, заголовок B — с другим классом.
+Нет контекстного меню в редакторе
+Это как-то нелогично, что если у меня в файл-редакторе выбрано несколько элементов, возвращается код последнего.
+О боги, дайте же пользователям файл-менеджера откуда-то скопировать путь к файлу на сервере!
+Не хватает cursor:pointer в файл-менеджере и неужели нельзя было заблокировать там выделение текста в html при групповом выделении файлов к примеру.
+В файловом менеджере я создаю папку но внутри ее я уже ничего записать не могу. Могли бы позаботиться о ChMOD (ну ладно, может недостатки демо а не самого редактора)
+ При вставке незакрытых и взаимно перехлестываемых тегов в источник оно их не закрываета просто удаляет
+В ИЕ7 редактируемая область (вместе со скроллом) занимает только половину отведенной ей высоты, а ниже до кнопок редактор/исходник огромное белое пространство (ну ИЕ7 у меня через IETester если что)
+В ИЕ8 при входе в созданную мной папку текст из левой панели со списком папок перекрыл правую панель со списком файлов.
Вердикт: этот продуктв данный момент нельзя использовать, он пока слишком сырой.
Хотя авторам конечно спасибо за труд, добавил в закладки.
Я однозначно остаюсь с CKEditor (бывший FCK).
А вообще это классно, что Jquery + Jquery UI (по крайней мере для меня, т. к. я это юзаю). Хотел вот писать свой WYSIWYG на JQuery. Теперь думаю, заняться дотачиванием этого редактора под свои нужды, или все-таки точить CKEditor )
Пожелаю ребятам только развивать свой продукт далее, перспективы когда-то догнать и перегнать CKEditor у них конечно же есть. И уже есть преимущества, о чем разработчики собственно и пишут в этом топике.
Но я считаю, что эти преимущества пока совсем не окупают кучу багов, над которыми нужно работать. Позитивный момент здесь в том, что преимущества уже есть, а баги всегда можно исправить, было бы время и желание. Главное чтобы проект не забрасывали.
CKEditor 3.0.1, released on 16 October 2009
CKFinder 1.4.1.1 released 02 Oct 2009
FCKeditor 2.6.5 21 Sep 2009
CKEditor 3.0 released 21 Aug 2009
CKFinder 1.4 released 20 Aug 2009
CK — это просто следущая версия FCK, название сменено потому что на онглицком FCK вызывает двоякие ассоциации. Изменения в структуре CKEditora — значительные, он стал намного легче.
Кроме того над этими продуктами работает далеко не один Frederico Caldeira Knabben, у них как минимум — основная команда из 5 человек, они ведут блог, посвященный своим разработкам и работа над развитием этих продуктов в последнее время идет очень активно.
А про микротик — бальзам на душу =)
FCKEditor задрал.
Вопрос, если у меня вся статика лежит на отдельном поддомене, кросдоменных проблем как в FCKEditor не будет?
Firebug вываливает в консоль какое-то исключение, при попытке какого-то fck'шного скрипта (загруженного соответственно с домена static.*) изменить что-то на странице (которая в основном домене).
Очень понравился редактор.
Буду следить за новостями и прикручивать к WP
На самом деле, сейчас со временем туго… Как сделаю, опубликую) Ничего сложного в этом нет)))
Ни к чему прикручивать не буду, но в закладки занесу )
Для дальнейшего развития проекта крайне нужен фидбэк. Форумоподобное что-то.
Ну и немного примеров добавить. В частности меня интересует как заменить ckfinder на elFinder.
1. а будет\есть функция «шаблоны» как в CKeditor?
2. то есть превьюшки, как я понял, файл менеджер не делает. а сложно эту функцию дописать, ибо это полезная вещь, в каком направлении ковыряться?
Однозначно в закладки.
И вот еще что — на мой взгляд лучше убрать анимацию при открытии менюшки выбора размера, типа и стиля шрифта. Тормозит )
Ну и мне тоже не понятно с первой попытки как выбрать файл в менеджера.
А в целом — блестящая работа! Спасибо за труды, и успехов в выпуске final релиза )
У меня так получилось, может еще варианты есть =)
Ваш редактор выглядит достаточно мило, как только научите его не писать кучу кода ради строчки из 28 символов — подумаю о возможности его использования.
Идеальный редактора на мой взгляд — это тот, которому можно указать «возможные теги», а всё остальное он сам чистит налету (во время вставки текста). А то какой-то сранный вотюзиизвотюгет получается… в поле я могу навставлять <form>, <input> и style='', а на сервере всё это обрезается потом ради чистоты интернетов
При использовании друпала мы нативными средствами либо разрешаем весь хтмл (т.е. и iframe тоже), либо только разрешённые тэги (ссылки, заголовки, списки, жирное, подчеркнутое, картинки), но таком случае вся эта простыня вылазит наружу в виде текста.
И за чистотой интернетов в таком случае тоже не проследить… жалко когда сайты от действий секретарш превращаются в творения из серии так верстают только мудаки
Для себя юзать — может быть… для продакшена — пока точно нет.
А то всех переучивать, что вставка текста только «через такую кнопочку с буквой 'T'» немного нудно и не просто.
Иначе пока не получалось…
А еще бесит тема если удалить весь текс т с редактора и перейти на исходник там стоит БР, практически в любом редакторе, вопрос ЗАЧЕМ?
Приятно юзать демку в работе.
Исключения:
1. По возможности, добавьте опцию прилепить класс из какого-нить CSS в режиме визреда.
2. В файлменеджере напрашивается изменение размеров левого окна мышкой.
3. Настройка переносов между p и br в режиме визреда.
4. Прикрутить возможность хайлайта кода а ля как на Хабре код вставляют. (Хотя я догадываюсь, что не полпинка дело.)
Но вот то, что я могу при желании вписать какие-то ненужные теги, это лишнее.
Но мой простенький файл менеджер пока умирает при большом количестве файлов или папок. Интересно как у вас с этим дела :)
Подскажите, пожалуйста, как себя поведет elFinder при открытии папочки с большим количеством картинок, например штук 1000?
У меня была собственная неплохая модификация openWYSIWYG редактора, которая по функциональности не уступала вашему elFinder, но сейчас я отказался от нее и вообще от всех WYSIWYG-редакторов. Я считаю гораздо более перспективным принцип WYMeditor, тоже сделанный на jQuery. Сейчас по мере необходимости дополняю его функционал.
Над всеми этими вопросами думаю и я, потому редактор у меня не с нуля свой но допиленный, все остальные что я видел меня пугают.
Давно искал подобную программу на jQuery ui, я как раз его использую в одном проекте. Спасибо автору
Попробую ответить на заданные вопросы.
— Версия без jquery не планируется, но в след версии файлового менеджера не будет нужен jquery.metadata
— шаблоны и стили в редакторе будут обязательно
— Чистка кода пока в зачаточном состоянии. Это одна из первоочередных задач
— Превьюшки фм делает (gd, imagick или mogrify). Должен делать :)
— На большом кол-ве файлов — будет лагать. В следующей версии (сейчас в работе) будет кэш и отложенное создание превьюшек — надеюсь это ускорит его работу
— выбор файла для вставки в редактор будет «перевешен» на двойной клик
— интеграция с вордпресом и джумлой в планах. Ближайшая задача — коннектор на питоне
Если, кто-то может интегрировать наши проекты с существующими блогами и cms, мы с удовольствием поможем. У нас не так много ресурсов, чтобы сделать это сразу и быстро.
Были бы признательны за багрепорты на нашем багтрекере/форуме
— возможностей загрузки не сразу всего навороченного интерфейса, а например только «жирное курсив подчёркнутое ссылка», чтобы была возможность отобразить для формы комментариев один вид, для редактирования статьи — другой.
— лайт версию вставки картинки: [прикрепить картинку] -> указать файл/урл -> ОК. И чтобы я при этом не видеть никаких полей кроме Альта, тайтла и размеров.
— чтоб кнопки [выравнивание влево] [выравнивание вправо] добавляли class='left', class='right' для тэгов p и img (чтобы избавиться от style='' и align='')
Если всё это будет + чистка кода при вставке (ctrl+V) из ворда + чистка кода до заранее заданных тегов (чтобы невозможно было вставить form и input) — перейду незадумываясь!
Да… ещё одна мелочь, которая тоже будет полезна — плагин дружбы с типографами.
Насчет лайт версии вставки картинок — сделаем.
Изменить поведение кнопок выравнивания можно пока только, переопределив их.
Типографы это хорошо и конечно будут, но врядли в финальной версии. Только если кто-нибудь поможет :)
кеш и отложенное создание превьюшек мне, к примеру, не помогли… когда файлов более 500 приходится ждать… решил немного по-другому — сделал рисунки квадратами по 50 пикселей, прижал друг к дружке без зазоров и поставил загрузку на событие onmouseover. Названия файлов можно пустить или под ними, или при наведении выводить в подсказке.
Все дело в том, что редко приходится копошиться в файл-менеджере, обычно добавишь картинку и даже файл-менеджер не особо нужен. Не должен он тормозить тогда, когда нужно что-то в нем по-быстрому сделать.
тоже надо для Drupal'а, но у меня, боюсь, мозга не хватит :)
Что бы вставленный объект в редакторе был виден как картинка, это все чаще и чаще требуется.
По идее это можно выдрать из MCE.
В остальном все хорошо, респект за вашу работу.
Присоединяюсь к запросу насчет вставки видео.
Чистку будем еще пилить :)
заюзаю щас!
Особенный акцент сделаю на файловый менеджер!
Заранее спасибо, ребята )
ps Назовите его Erlit, об elRTE язык сломаешь =)
Обязательно попробую на каком-нибудь текущем проекте внедрить.
Простите, но если сложно сказать почему занялись этим, скорее всего вы не очень понимали что должно получиться в итоге.
Сошлюсь исключительно на свой опыт: даже самая продвинутая «секретарша» (обобщаю) в конторе заказчика, пусть способная в Word'е, но далёкая от html и понимания принципов веб верстки, вооружившись ЛЮБЫМ визуальным редактором, предоставляющим возможностью применить кучу настроек к тексту (шрифт, начертание, размер, цвет, выравнивание и пр) способна в считанные клики сделать из продуманного дизайнером органичного сайта унылое Г.
А выходов из этой ситуации я вижу только два — либо делегирование верстки контента человеку «в теме» либо использование топорных редакторов, котрые кроме выбора из двух-трёх предустановленных дизайнером стилей, ничего с текстом сделать не дадут.
Редактор только со стилями — что-то вроде маковского Pages, вот только, как это все в веб перенести?
Более того, я подозреваю что «отсечь» лишний функционал можно и в вашем редакторе с помощью одной-двух настроек и тогда он станет инструментом моей (или заказчика) мечты :)
Отсечь лишний функционал в редакторе можно уже сейчас — просто не подгружать не нужные кнопки
опера 10.01
CMS — прошлый век
Некоторые вещи просто убили:
— OK и Cancel (учитывая то, что этот РУССКОЯЗЫЧНЫЙ редактор вы писали сами, а не переводили или переделывали, в чем я уже немного сомневаюсь)
— Рыба (Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin), по той же причине.
— Перевод Выравнивания только для Слева и Справа, по той же причине.
— Вместо URL хотелось бы видеть «Ссылка (url)»
— Detail description URL, по той же причине.
Очень прошу ответить, почему так получилось?
=============
В целом же (несмотря на баги, описанные выше), ОЧЕНЬ понравилось.
Мы, вообще то, не заявляли, что это «РУССКОЯЗЫЧНЫЙ» редактор.
— Ok и Cancel — так и не нашел способа подсунуть локализованые названия в jquery-ui.dialog, если подскажете, как это сделать- буду признателен
— Рыба. текст — первое, что под руку попалось. Надо бы заменить на фрагмент из «Автостопом по галактике»
— Остальные недопереведенные тексты — или пропустили или не смогли найти короткий аналог на русском языке и отложили
Если сомневаетесь в нашем авторстве — просто загляните в код.
Спасибо, что пояснили.
От себя пока что только одно добавлю (дабы не перегружать) — заменить мини-кнопочку открытия файлменеджера на что-то более вменяемое, видимое и кликабельное, например на кнопку Открыть/Загрузить… или что-то получше.
моя версия на: code.google.com/p/lwrte/
p.s.: вот правда я до сих пор не могу понять — ОТКУДА 139Кб у вас, если вы используете jquery и тем более jquery-ui еще. или же это включая все эти библиотеки?!
this.doc.execCommand('styleWithCSS'
Если в Firefox сделать так, что редактор подгружается аяксом, то вылетает такая фигня и инициализация останавливается
uncaught exception: [Exception… «Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLDocument.execCommand]» nsresult: «0x80004005 (NS_ERROR_FAILURE)» location: «JS frame :: ....js :: anonymous :: line 8071» data: no]
так что не обращайте внимания
«this.form.tabs is not a function»
На странице Создание web сайтов бяка вылезла:
Warning: Call-time pass-by-reference has been deprecated in /home/users/w/wsdlab/domains/wsdlab.ru/components/com_catalog/models/pricelist.php on line 17