Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 88
Спасибо за описание своего труда. Я в своём проекте пользуюсь: jsRedactor, работает и на iOS и во всех браузерах, в том числе IE. Очень нравится и код открыт для модификации.
Пожалуйста :)
suitUp пока что не тестировался на мобильных. jsRedactor был одним из редакторов, которыми я вдохновлялся.
suitUp пока что не тестировался на мобильных. jsRedactor был одним из редакторов, которыми я вдохновлялся.
Спасибо, было интересно посмотреть вашу реализацию. Что касается jsRedactor, хотел вас обоих спросить, были случаи с клиентами когда им чего-то в нем не хватало?
Я им не пользовался в проектах, ничего не скажу.
На этот случай там есть возможность написать плагин. Но увы сам редактор платный.
Это понятно. Мне интересно или большинство пользователей это устраивает. У меня был случай когда заказчик захотел Changes Tracker + comments. Вот это было что-то, я долго пытался отговорить его от этой затеи, но он не хотел слушать.
Добрый человек Chesnovich ниже сообщил приятную новость:
Для Yii-фреймворка команда скинулась и купила лицензию. Можно пользоваться бесплатно :)
Добрый человек Chesnovich ниже сообщил приятную новость:
Для Yii-фреймворка команда скинулась и купила лицензию. Можно пользоваться бесплатно :)
это стоит повесить на сабмит и это задача не редактора, а системы.
Не совсем так. Когда вы пишите текст в редакторе, он должен выделяться каким-то цветом и к каждой измененной строке нужно повесить коммент. Очень похоже на то что есть в ворде. И поверьте, не очень просто следить за курсором и выделять именно ту область что нужно когда там уже есть куча тегов и текста.
Когда-то он был опенсорс, до какой-то старой версии. Есть мнение, что старую версию можно использовать как основу для форка бесплатно.
Под андроидом демо пример, вроде как, работает.
Единственный минус этого редактора что нельзя вынести панель. То бишь можно, но только если у вас панель для одного инстанса. Да и код он генерит иногда так себе.
для себя просто переписал nicEdit, заставил его использовать jQuery, убрал устаревший код и т.д, Словом вышло не хуже решения от imperavi. Если кому интересно, могу выложить это дело на gitHub.
для себя просто переписал nicEdit, заставил его использовать jQuery, убрал устаревший код и т.д, Словом вышло не хуже решения от imperavi. Если кому интересно, могу выложить это дело на gitHub.
Для Yii-фреймворка команда скинулась и купила лицензию. Можно пользоваться бесплатно :)
о боже! дяденька, вы где были раньше! я искал это целую вечность! лучей добра вам много!
В опере слетает фокус при переходе на кнопки — видать тот же баг что и в большинстве редакторов при работе с выделением текстов.
Операции вставки текста ломают структуру параграфов.
в webkit-ах не фиксится переход на новую строку. Должен создаваться параграф, а вставляется br. Словом в моих проектах использовать эту штуку не буду. А учитывая что подобных мини-редакторов пруд пруди, то выбор есть. Хотя я уже отчаялся и просто написал под себя.
Операции вставки текста ломают структуру параграфов.
в webkit-ах не фиксится переход на новую строку. Должен создаваться параграф, а вставляется br. Словом в моих проектах использовать эту штуку не буду. А учитывая что подобных мини-редакторов пруд пруди, то выбор есть. Хотя я уже отчаялся и просто написал под себя.
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 значение свойства тоже меняет. Что
В чем выигрыш задания свойств — я тоже не понимаю. Тем более что в случае boolean-атрибутов jQuery значение свойства тоже меняет. Что
contentEditable, что value, text, даже html можно задать с помощью указанного выше мной способа. Даже если не хотите избавляться от метода, то не стоит его писать в jQuery, у Вас же есть свой jQuery.suitUp, почему бы туда не положить?Объясняю: ваш вариант парсится регуляркой, создаётся тег, добавляются атрибуты, которые внутренними механизмами браузера меняют свойства, тег обрамляется в jQuery.
У меня: создаётся тег, добавляются свойства, тег обрамляется в jQuery.
Да и не зачем использовать жикверь, если можно воспользоваться встроенными функциями, что за мода?
У меня: создаётся тег, добавляются свойства, тег обрамляется в jQuery.
Да и не зачем использовать жикверь, если можно воспользоваться встроенными функциями, что за мода?
Вы странный, используете jQuery и, тем не менее не хотите им пользоваться. Если бы Вас волновало быстродействие, то Вы бы пробежались по объекту for'ом и задали атрибутам значения через setAttribute, потому что extend с ним тоже не сравнится :) Выбрали jQuery — пишите на нем и пишите красиво, чего возмущаться. Вы же даже data-атрибуты вешаете через attr, разве это ок?
А вообще, милости прошу в мою серию статей о jQuery, возможно Вы узнаете что-то новенькое.
А вообще, милости прошу в мою серию статей о jQuery, возможно Вы узнаете что-то новенькое.
Во-первых атрибуты использовать не нужно, если есть свойства. Во-вторых возмущаюсь здесь не я. Как решил правильным сделать, так и сделал.
И милости прошу форкнуть проект и сделать так, как нравится.
И милости прошу форкнуть проект и сделать так, как нравится.
Точно, опечатался с setAttribute. Хотел написать «Пробежались бы по объекту for'ом и задали свойства напрямую», конечно.
Извините что потревожил, я не хотел обидеть, просто у меня возникло ощущение того, что Вы так пишете, потому что не представляете как работает jQuery. Оказалось, это неправда.
Извините что потревожил, я не хотел обидеть, просто у меня возникло ощущение того, что Вы так пишете, потому что не представляете как работает jQuery. Оказалось, это неправда.
Более того, у меня где-то есть недописанный аналог jQuery, но после сообщения о jQuery 2.0 затея была заброшена. Вот, если интересно: javascript.ru/forum/project/24387-prototip-biblioteki-jnext.html
Очень нравится редактор WysiBB. Посмотрите его, он вам понравится. Тоже легкий. А вообще основная проблема всех WYSIWYG-редакторов в том, что на выходе получается говнокод.
Я извиняюсь, но название надо было поаккуратнее делать — я два раза читал и Shit Up! получалось) Ну спасибо за работу)
Это беда конкретно хрома.
Тут скорее отрисовка во фрейме виновата. А нагружают эти все плюшки не сильно к слову. Да и кода поддержание чистоты занимает не много.
в кашим тестам стоит еще вставку добавить — тупо сделать два параграфа, скопировать часть от одного и вставить в другой. И посмотреть что оно сгенерило.
в кашим тестам стоит еще вставку добавить — тупо сделать два параграфа, скопировать часть от одного и вставить в другой. И посмотреть что оно сгенерило.
Вы, наверное, издеваетесь, да? Не подумайте, что я против валидного HTML и т.п., но сейчас вам не понравится то, что скажу — юзеру или человеку, который пользуется редактором в общем случае абсолютно всё равно, что там будет «под капотом» на выходе, ему надо, чтобы это выглядело так как он хочет без всяких проблем, таких как эта. Я сам за чистоту кода, стандарты и другие замечательные вещи, но такое поведение редактора неприемлимо. И все равно — проблема ли это редактора или конкретного браузера, могли бы и redraw после скролла поставить персонально для хрома, пока не появится нормального решения проблемы.
P.S. Выше говорят, что после обновления хрома проблема вроде исчезает, ну и хорошо :)
P.S. Выше говорят, что после обновления хрома проблема вроде исчезает, ну и хорошо :)
То что редакторы генерят невалидную разметку частенько выливается в очень противные баги. Скажем в одном браузере, в котором пользователь что-то менял, добавился пустой p тег, или вложенный p тег, и у него выглядит все ок. А в другом браузере уже не все ок.
Стоит также заметить, что выходные данные такого редактора обязательно нужно чистить от всяких гадостей вроде яваскрипта, iframe-ов, embed-ов и прочих прелестей.
Чтобы продвинутые пользователи не вставили на ваш сайт ничего, чего вам не хотелось бы видеть.
Чтобы продвинутые пользователи не вставили на ваш сайт ничего, чего вам не хотелось бы видеть.
В хроме есть баг небольшой:
1) Выделяем в редакторе весь текст, нажимаем кнопку delete (удаляем весь тескт)
2) Нажимаем BackSpace (удаляются все теги)
3) Начинаем ввод текста и в итоге имеет неофрмленный текст с divавми вместо абзацев
habrastorage.org/storage2/d73/483/855/d73483855d21b851bf2c5bddd41e79b0.jpg
1) Выделяем в редакторе весь текст, нажимаем кнопку delete (удаляем весь тескт)
2) Нажимаем BackSpace (удаляются все теги)
3) Начинаем ввод текста и в итоге имеет неофрмленный текст с divавми вместо абзацев
habrastorage.org/storage2/d73/483/855/d73483855d21b851bf2c5bddd41e79b0.jpg
Супер!
Молодец, уважаю таких, кто создает.
Молодец, уважаю таких, кто создает.
Уважаемый автор спасибо за обзор…
Но мне больше всего интересно следующее: есть так называемый плагин support.skype.com/ru/category/SKYPE_CALLS_FROM_BROWSERS/
Еще есть плагин ADBLOCK.
Skypetocall типа внедряет свой код в DOM.
Можно ли похожим принципом внедрить ваш плагин в редактор хабра (плагин для хрома). ???
Меня жутко достало тегить текст все время, когда пишешь статьи (хотя сам написал всего 3)
Сообщество бы не осталось у вас в долгу…
Но мне больше всего интересно следующее: есть так называемый плагин support.skype.com/ru/category/SKYPE_CALLS_FROM_BROWSERS/
Еще есть плагин ADBLOCK.
Skypetocall типа внедряет свой код в DOM.
Можно ли похожим принципом внедрить ваш плагин в редактор хабра (плагин для хрома). ???
Меня жутко достало тегить текст все время, когда пишешь статьи (хотя сам написал всего 3)
Сообщество бы не осталось у вас в долгу…
> мало кому нужны были то большое количество функций, которые предлагались программистам.
Так не обязательно их использовать. Хотя соглашусь что весит он многовато.
> Моему удивлению не было предела, когда я сам, не имея каких-либо глубоких познаний в веб разработке, сделал две кнопочки: Bold и Italic, что оказалось очень простой задачей.
А заставить все браузеры использовать одинаковые теги для оформления тоже просто? :) TinyMCE кстати позволяет вообще любые теги использовать для всех стилей, очень пригодилось на одном из проектов.
Так не обязательно их использовать. Хотя соглашусь что весит он многовато.
> Моему удивлению не было предела, когда я сам, не имея каких-либо глубоких познаний в веб разработке, сделал две кнопочки: Bold и Italic, что оказалось очень простой задачей.
А заставить все браузеры использовать одинаковые теги для оформления тоже просто? :) TinyMCE кстати позволяет вообще любые теги использовать для всех стилей, очень пригодилось на одном из проектов.
Хм. Дак вроде-бы все теги одинаковые (мозилла только балуется с атрибутами). А обрамление в теги записал в ToDo.
А как же b и strong? (в IE «древних» точно были с этим проблемы)
Проблема решается своим враппером над execCommand. Мол в зависимости от команды и браузера что-то делать по другому. Скажем вместо Bold можно обернуть выделенный текст в теги, вставить заместо выделенного фрагмента.
По сути основная часть любого визивига это API для работы с положением коретки или выделенными фрагментами. А дальше все сводится к банальным проверкам, обрамлению кода, парсингу кода и т.д. Это по большей части рутина, и это нужно хорошо тестить.
По сути основная часть любого визивига это API для работы с положением коретки или выделенными фрагментами. А дальше все сводится к банальным проверкам, обрамлению кода, парсингу кода и т.д. Это по большей части рутина, и это нужно хорошо тестить.
github.com/tcr/selection.js — вот неплохая библиотека для работы с выделением текста. Очень даже полезная.
Такой редактор сложно назвать жизнеспособным. Если элементарно скопировать что-то из Ворда, то получится весьма занятный код на выходе.
банально делаем обработчик события paste (а он вызывается до того как контент будет вставлен), в нем забираем весь контент редактора в буфер, запоминаем позицию каретки и делаем setTimeout ненадолго (на сколько ненадолго значения не имеет, так как даже если поставить 0, обработчик отработает уже после вставки). Далее забирается содержимое редактора, вставляется из буфера, восстанавливается позиция каретки и отчищенный регэкспами или любым другим способом HTML вставляется в редактор.
А уже вариантов очистки кода можно сделать множество. От работы над фрагментом DOM, до банальных регэкспов (сложнее, но отработает в разы быстрее).
Словом я бы вообще выносил такой функционал в плагин. Месяц назад для старого проекта делал подобное.
А уже вариантов очистки кода можно сделать множество. От работы над фрагментом DOM, до банальных регэкспов (сложнее, но отработает в разы быстрее).
Словом я бы вообще выносил такой функционал в плагин. Месяц назад для старого проекта делал подобное.
Ну, если в качестве развлекухи, то да. Я лет 7 назад писал что-то подобное этому. Но для реальных проектов проще использовать TinyMCE в итоге.
Случается что функционал WYSIWYG Редактора приходится существенно переделывать. Да и зачем мне редактор который тянет за собой тучу кода для работы в designMode? TinyMCE, CKEditor и прочие это монстры, которые лично мне неприятны. Ибо что-то изменить в них, не сильно вникая в архитектуру не выйдет. Разве что мелкий плагин какой реализовать.
Мне же от визивига нужна гибкость. Скажем хочу что бы панель редактора можно было бы вынести (скажем на страница n инстансов и для них одна панель). Если без извращений и кастылей, то с этой задачей увы кроме nicEdit я ничего не нашел. Но он страшно долго не поддерживался, использовал устаревшие фичи как javascript так и html, ну и словом пришлось переписать половину.
На проектах где редактор используется только в ключе редактирования контента, а не как компонент более сложной системы, я лично использую CKEditor с небольшими изменениями (мелкие плагины для работы с картинками, интеграция в Symfony).
Мне же от визивига нужна гибкость. Скажем хочу что бы панель редактора можно было бы вынести (скажем на страница n инстансов и для них одна панель). Если без извращений и кастылей, то с этой задачей увы кроме nicEdit я ничего не нашел. Но он страшно долго не поддерживался, использовал устаревшие фичи как javascript так и html, ну и словом пришлось переписать половину.
На проектах где редактор используется только в ключе редактирования контента, а не как компонент более сложной системы, я лично использую CKEditor с небольшими изменениями (мелкие плагины для работы с картинками, интеграция в Symfony).
Дополнил статью критикой.
Я тоже друзья для себя пишу твой редактор. Тема мне эта интересна. Но не все так просто.
Вдохновлен был редактором Камерона Адамса. У него там было всего пару кнопок, и мне что у него понравилось так то что пользователь не мог изуродовать текст. Или это было сложно сделать. Ничего лишнего, но все работало. Люди клацали и не ломали сайты. Но там мне много чего не нравилось и я решил написать свое. Все иначе.
Покажу пару скриншотов, возможно кому-то будет интересно.
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
Но работы конечно дофига.
Вдохновлен был редактором Камерона Адамса. У него там было всего пару кнопок, и мне что у него понравилось так то что пользователь не мог изуродовать текст. Или это было сложно сделать. Ничего лишнего, но все работало. Люди клацали и не ломали сайты. Но там мне много чего не нравилось и я решил написать свое. Все иначе.
Покажу пару скриншотов, возможно кому-то будет интересно.
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-редакторы — одно из немногого что стало проще.
Вот ещё довольно обширный список: github.com/cheeaun/mooeditable/wiki/Alternative-Javascript-WYSIWYG-editors
когда-то делал большой ресерч визивигов, после него и решил переписать какой-то более мение вменяемый под себя. Из этого списка наиболее достойными оказались NicEdit, Redactor.js ну и Aloha мне показался интересным. к сожалению первый давно серьезно не обновлялся, в нем куча багов и т.д. а последние два мне не подошли пока ни на одном из проектов. Все поддержка IE7 которая у меня последние пол года почти на каждом проекте.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Suit Up! Простой и легкий WYSIWYG