akzhan 23 дек 2009 в 15:43

Обновлённый jQuery Wysiwyg 0.6

1 мин

6.6K

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

+54

Комментарии 78

phpcmsdev 23 дек 2009 в 15:51

достойная замена тяжеловесным Wysiwyg редакторам.

из минусов: отсутствие просмотра html-варианта

akzhan 23 дек 2009 в 16:10

Просто кнопка промотра/редактирования raw html по умолчанию скрыта.

nayjest 24 дек 2009 в 03:31

Это существенно меняет дело, в таком случае jQuery Wysiwyg вполне можно пользовать

Morfi 23 дек 2009 в 15:56

1. При нажатии например на h1 теряется фокус, не удобно.
2. При нажатии h1 потом нумерованный список потом опять h1 (не нашел кнопки посмотреть html) но получается наверное что дважды текст обрамляется в h1

Chrome 4

akzhan 23 дек 2009 в 16:29

Знакомо. Посмотрю, что можно сделать.

dohlik 23 дек 2009 в 16:13

ФФ 3.6b5 — при нажатии на какую-либо кнопку редактора вижу ее фокус (пунктирный прямоугольник), начинающийся откуда-то из-за левой границы браузера.

akzhan 23 дек 2009 в 16:14

Кстати, да… Стоит изменить тулбар весь.

Kodeks 23 дек 2009 в 19:00

FF 3.5.6 подтверждаю

mrhard 23 дек 2009 в 16:13

Хм, а не удобнее было бы конфигурацию сделать по типу

$('#wysiwyg').wysiwyg({
                      config: '...|,justifyLeft,justifyCenter,justifyRight,|,...'
                      })

все-же меньше кода

akzhan 23 дек 2009 в 16:16

Но сейчас больше свободы. Можно создать абсолютно cвой собственный обработчик для своей кнопки.

mrhard 23 дек 2009 в 16:20

из этих побуждений — это круто!

Isis 23 дек 2009 в 16:49

Перенесите в блог habrahabr.ru/blogs/jquery/

akzhan 23 дек 2009 в 17:30

Я полагаю, что блог jQuery подходит для обсуждения технических нюансов, а большая часть Web-разработчиков используют jQuery, но даже не подписаны на этот блог.

Эта статья не техническая, поэтому отвёл ей место в Web-разработке.

sp1ne 23 дек 2009 в 16:51

На мой взгляд — самый главный баг этой штуки — это работа с аяксом. При подгрузке этой формы через аякс, теряется текстареа, после чего нужно всю wysiwyg() вызывать к полю заново. Облазил весь инет — решение только такое.

mdevils 23 дек 2009 в 16:59

По-вашему она должна непрерывно сканировать документ на появление элементов, соответствующих селектору?

sp1ne 23 дек 2009 в 17:10

Я не это имею ввиду. Возможно, не так написал.

code.google.com/p/jwysiwyg/issues/detail?id=54 вот, почитайте.

akzhan 23 дек 2009 в 17:38

Так и не понял по тому issue, что вы хотите изменить, и как.

sp1ne 23 дек 2009 в 17:55

Попробуйте вызовите через аякс этот wysiwyg и посмотрите на результат в FF. Сами все поймете.

При загрузке textarea не фокус теряется, а сама textarea. Т.е. даже если вызвать wysiwyg() на новую, загруженную аяксом textarea, она загрузится в редактор, но textarea-поля там не будет, т.е. просто белое, нередактируемое поле.

OldFornit 23 дек 2009 в 17:58

через livequery не пробовали?
У меня в старые времена этот редактор вызывался в аяксово-выводимой форме, которая вообще рисовалась на jqueryui dialog. Вызвал через livequery

akzhan 23 дек 2009 в 17:47

вообще говоря, я бы рекомендовал бы не использовать AJAH, а использовать именно AJAJ или AJAX.

То есть передавать набор данных, а не готовый HTML, который потом применять через $('#ed').wysiwyg('setContent', newValue);

vosi 23 дек 2009 в 16:57

а когда планируется поддержка визуального управления таблицами?

OldFornit 23 дек 2009 в 17:28

да в принципе то и было. Только надо в режиме кода описать таблицу-строку-одну ячейку, а потом можно будет уже почти по-человечески добавлять колонки/строки. Но слияния колонок-строк таки отсутствует

akzhan 23 дек 2009 в 17:39

вставить таблицу можно и сейчас, как любой другой HTML.

А поддержка resizable через javascript несколько увеличит размер кода.

НЛО прилетело и опубликовало эту надпись здесь

namata 23 дек 2009 в 17:18

если submit просто делать, то в post улетает с форматированием

akzhan 23 дек 2009 в 17:34

Документации на сайте нет, и у меня нет прав на её редактирование.
Вот одна из статей: erum.ru/article/20

На взятие контента попробуйте
$('#ed').wysiwyg('getContent');

НЛО прилетело и опубликовало эту надпись здесь

Vertex 23 дек 2009 в 17:06

Буквально на днях искал и просматривал все варианты редакторов. Думал что этот умер уже… Спасибо, что изменили мнение, таки ним пользоваться буду. А топику очень нехватает чейнджлога.

akzhan 23 дек 2009 в 17:35

jwysiwyg.googlecode.com/svn/tags/0.6/CHANGES

namata 23 дек 2009 в 17:15

В 7 и 8 IE кнопки криво показываются, под ними видно ещё дургие фантомные кнопки. Наверное это css спрайт по высоте слишком много показывает.

namata 23 дек 2009 в 17:19

opera 10.10 тоже. Разные компьютеры. Firefox — ок

namata 23 дек 2009 в 17:34

Походу из-за padding: 1px по умолчанию у кнопок…

akzhan 23 дек 2009 в 17:35

Проверю.

ibnteo 25 янв 2010 в 04:18

Так и есть, надо заменить на margin в файле jquery.wysiwyg.css в блоках div.wysiwyg div.wysiwyg ul.panel li a и ul.panel li a.active

akzhan 25 янв 2010 в 13:47

Исправлено в транке. Спасибо.

jwysiwyg.googlecode.com/svn/trunk/examples/01-basic.html

gigimon 23 дек 2009 в 17:26

А как к нему дописать свою какую-то кнпоку? Нету интерфейса?

OldFornit 23 дек 2009 в 17:29

есть. Примеры в самом плагине. Кнопки достаточно просто описываются.
Только сам плагин изменять и придется ;-)

akzhan 23 дек 2009 в 17:36

Не нужно. Кнопки можно передать извне при инициализации.

Пример это и показывает.

OldFornit 23 дек 2009 в 17:39

конечно можно. Это просто один из способов. Я сказал о том, который просто был удобнее мне тогда, когда я вглядывался в этот редактор.
А так как это было давно, то о Вашем способе я забыл.

Setti 23 дек 2009 в 17:27

жирный и курсив генерируются не SEO-friendly

skvorets 23 дек 2009 в 18:01

Плагином пользуюсь.
Поддерживаю господиа Setti.
b, strong; i, em…
Понятно, что это от ризуального редактора самого броузера зависит, но всё же хочется быть ближе к стандартам, а не заменять теги не сервере постфактум.
Кстати кому не безразлично решение вопроса:

function newItalic() {

 var self = this;

 var html = self.get_selected_text();

 html = ' <em>' + html + '</em&gt';

 self.selection_replace_with(html);

}

akzhan 23 дек 2009 в 18:52

Кроссплатформенную реализацию в студию )

OldFornit 23 дек 2009 в 17:31

хороший, легкий, но генерирует отвратительный html. По этой причине перешел на другой редактор, который не так давно пиарили на хабре. Тоже кстати на jquery сделан.

akzhan 23 дек 2009 в 17:37

Раньше генерировал отвратительный под Firefox. Исправлено.

akzhan 23 дек 2009 в 17:51

Кстати, скиньте ссылку на конкурента. Любопытно.

OldFornit 23 дек 2009 в 17:55

с удовольствием — www.elrte.ru/

ortick 23 дек 2009 в 17:38

На Chrome и Opera конструкция вида $('#ed').wysiwyg('insertHtml', 'my funny HTML'); работает только после ввода чего-то в textarea.
При пустом поле — никакой реакции.

akzhan 23 дек 2009 в 17:43

О как любопытно… Установка фокуса тоже не помогает?

ortick 23 дек 2009 в 17:47

фокус спасает.

akzhan 23 дек 2009 в 17:48

Спасибо, поправлю в транке.

akzhan 23 дек 2009 в 18:53

Поправил, вроде как. В транке.

aps 23 дек 2009 в 17:49

хороший редактор, давно использую, но приходится допиливать :(

akzhan 23 дек 2009 в 17:53

Делитесь с сообществом своими допилами ) Полезное попадёт в транк.

aps 23 дек 2009 в 17:58

Сделано на скорую руку и через ж… :)
Вообще-то само собой напрашиваются три момента:
— определение ссылки
— подчистка от Word на Ajax
— вставка стилей
Ну и удаление всяких излишеств типа copy/paste

HOBAA 23 дек 2009 в 18:38

Копипасту из ворда не чистит, так что в топку.

aps 23 дек 2009 в 20:44

Кстати, допиливается проще всего.

ibnteo 25 янв 2010 в 04:29

Можно пример кода?

akzhan 25 янв 2010 в 13:50

code.google.com/p/jwysiwyg/issues/detail?id=129

kail_sazerland 23 дек 2009 в 18:41

Ура, наконец-то это случилось. Нормальный и преличный WYSIWYG-редактор.
Классно подойдёт, для тех, кто отрицает ЦМС и пишет свои.

acy 23 дек 2009 в 18:58

Как распространяется ваш продукт? Какой тип лицензии?

akzhan 23 дек 2009 в 20:49

Двойное лицензирование: GPL2, MIT

akzhan 23 дек 2009 в 20:51

Проект принадлежит Хуану Мэнуэлю Мартинесу (надеюсь, правильно поименовал).

Я лишь являюсь одним из контрибуторов проекта.

corristo 23 дек 2009 в 23:03

на странице проекта на code.google.com ясно написано:

Code license: GNU General Public License v2

corristo 23 дек 2009 в 23:03

ну я и слоупок

loat 23 дек 2009 в 18:59

Спасибо автору, получилось довольно красиво.

t0os 23 дек 2009 в 19:09

При первоначальной загрузке курсор очень маленький, как только начинаешь писать — появляется полноразмерный. ФФ 3.5, вин.

jonijones 24 дек 2009 в 03:54

Меня интересуют 2 вещи:
— Корректно ли работает при типе содержимого application/xml+xhtml
— На выходе получается ли валидный (с точки зрения форматирования) xhtml

akzhan 25 дек 2009 в 13:02

Это минимальный редактор, он не включает в себя код очистки от невалидных тэгов.

Для этого я бы рекомендовал использовать Tidy на серверной стороне.

Кстати, Вы навели на мысль, что стоит иметь возможность указывать DOCTYPE для инициализации, сделаю в транке.

jonijones 26 дек 2009 в 03:23

Я думаю было бы чудесно. Далеко не каждый wysiwyg, может похвастаться этим. Тем более вещь полезная.

akzhan 25 янв 2010 в 13:59

Я был неправ, всё для этого уже есть в редакторе.

За это отвечает опция html, по умолчанию равная '<'+'?xml version=«1.0» encoding=«UTF-8»?'+'><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" «www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»><html xmlns=«www.w3.org/1999/xhtml» xml:lang=«en»>STYLE_SHEETINITIAL_CONTENT'

При изменении не забудьте оставить специальные символы STYLE_SHEET и INITIAL_CONTENT.

plandem 24 дек 2009 в 13:56

в свое время делал свою версию редактора, где основная задача была разделить ядро и рюшечки(кнопки, тулбары) и чтобы у каждой версии (код/визуал) были свои тулбары. Реализация уже давно лежит тут:
code.google.com/p/lwrte/

сейчас, правда, активно не развиваю, т.к. пока нет проектов, где его использую, поэтому нет ежедневной отладки/работы, чтобы и дальше как-то развивать.