Pull to refresh

Comments 88

Спасибо за описание своего труда. Я в своём проекте пользуюсь: jsRedactor, работает и на iOS и во всех браузерах, в том числе IE. Очень нравится и код открыт для модификации.
Пожалуйста :)
suitUp пока что не тестировался на мобильных. jsRedactor был одним из редакторов, которыми я вдохновлялся.
Спасибо, было интересно посмотреть вашу реализацию. Что касается jsRedactor, хотел вас обоих спросить, были случаи с клиентами когда им чего-то в нем не хватало?
Я им не пользовался в проектах, ничего не скажу.
На этот случай там есть возможность написать плагин. Но увы сам редактор платный.
Это понятно. Мне интересно или большинство пользователей это устраивает. У меня был случай когда заказчик захотел Changes Tracker + comments. Вот это было что-то, я долго пытался отговорить его от этой затеи, но он не хотел слушать.

Добрый человек Chesnovich ниже сообщил приятную новость:
Для Yii-фреймворка команда скинулась и купила лицензию. Можно пользоваться бесплатно :)
это стоит повесить на сабмит и это задача не редактора, а системы.
Не совсем так. Когда вы пишите текст в редакторе, он должен выделяться каким-то цветом и к каждой измененной строке нужно повесить коммент. Очень похоже на то что есть в ворде. И поверьте, не очень просто следить за курсором и выделять именно ту область что нужно когда там уже есть куча тегов и текста.
Когда-то он был опенсорс, до какой-то старой версии. Есть мнение, что старую версию можно использовать как основу для форка бесплатно.
Под андроидом демо пример, вроде как, работает.
UFO just landed and posted this here
Единственный минус этого редактора что нельзя вынести панель. То бишь можно, но только если у вас панель для одного инстанса. Да и код он генерит иногда так себе.

для себя просто переписал nicEdit, заставил его использовать jQuery, убрал устаревший код и т.д, Словом вышло не хуже решения от imperavi. Если кому интересно, могу выложить это дело на gitHub.
Было бы интересно ознакомиться
Ближе к выходным выложу, там рефакторинг небольшой нужно сделать. Могу потом описать, чем лучше/хуже других решений.
Выложили? Сообщите, пожалуйста.
Для Yii-фреймворка команда скинулась и купила лицензию. Можно пользоваться бесплатно :)
о боже! дяденька, вы где были раньше! я искал это целую вечность! лучей добра вам много!
Могу сказать, что сломать им разметку лишь ненамного сложнее, чем любым другим редактором. Хотя если включить режим paragraphy и регэкспы чуть подправить то уже сложно что-то сильно поломать.
UFO just landed and posted this here
В опере слетает фокус при переходе на кнопки — видать тот же баг что и в большинстве редакторов при работе с выделением текстов.

Операции вставки текста ломают структуру параграфов.

в webkit-ах не фиксится переход на новую строку. Должен создаваться параграф, а вставляется br. Словом в моих проектах использовать эту штуку не буду. А учитывая что подобных мини-редакторов пруд пруди, то выбор есть. Хотя я уже отчаялся и просто написал под себя.

Проблема с параграфом решается, если каретка находится в параграфе (а так она в диве). Исправил, обычным обрамлением текста в <p>.
jQuery._createElement = function( tagName, props ) {
	return $( $.extend( document.createElement( tagName ), props ) );
};

О ужас! Зачем же Вы так? Грешновато, грешновато.
Поясните. Мне совершенно не нравится встроенная в jQuery возможность создания элементов.
Тоесть Ваш вариант

$._createElement('a', {
    'className': 'link'
    'href': '#'
} );

чем-то лучше чем

$('<a>', {
    'class': 'link'
    'href': '#'
} );

?
Тем, что в первом случае указываются свойства, во втором — атрибуты (моя прихоть; и да, я знаю о методе .props). $._createElement в самом плагине ссылается на функцию create (то бишь с возможностью минимизации).
У Вас какие-то странные представления о минимизации, если бы Вы и заботились о ней, то написали бы совсем другой код.
В чем выигрыш задания свойств — я тоже не понимаю. Тем более что в случае boolean-атрибутов jQuery значение свойства тоже меняет. Что contentEditable, что value, text, даже html можно задать с помощью указанного выше мной способа. Даже если не хотите избавляться от метода, то не стоит его писать в jQuery, у Вас же есть свой jQuery.suitUp, почему бы туда не положить?
Объясняю: ваш вариант парсится регуляркой, создаётся тег, добавляются атрибуты, которые внутренними механизмами браузера меняют свойства, тег обрамляется в jQuery.

У меня: создаётся тег, добавляются свойства, тег обрамляется в jQuery.

Да и не зачем использовать жикверь, если можно воспользоваться встроенными функциями, что за мода?
Вы странный, используете jQuery и, тем не менее не хотите им пользоваться. Если бы Вас волновало быстродействие, то Вы бы пробежались по объекту for'ом и задали атрибутам значения через setAttribute, потому что extend с ним тоже не сравнится :) Выбрали jQuery — пишите на нем и пишите красиво, чего возмущаться. Вы же даже data-атрибуты вешаете через attr, разве это ок?

А вообще, милости прошу в мою серию статей о jQuery, возможно Вы узнаете что-то новенькое.
Во-первых атрибуты использовать не нужно, если есть свойства. Во-вторых возмущаюсь здесь не я. Как решил правильным сделать, так и сделал.

И милости прошу форкнуть проект и сделать так, как нравится.
Точно, опечатался с setAttribute. Хотел написать «Пробежались бы по объекту for'ом и задали свойства напрямую», конечно.

Извините что потревожил, я не хотел обидеть, просто у меня возникло ощущение того, что Вы так пишете, потому что не представляете как работает jQuery. Оказалось, это неправда.
Вы серьезно думаете что это претендует на звание аналога jQuery?
Что это за троллинг?
Очень нравится редактор WysiBB. Посмотрите его, он вам понравится. Тоже легкий. А вообще основная проблема всех WYSIWYG-редакторов в том, что на выходе получается говнокод.
Да, от говнокода можно исправиться только используя огромные по количеству строк редакторы. Этого частично можно избежать, не используя команды forecolor, fontname и подобных, добавляющих тег font.
Я извиняюсь, но название надо было поаккуратнее делать — я два раза читал и Shit Up! получалось) Ну спасибо за работу)
UFO just landed and posted this here
Это беда конкретно хрома.
UFO just landed and posted this here
Получается, уже как минимум двух конкретных компьютеров, т.к. у меня этот баг повторился. Правда, не в такой сильной мере, но всё же. А там, где два, там и n… Так что баг неприемлем, я считаю.
UPD: обновил хром до версии 24.0.1312.52 m и баг благополучно скончался.
UFO just landed and posted this here
Скорее всего это баг при отрисовке контента фрейма.
UFO just landed and posted this here
Тут скорее отрисовка во фрейме виновата. А нагружают эти все плюшки не сильно к слову. Да и кода поддержание чистоты занимает не много.

в кашим тестам стоит еще вставку добавить — тупо сделать два параграфа, скопировать часть от одного и вставить в другой. И посмотреть что оно сгенерило.
Вы, наверное, издеваетесь, да? Не подумайте, что я против валидного HTML и т.п., но сейчас вам не понравится то, что скажу — юзеру или человеку, который пользуется редактором в общем случае абсолютно всё равно, что там будет «под капотом» на выходе, ему надо, чтобы это выглядело так как он хочет без всяких проблем, таких как эта. Я сам за чистоту кода, стандарты и другие замечательные вещи, но такое поведение редактора неприемлимо. И все равно — проблема ли это редактора или конкретного браузера, могли бы и redraw после скролла поставить персонально для хрома, пока не появится нормального решения проблемы.

P.S. Выше говорят, что после обновления хрома проблема вроде исчезает, ну и хорошо :)
UFO just landed and posted this here
То что редакторы генерят невалидную разметку частенько выливается в очень противные баги. Скажем в одном браузере, в котором пользователь что-то менял, добавился пустой p тег, или вложенный p тег, и у него выглядит все ок. А в другом браузере уже не все ок.
Стоит также заметить, что выходные данные такого редактора обязательно нужно чистить от всяких гадостей вроде яваскрипта, iframe-ов, embed-ов и прочих прелестей.

Чтобы продвинутые пользователи не вставили на ваш сайт ничего, чего вам не хотелось бы видеть.
Это уже задача серверной стороны.
Да, вы совершенно правы =)
Отчего-же? Банально при сохранении пройтись регэкспами. Реализации методов stripTags для JS валом.
Валидация на сервере обязательна, при любых условиях.
В хроме есть баг небольшой:
1) Выделяем в редакторе весь текст, нажимаем кнопку delete (удаляем весь тескт)
2) Нажимаем BackSpace (удаляются все теги)
3) Начинаем ввод текста и в итоге имеет неофрмленный текст с divавми вместо абзацев

habrastorage.org/storage2/d73/483/855/d73483855d21b851bf2c5bddd41e79b0.jpg
Угу, такие проблемы иногда встречаются. Их решают сложные редакторы, которые следят за тем, чтоб заставить работать код во всех браузерах одинаково. Моё решение — лишь простое взаимодействие с execCommand, а дальше дело за браузером.
Супер!
Молодец, уважаю таких, кто создает.
Уважаемый автор спасибо за обзор…

Но мне больше всего интересно следующее: есть так называемый плагин support.skype.com/ru/category/SKYPE_CALLS_FROM_BROWSERS/
Еще есть плагин ADBLOCK.

Skypetocall типа внедряет свой код в DOM.
Можно ли похожим принципом внедрить ваш плагин в редактор хабра (плагин для хрома). ???

Меня жутко достало тегить текст все время, когда пишешь статьи (хотя сам написал всего 3)

Сообщество бы не осталось у вас в долгу…
Можно, но не все теги будут работать. Например, о специфических, таких, как anchor или hh вообще можно забыть. Только простое форматирование: жирный, наклонный, зачеркнутый, подчеркнутый, заголовки…
> мало кому нужны были то большое количество функций, которые предлагались программистам.

Так не обязательно их использовать. Хотя соглашусь что весит он многовато.

> Моему удивлению не было предела, когда я сам, не имея каких-либо глубоких познаний в веб разработке, сделал две кнопочки: Bold и Italic, что оказалось очень простой задачей.

А заставить все браузеры использовать одинаковые теги для оформления тоже просто? :) TinyMCE кстати позволяет вообще любые теги использовать для всех стилей, очень пригодилось на одном из проектов.
Хм. Дак вроде-бы все теги одинаковые (мозилла только балуется с атрибутами). А обрамление в теги записал в ToDo.
Точно, вы правы. Да, такая проблема наличествует.
Проблема решается своим враппером над execCommand. Мол в зависимости от команды и браузера что-то делать по другому. Скажем вместо Bold можно обернуть выделенный текст в теги, вставить заместо выделенного фрагмента.

По сути основная часть любого визивига это API для работы с положением коретки или выделенными фрагментами. А дальше все сводится к банальным проверкам, обрамлению кода, парсингу кода и т.д. Это по большей части рутина, и это нужно хорошо тестить.
github.com/tcr/selection.js — вот неплохая библиотека для работы с выделением текста. Очень даже полезная.
Круто, давно такую штуку искал, спасибо.
Именно эта библиотека, только немного переделанная, есть и в редакторе от imperavi.
Да почти все реализации подобных библиотек похожи. Тут на самом деле сложно сделать что-то другое.
Такой редактор сложно назвать жизнеспособным. Если элементарно скопировать что-то из Ворда, то получится весьма занятный код на выходе.
банально делаем обработчик события paste (а он вызывается до того как контент будет вставлен), в нем забираем весь контент редактора в буфер, запоминаем позицию каретки и делаем setTimeout ненадолго (на сколько ненадолго значения не имеет, так как даже если поставить 0, обработчик отработает уже после вставки). Далее забирается содержимое редактора, вставляется из буфера, восстанавливается позиция каретки и отчищенный регэкспами или любым другим способом HTML вставляется в редактор.

А уже вариантов очистки кода можно сделать множество. От работы над фрагментом DOM, до банальных регэкспов (сложнее, но отработает в разы быстрее).

Словом я бы вообще выносил такой функционал в плагин. Месяц назад для старого проекта делал подобное.
Ну, если в качестве развлекухи, то да. Я лет 7 назад писал что-то подобное этому. Но для реальных проектов проще использовать TinyMCE в итоге.
Случается что функционал WYSIWYG Редактора приходится существенно переделывать. Да и зачем мне редактор который тянет за собой тучу кода для работы в designMode? TinyMCE, CKEditor и прочие это монстры, которые лично мне неприятны. Ибо что-то изменить в них, не сильно вникая в архитектуру не выйдет. Разве что мелкий плагин какой реализовать.

Мне же от визивига нужна гибкость. Скажем хочу что бы панель редактора можно было бы вынести (скажем на страница n инстансов и для них одна панель). Если без извращений и кастылей, то с этой задачей увы кроме nicEdit я ничего не нашел. Но он страшно долго не поддерживался, использовал устаревшие фичи как javascript так и html, ну и словом пришлось переписать половину.

На проектах где редактор используется только в ключе редактирования контента, а не как компонент более сложной системы, я лично использую CKEditor с небольшими изменениями (мелкие плагины для работы с картинками, интеграция в Symfony).
Я согласен полностью. До сих пор удивляюсь, что никто не сверг этих динозавров с их пьедесталов. Хочется чего-то современного, легкого и простого. Но пилить редактор пока не хочется, задач более серьезных хватает.
Дополнил статью критикой.
В плане использования редактора в правильных руках — полностью поддерживаю. Просто, как всегда, хотелось универсальности и выкинуть, наконец, этого динозавра TinyMCE. :-)
Я тоже друзья для себя пишу твой редактор. Тема мне эта интересна. Но не все так просто.

Вдохновлен был редактором Камерона Адамса. У него там было всего пару кнопок, и мне что у него понравилось так то что пользователь не мог изуродовать текст. Или это было сложно сделать. Ничего лишнего, но все работало. Люди клацали и не ломали сайты. Но там мне много чего не нравилось и я решил написать свое. Все иначе.

Покажу пару скриншотов, возможно кому-то будет интересно.

d.pr/i/DXdR

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

d.pr/i/9yaf

Вот например клиент кликнул по картинке — и все лишние кнопки спрятались. Появились только кнопки по работе с картинками. Тут еще не все реализовано, есть идеи которые еще не воплощены, но все же идея ясна. Можно просто поменять положение картинки, слева, по-центру, справа, обтекание текста слева и справа, стрелки — откроется ли при клики на сайте картинка а-ля лайтбокс — в большом размере, хотя в самом ХТМЛ обрезанная картинка.

Например выбирая заголовок мы видим всего пару кнопкок. Тип и стиль.

d.pr/i/Chw7

Это сделано для того чтоб пользователь не мог сделать заголовок жирным, или курсив, вставить в него ссылку и так далее, потому как заголовок это заголовок. Но его можно стилизировать выбирая соответствующий стиль, внутри подставляется класс для объекта и готово.

Само главное что в настройках редактора можно самому прописать какой тип данных какие стили принимает. Например заголовок 2 уровня можно покрасить в 2 вида стилей, а в других — иная ситуация.

d.pr/i/rHKh

Тоже касается и списков, таблиц, оформление видео и так далее. Даже для картинок можно задавать стиль обрамления, если это понадобится.

Еще очень важный момент. В своей работе я хотел сделать так чтоб исходный код всегда был валиден. Чтоб в нем небыло косяков. И потому код постоянно в процессе набора валидируется. Расставляются правильно точки и запятые, убераются пробелы и прочее что портит код. И на выходе у тебя всегда все чистенько d.pr/i/OzlC

d.pr/i/5Igo

Но работы конечно дофига.
Из простеньких есть еще bootstrap-wysihtml5, весьма симпатичный.
Там кстати внутри используется iframe. Предполагаю, что это связано с безопасностью, но детально не разбирался. Если кто знает, расскажите.
За счет этого получаем изолированность стилей (к фрейму можно подключить те же стили, что будут использоваться при выводе контента, и тогда конфликтовать со стилями страницы на которой находится редактор ничего не будет). Ну и да, из фрейма получить доступ к чему-бы то ни было на основной странице уже сложнее, так что и по поводу безопасности есть профит.
Какой конкретно профит? Все визивиги создают фрейм самостоятельно, то бишь, он будет находиться на том же домене.
Да, как-то не подумал. Самая главная причина, пожалуй, это факт того что при вставке определенных эллементов в редактируемую область она может разделиться. Если же областью будет являться целый фрейм, то таки проблем быть не модет. Сам сталкивался с такой проблемой, правда без фреймов решилось.
Прямо бальзам на душу. Со времен середины нулевых WYSIWYG-редакторы — одно из немногого что стало проще.
когда-то делал большой ресерч визивигов, после него и решил переписать какой-то более мение вменяемый под себя. Из этого списка наиболее достойными оказались NicEdit, Redactor.js ну и Aloha мне показался интересным. к сожалению первый давно серьезно не обновлялся, в нем куча багов и т.д. а последние два мне не подошли пока ни на одном из проектов. Все поддержка IE7 которая у меня последние пол года почти на каждом проекте.
Sign up to leave a comment.

Articles