Предыстория: Нужен правильный онлайн WYSIWYG-редактор. Попытки найти что-то из уже готового привели к ужасным монстрам FCKeditor и TinyMCE. Как показывает опыт работы с ними, такая функциональность только мешает. Пришел к выводу, что нужен редактор с минимальным набором функций.

Очень понравились идеи, озвученные в статье "Пишем правильный online WYSIWYG-редактор". К сожалению, код, приведенный в статье, в современных (даже не в самых новых) браузерах оказался не работоспособен: в IE 6 не работает редактирование блочных элементов, в FF 1.5 -- строчных. Опера более-менее корректно работает, но там что-то с определением выделенной области...

Существует ли работающий WYSIWYG-редактор, построенный на этих принципах?

Из огромного количества существующих редакторов хотел бы выделить:
http://www.spearance.ru/parser3/wysiwyg/ -- простейший, но корректно работающий в Опере, FF и IE.
https://apps.carleton.edu/opensource/loki/demo/ -- очень правильный редактор (судя по demo). Только я, почему-то, не смог запустить его на своем сервере...

Ссылки по теме (куда меня уже не нужно отправлять):

http://www.hostinfo.ru/articles/web/rubric...5/rubric75/997/ -- обзор основных редакторов (рус.)
http://www.geniisoft.com/showcase.nsf/WebEditors -- Обширный список WYSIWYG-редакторов 
http://htmlarea.com/directory/Web_Software...YSIWYG_Editors/ -- Каталог WYSIWYG-редакторов



P.S.

буквально сейчас еще раз просматривал списки всего найденного и обратил внимание на старую версию одного из редакторов (последняя версия не работоспособна): http://demo.wymeditor.org/wymeditor/tags/0...itor/editor.htm
(http://www.wymeditor.org/en/demo/ -- тут все версии)
Это не совсем WYSIWYG -- они называют это WYSIWYM (). Но, думаю, если применить стили редактируемого документа к тому, что лежит в iframe, то всё будет как надо. Пока серьезных недостатков не нашел.

что ты подразумеваешь под словом "правильный"? что он должен уметь? (только не в общих чертах, а то потом вдруг выясняется, что-нибудь типа "да ну! это редактор не поддерживает вставку из ворда")

по поводу wymeditor:
 нельзя банально выделить несколько параграфов и сказать "а это будут блочные цитаты"
 нельзя отредактировать ссылку после её добавления (вот этого маразма я никогда не понимал)

ps: ещё мне в существующих визивигах очень не нравится, что по ентеру создаётся новый параграф, а для переноса строки приходится юзать шифт+ентер, а то и вообще нельзя его вставить никак %-\ а ведь так естественно: втавил подряд два переноса - получи новый праграф.

Это сообщение отредактировал(а) cruelangel - 25.9.2007, 01:11

Где это "естественно"? В самом ворде, сколько себя помню, именно так: энтер - абзац, шифт-энтер - перенос... так привычно, вроде. А межабзацные отступы, если мешают, можно в CSS убрать. Откуда же это желание (далеко не в первый раз с таким сталкиваюсь) сделать наоборот?


Тут согласен, это действительно маразм. По-хорошему, хотелось бы и таблицы иметь возможность именно редактировать, а не тупо создать-удалить...

Это сообщение отредактировал(а) SelenIT - 25.9.2007, 02:24

> Где это "естественно"? 

в любом plain-text редакторе. пример - форма ответа на этом форуме.


> В самом ворде, сколько себя помню, именно так

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


> энтер - абзац, шифт-энтер - перенос

с практической точки зрения: двойное нажатие энтера много проще и быстрее комбинации с шифтом
c визуальной точки зрения: более сложная комбинация почему-то реализует менее значимое изменение (перенос строки против нового абзаца)


Это сообщение отредактировал(а) cruelangel - 25.9.2007, 02:51

А тут и нет абзацев . Два переноса - это всего лишь два переноса (<br><br>). Но отбивать абзацами, имхо, и красивее, и логичнее...


Оно-то, может быть, и менее значимое, но и гораздо реже востребованное. Обычный юзер (не программист), какой-нибудь гуманитарий, привыкший к Ворду, печатает текст сплошняком, пока "идет связная мысль", мысль закончилась - отбивает энтер - пошел новый абзац. Разрывать строку посреди абзаца приходится гораздо реже, поэтому и реализуется чуть сложнее (также, как и вставка неразрывного пробела вместо обычного, к примеру). Если же принудительно превращать два переноса в абзац, да еще на лету - как быть, если нужны именно два переноса? Нет, имхо, тут в Ворде как раз с точки зрения юзабилити все продумано (и проверено миллионами человеко-часов). По-другому абзацы, имхо, нет смысла делать вообще, т.к. всегда можно обойтись их имитацией (см. выше;).

да, есть такое... Видимо, не могут корректно определять выделенную область, вот и сделали так...


Можно. Поставьте курсор на ссылку и нажмите "Link".

C параграфами там всё сложно. В Опере, например, невозможно создать новый параграф вообще -- по Enter создается <br/>. Вариант с Shift+Enter меня бы устроил... Иногда нужно сделать именно два переноса, а не параграф. Shift+Enter надежнее.

WYMeditor -- продукт очень сырой. В последней версии, например, я не смог придумать, как удалить таблицу... Но, зато, принципы редактирования очень правильные.

А как красиво там сделано добавление пользовательских классов!! Есть парсер CSS. Я просто определяю в CSS нужные классы и название для них (в виде комментария перед классом). Всё!


Основные идеи прописаны в статье "Пишем правильный online WYSIWYG-редактор".
Самые проблемные моменты в реализации на JavaScript:

• редактор должен уметь присваивать блочным и строковым элементам нужные тэги с нужными классами
• должен работать в IE, FF и, желательно, в Опере (современных версиях)
• делать это адекватно :-)

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

Во многих редакторах есть корректная работа с таблицами. Некоторые даже понимают Ctrl-V из Excel. Лично мне таблицы не нужны (в 98% случаев).

Вставка из ворда -- это зло (почти всегда). Сносить всё форматирование, однозначно.

Это сообщение отредактировал(а) gregoryfly - 25.9.2007, 09:07

> Два переноса - это всего лишь два переноса (<br><br>)

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


> Можно. Поставьте курсор на ссылку и нажмите "Link".

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


> Иногда нужно сделать именно два переноса, а не параграф. 

можно пример, когда это семантически обосновано?


> Есть парсер CSS. Я просто определяю в CSS нужные классы и название для них (в виде комментария перед классом). Всё!

это ты сейчас о каком редакторе? в wymeditor я ничего такого не нашёл...


    * редактор должен уметь присваивать блочным и строковым элементам нужные тэги с нужными классами
    * должен работать в IE, FF и, желательно, в Опере (современных версиях)
    * делать это адекватно 

это всё довольно просто реализовать. для строчных элементов - как там описано c помощью foreColor. для блочных - пробегаемся по всем блочным элементам и у касающихся выделения меняем имя тэга и класс. сложности начинаются, когда нужно реализовать убирание строчного выделения у части выделенного текста...


> В Опере, например, невозможно создать новый параграф вообще -- по Enter создается <br/>.

кстати, да  опера по энтеру вставляет бряк и никого не хочет слушать...

Это пустая строка, визуально имитирующая разделение plaintext'а на два "псевдоабзаца", если быть точным;).

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

Если существует хоть одна реализация, где двойное нажатие энтера на лету преобразуется в <p></p> -   


Резервирование места для последующей вставки формулы, стихи в стиле Маяковского, иллюстрация просветления... и вообще, правильно ли сначала дать юзеру выбор (разрешив и <br>, и <p>), а потом принудительно решать за него?


...на Вас прямо не угодишь;)

Это сообщение отредактировал(а) SelenIT - 25.9.2007, 14:31

Конкретно о WYMeditor версии 0.4.
Цитата из CSS-файла, который содержит эти все вещи:


А код выглядит вот так:

/* PARA: Important */
.important p /* p[@class!="hidden-note"] */ {
    color: red; font-weight: bold;
    /* color: red; font-weight: bold; border: 2px solid red; */
}



С помощью foreColor -- пробовал. Брал пример из статьи -- всегда корректно работает только в Опере. Кое как заставил работать в IE. Я не профессионал в JavaScript, поэтому не буду спорить... Скорее всего, этот приём можно заставить работать везде. Просто проблема выросла из 20 строчек кода, которые мне были понятны :-)

Сейчас, покопавшись в WYMeditor, решил оставить попытки сделать свой редактор (или заказать у профессионалов) -- все тонкости учесть практически не реально. Буду использовать WYM. Попробую приделать к нему некоторые полезные мелочи, например, типограф от студии Лебедева. Плюс, где-то нужно будет взять полноценный менеджер изображений (файлов).

В смысле удобства использования хорошие идеи есть в Реформаторе студии Лебедева. К сожалению, не помню, где его взял...

> С точки зрения программы это один гигантский абзац с кучей искусственных разрывов.

c точки зрения программы нет ни текста, ни абзацев - есть только энное число байтов. с точки зрения человека, абзац - это группа предложений, объединённых общим смыслом, визуально отделённая от остального текста.


> Если существует хоть одна реализация, где двойное нажатие энтера на лету преобразуется в <p></p>

http://dark-demon.jino-net.ru/wysiwiki2/index.xml но она ещё не готова к употреблению


> Резервирование места для последующей вставки формулы

а зачем его резервировать? если "чтобы потом быстро найти места куда вставлять", то лучше не пустое место оставлять, а встявлять яркий маркер "не забыть вставить сюда формулу".


> стихи в стиле Маяковского

и при чём тут пустые строки?


> иллюстрация просветления

о да.. такой креатив шопипец...


> правильно ли сначала дать юзеру выбор (разрешив и <br>, и <p>), а потом принудительно решать за него?

неправильно, выбора давать не надо изначально 


Это сообщение отредактировал(а) cruelangel - 25.9.2007, 18:00

Но в языках разметки есть абзац (<p></p>) и разрыв строки (<br>) - разные сущности с абсолютно разной семантикой.


Оперная реализация так и делает... ;)


cruelangel, Ваше? Ох, сомнительная фича. Лично меня, например, любая "магия", творящаяся без спросу, люто раздражает. Предлагаю вынести юзабельность такого подхода на голосование.

> Но в языках разметки есть абзац (<p></p>) и разрыв строки (<br>) - разные сущности с абсолютно разной семантикой.

именно поэтому и надо преобразовывать бряки в параграфы, ведь разделение двух участков текста пустой строкой для пользователя фактически означает деление на абзацы.


>> неправильно, выбора давать не надо изначально
> Оперная реализация так и делает... ;)

вот бы она ещё два бряка в параграф преобразовывала - цены бы ей не было. а то никак не могу её этому научить %-(

Добавлено через 8 минут и 7 секунд
что ж,  давай попробуем с опросом: http://forum.vingrad.ru/forum/act-ST/f-319...6/unread-1.html

Визуальное и не более того. Лично для меня пустая строка - это просто пустая строка, никакого "магического эффекта" я от нее не жду. Мне абсолютно без разницы, как она реализована (бряком или <p>&nbsp;</p>), зато принципиально, чтобы результат нажатия энтера был предсказуемым и единообразным. Мало ли, вдруг какую-нибудь особо важную мысль я захочу отделить не одной, а двумя пустыми строками. Или напишу загадку с ответом, а перед ним захочу вбить кучу пустых строк, чтоб до поры до времени скрыть его за экраном.

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

> Кстати, если не путаю, новички в том же ворде часто отбивают лишний энтер между абзацами,
> но их от этого специально отучают и приучают вместо этого пользоваться отступами...

в частности второй способ, против которого ты выступаешь, и отучает новичков отбивать пустые строки энтерами (или шифт+энтерами, не принципиально), а приучает использовать специальные элементы: "особо важная мысль" и "скрытый ответ на загадку". 

Это сообщение отредактировал(а) cruelangel - 26.9.2007, 16:19

Честно говоря, не вижу связи между способом разрыва строк/абзацев и использованием/неиспользованием специальных логических элементов. Я выступаю только за единообразие результата нажатия энтера во всех ситуациях. А нужен другой результат - логично использовать модификатор (тот же шифт).

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

upd: Сорри, недотестировал пример. Пустой абзац, получается, создать действительно трудно. Кстати, как отобразится на сайте конструкция <p><br>·</p>?

Это сообщение отредактировал(а) SelenIT - 26.9.2007, 16:58

> Кстати, как отобразится на сайте конструкция <p><br>·</p>?

думаю бряк в начале можно смело вырезать...


> на все случаи жизни логических элементов/классов не предусмотришь

поэтому нужен достаточно простой механизм расширения функционала

А не приведет ли это в итоге к тому, с чем боролись? Только вместо "Жирный красный комик 36 пунктов" будет "Текст, очень красивый по мнению блондинки-секретарши", но выглядеть он будет так же? Как-то это слабо стыкуется с идеологией "изначально ограничить возможность выбора юзера" (с которой я кстати, безусловно согласен)...

Возвращаясь к переносам: а часто ли при семантически правильной верстке нужен одиночный бряк?

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

Тезисы, как справедливо отметил gregoryfly в теме с опросом, логичнее оформлять списком;).

ну тогда вообще всё логичнее оформлять списками - список параграфов, список ссылок итп 
согласись следующее оформление выглядит довольно глупо:

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

в общем, это довольно сложная тема, где нужно применять ul, где dl, а где обычный div... хотя идеологически верно - ввести новый элемент thesises, но это в далёком xml будущем 

Это сообщение отредактировал(а) cruelangel - 26.9.2007, 23:22

Имхо, если уж говорить об оформлении, то вообще нормальные по сути предложения, разбитые разрывами строк вместо точек и заглавных букв выглядят, эээ... не очень. Разве не лучше так?

А вот

• настоящие законченные тезисы, 
• незаконченные "обрывки" мыслей, объединенные общим контекстом, и
• просто перечисления чего-либо

вполне логично оформлять списком, разве нет?


Грамматически верно ввести элемент theses . А в реальной веб-разметке, имхо, вполне достаточно использовать <ul class="theses">. Или несколько <p class="thesis"> - по вкусу. Но разбивать тезисы бряками?

Впрочем, это уже глубокий оффтоп...

Это сообщение отредактировал(а) SelenIT - 27.9.2007, 00:58

Всем привет!

Прочитав статью, я так до конца и не определил, какие все-таки требования являются самыми необходимыми при написании WYSIWYG-редактора?

Вы знаете, я считаю, что если расчитывать использование WYSIWYG-редактора для обычного рядового пользователя, который как правило работает с офисными приложениями, то ориентироваться необходимо именно на Microsoft Word.
Так как пользователю совсем нет времени изучать что-то новое.
Для него главное:

[*]старое привычное
[*]интуитивно понятное

Давайте все-таки составим эталон, которым должен руководствоваться разработчик при написании WYSIWYG-редактора.

Попрошу не крошить батон на FCKeditor. В нём гениально реализована настройка функционала, это одна из его основных фишек я считаю. Там можно оставить только тот функционал, который нужен в данном случае, можно создать разный функционал для разных профилей (например в зависимости от прав различных групп пользователей) и вызывать FCKeditor с этими параметрами. Естественно когда весь функционал включён   FCKeditor выглядит громоздко.

Если кому интересно как настроить FCKeditor, могу подсказать ;)

> ориентироваться необходимо именно на Microsoft Word.
> Так как пользователю совсем нет времени изучать что-то новое.

как же он такой занятой нашёл время изучить "Microsoft Word"?

Давайте перестанем спорить про <p> и <br><br> - а начем писать редактор, который будет работать только с CSS стилями и ничего лишнего + логические формотирование (хотя <b> и <i> тоже пока можно отнести к логичиским) + правлильная работа с вставками <img> (Редактор должен совмещать в себе файл менеджер для поиска файлов и правильного определения URL для текузей страницы = желательно относительно, хотя можно относительно родительского каталога) и <a href> (тоже самое). Для начала хватит!  
===
Думал о двойном <br> - вроде это ка кбы НЕхороший тон, НО
вдруг например, такой случай, код на странице вставлен не таким способом

<code><pre>
код...

// здесь автор кода пропустил специально строку
// так как это может быть выделяет логическу часть
..продолжение кода
 </pre></code>

а таким - с использование <p id="cod"></p> без использования <pre>
тогда без двойного <br> не обойтись...

Это очень зависит от браузера, это ведь он генерит вёрстку. ИЕ так вообще не валидные <font> любит ставить  

а кто сказал что IE правилтный браузер?

FCKeditor, код открыт, что мешает урезать функционал ?..
Так и поступили на одном из проектов...