Веб-разработка

индекс
236,88

Визуальный редактор jHtmlArea

Очень компактный, но в то же время довольно удобный визуальный редактор jHtmlArea. По первой букве в названии можно догадаться, что используется jQuery.

Он в чем-то схож с более известным jWysiwyg. Несмотря на то что имеет меньший размер, обладает не меньшими возможностями. На мой взгляд код организован гораздо удобнее, очень легко расширяем. Также огромный плюс в том, что иконки в меню можно располагать в любом порядке.

Несмотря на то что не заявлена поддержка IE6, прекрасно в нем работает. В Opera тоже работает.

Демонстрация


Инициализируется jHtmlArea просто:
$("textarea.wysiwyg").htmlarea({params});
На одной странице можно делать сколько угодно редакторов поверх <textarea class="wysiwyg">

Для расширения функциональности есть очень удобный метод pasteHTML(), пример:
$("textarea[name=html]").htmlarea({
toolbar: ["html", "bold", "italic", {
css: "smile",
text: "Вставить смайлик",
action: function (btn) {
this.pasteHTML(":-)");
}
}
]});

Чтобы эта новая иконка (smile) появилась в тулбаре, достаточно в CSS прописать:
div.jHtmlArea .ToolBar ul li a.smile {background: url(img/smile.png) no-repeat 0 0;}

В параметрах можно указать какой CSS будет использоваться в редактируемом документе, очень удобно, позволит сделать так, что будем видеть точно так же, как и на сайте.

Единственный минус (для меня), это фиксированная ширина поля ввода, причем у textarea тоже, но это легко исправляется, достаточно убрать из кода изменение ширины полей ввода. Нашел еще ошибку с не обработкой событий клавиаруты и мыши у визуального редактора, заменил $(this.editor.body).click(fnTA)… на $(this.editor).click(fnTA)…

Для меня jHtmlArea стал настоящей находкой, полностью заменил им jWysiwyg.
+41
8 февраля 2010, 02:48
125

комментарии (55)

0
Rafael_Delon #
Мне тоже jHtmlArea понравился, однако Я остался на jWysiwyg.
Наверное, просто привычка :)
P.S. Не хотел бы холивара.
0
ibnteo #
Для меня решающим стало возможность переставлять кнопки без правки исходного кода библиотеки, и более простой и понятный код внутри, чтобы исправлять мелкие но неприятные огрехи, которые есть в обоих библиотеках.
0
akzhan #
Ничто не мешает передать свой набор controls в конструктор .wysiwyg ;)
+1
zlobin #
самое главное чтобы он код выдаваемый редактором не коробил, а то попадался мне один редактор который любил вставлять вместо [BR] [BR style=«font-size:12px;»]
0
ibnteo #
Я так понимаю что это уже от браузера зависит, вставляется: editor.body.innerHTML
–7
rixaman #
уф, пора завязывать извращаться с фаром под колорером,
в мире столько вкусных ускорителей, а то я всё в краяностях, либо руками, либо дримвьювер.

Спасибо за пост и просвящение!
0
dmomen #
А внутри UI Dialog он работает?
0
ibnteo #
Испытал специально, если инициализировать после dialog(), то да, иначе не работает iframe.
+6
nymin #
>По первой букве в названии можно догадаться

что используется Java
0
ibnteo #
ну, кому что ближе :)
–1
DieSlogan #
Что используется Javascript!
Java-апплетов в этом плагине нету.
+1
ProtoPlex #
Когда вставляешь HR, он ей идешник присваивает HT — и так несколько раз можно? ИМХО <hr id=«ht»> <hr id=«ht»> <hr id=«ht»> несколько раз — это криво!
0
ibnteo #
Действительно, не хорошо получилось, можно исправить, убрав последний параметр в this.ec("insertHorizontalRule", false, "hr");
0
ibnteo #
Опечатался («hr»), вместо this.ec("insertHorizontalRule", false, "ht"); надо использовать this.ec("insertHorizontalRule", false);

Вообще много неисправленных мелких багов в нем, но он такой простой, что является очень хорошей базой для собственного редактора, во многих проектах именно такой и нужен, уникальный и простой.
0
ProtoPlex #
Когда вставляешь HR, он ей идешник присваивает HT — и так несколько раз можно? ИМХО <hr id=«ht»> <hr id=«ht»> <hr id=«ht»> несколько раз — это криво!
+3
xdevel #
интересно, у меня одного первая буква ассоциируется с javascript, а не с jquery?

редактор да, удобный и компактный. немного тюнинга и можно в мини-проекты вставлять.
+1
ibnteo #
А было принято так называть проекты на javascript? Я не помню такого, а вот с jQuery — сплошь и рядом.
+1
xdevel #
Принято, да… ассоциация — нет.
м.б. заработался, 16-й час идет. голову на подушку кладу — не могу уснуть, код начитает мерещиться. который еще нужно дописать. приходится дописывать.
+1
alemiks #
Так принято называть проекты на java (или порты с java на другие платформы)
0
Straight #
А как у него с расширением возможностей? Например, есть ли работа с таблицами? Или более функциональная вставка изображений?
–1
ibnteo #
Все это нужно дорабатывать самому, благо что легко наращивается. Все равно вставку изображений делают не как надо, лучше самому разработать.

Если нужен редактор сразу со всеми готовыми функциями, то лучше брать другой, на вроде TinyMCE или CKEditor.
0
aps #
Все функции Tiny и MCE — зло. Но отсутствие стилей, нормальная вставка картинок и Tidy добавить было бы неплохо.
0
allex #
Ищу такой редактор, который может работать внутри расширений Firefox (XUL). То, что видел, прикрутить не удалось. Если такое возможно — поделитесь ссылочкой.
0
usetester #
Кто мешает вставить в XUL например этот редактор?
+1
mac2000 #
у нас в проекте задача веселее, необходим редактор:
  • * максимально легкий (функционал: жирный, наклонный, подчеркнутый и списки
  • * зачищающий на лету все лишнее
  • * зачищающий вставленный из ворда текст

естественно ничего такого не нашел и пришлось изобретать велосипед,
в следствии чего, на базе статьи был написан простенький редактор (не более 200 строк кода), а так же выдрана функция зачистки вордовского текста из tinymce

вот такие пироги, конечно свой редактор — это бесконечное лечение багов и непредвиденных задач, но чертовски прикольно и познавательно ;)
0
ibnteo #
Я и начал писать свой для нового проекта, этот подошел идеально, готовое ядро с совсем уж мелкими багами, если делать с нуля, то их больше будет. Зачистка кода от мусора мне будет еще нужна, встроенная функция очистки форматирования убивает вообще все.
0
egorinsk #
Wymeditor посмотрите, хотя конечно свой всегда лучше.
0
deex #
если выделить буквы в Custom Editor, нажать на кнопку установки кастомного цвета, а потом на отмену — текст перестанет быть белым, а станет черным. баг?
+1
alemiks #
Здорово он размер шрифта увеличивает на 1: <big><big><big>… :)
Уменьшает соответственно <small><small><small>…
+1
sqrt #
Может не по теме, а как бороться с текстом скопированным из МS Word?
0
egorinsk #
Детектить событие paste (в Опере его нет, бить бы их за это, там можно только отслеживать нажатие Ctrl + V) и проходиться по ДОМу (или если вы извращенец, регекспами по innerHTML, это быстрее но имхо сложнее).

Вообще, по ощущениям, Rich Text Editor придумали дауны, чтобы с ним что-то сделать нормальное, надо прикрутить сотню килобайт кода. Никаких нормальных событий он не генерирует, команд для произвольной обработки текста нет, вообще ничего нет, все приходится самому писать.
+1
Delfino #
Мы в качестве wysiwyg редактора используем nicedit. Он легкий и на выходе дает простой html без стилей.
0
Bygaga #
Для меня тестирование редактора заканчивается на том с чего начинается:
Выделить все и удалить. Затем смотрим исходный текст, если там хоть что нибудь есть нафиг-нафиг-нафиг.
Сложно редактору объяснять почему это так :)
0
demmsnt #
А никто не видел такой редактор, что-бы панель инструментов можно было повесить отдельно (как в Google sites)? Для правки маленьких врезок актуально. Еще-бы растягивался по высоте в зависисмотсти от количества текста…
0
Bygaga #
CKEditor можно настроить так, если не ошибаюсь
+1
chilly #
Заголовок поставить можно, а вернуть обратно уже никак. Незачет за это.
0
vovich #
А есть нормальные визуальные редакторы для ББ кодов? я использую один — но он жутко тяжелый и глючноватый
0
deseven #
Кому он нужен без кроссбраузерности?

На сайте написано только вот:

Supported Browsers
Internet Explorer 7/8
Firefox 3/3.5
Safari 4
0
elky #
Например мне, если я захочу поднять сайт с pages cms.
0
ibnteo #
Он везде работает (где работает jQuery), видимо автор только в указанных тестирует.
–1
DrNemo #
есть безумное большое количество визуальных редакторов, но есть ли среди них, хоть один нормально работающий с пхп?
0
LDZ #
Я работал со многими с пхп. Никогда никаких проблем не возникало.
Что у Вас там не работает?
0
ibnteo #
В этом нет функций обмена данными с сервером, пишите сами что нужно (загрузка картинок например).
0
Arris #
Solmera SPAW2?

что значит «нормально работающий с ПХП»?
+2
mkechinov #
Сразу замеченный минус: выделяем текст, делаем его H1. Как потом вернуть его обратно в параграф?
+1
ibnteo #
Я добавил кнопку «Paragraph», а вообще надо бы сделать чтобы при повторном нажатии сбрасывать заголовок.
+2
Rulez #
У него нет простейшего аплоадера для фото. И нет нормальных средств для построения таблиц.
0
Arris #
Напишите сами, в чем проблема?
0
mukizu #
зачем тогда вообще прибегать к готовым решениям?
0
ibnteo #
Чтобы с нуля не писать. Этот редактор отлично написан, и неплохо работает, если доработать напильником.
0
mukizu #
Дык и я о том. Но что мешает добавить в него тот же «простейший аплоадер для фото»?
0
ibnteo #
Вот доделаю свой аплоадер, и выложу на всеобщее обозрение.
0
nicothin #
как бы его еще отучить всюду в конце тег br добавлять?..
0
ibnteo #
Если вставить в пустой документ <p></p>, то он будет при переносе строки добавлять параграф.
0
nicothin #
конечно. но если в тексте несколько параграфов, то перед последним закрывающим тегом P он ставит BR. :(

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.