Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Проблема создания онлайн WYSIWYG-редактора


Автор: gregoryfly 24.9.2007, 21:53
Предыстория: Нужен правильный онлайн 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/rubric48/rubric55/rubric75/997/ -- обзор основных редакторов (рус.)
http://www.geniisoft.com/showcase.nsf/WebEditors -- Обширный список WYSIWYG-редакторов 
http://htmlarea.com/directory/Web_Software_Components/WYSIWYG_Editors/ -- Каталог WYSIWYG-редакторов



P.S.

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

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

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

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

Автор: SelenIT 25.9.2007, 01:41
Цитата(cruelangel @  25.9.2007,  01:06 Найти цитируемый пост)
ведь так естественно: втавил подряд два переноса - получи новый праграф.

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

Цитата(cruelangel @  25.9.2007,  01:06 Найти цитируемый пост)
нельзя отредактировать ссылку после её добавления

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

Автор: cruelangel 25.9.2007, 02:41
> Где это "естественно"? 

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


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

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


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

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

Автор: SelenIT 25.9.2007, 04:50
Цитата(cruelangel @  25.9.2007,  02:41 Найти цитируемый пост)
в любом plain-text редакторе. пример - форма ответа на этом форуме

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

Цитата(cruelangel @  25.9.2007,  02:41 Найти цитируемый пост)
более сложная комбинация почему-то реализует менее значимое изменение (перенос строки против нового абзаца)

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

Автор: gregoryfly 25.9.2007, 08:58
Цитата

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

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

Цитата

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

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

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

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

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

Цитата

что ты подразумеваешь под словом "правильный"? что он должен уметь?

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

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

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

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

Автор: cruelangel 25.9.2007, 11:31
> Два переноса - это всего лишь два переноса (<br><br>)

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


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

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


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

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


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

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


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

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


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

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

Автор: SelenIT 25.9.2007, 14:27
Цитата(cruelangel @  25.9.2007,  11:31 Найти цитируемый пост)
нет, два переноса - это пустая строка между двумя абзацами текста.

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

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

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

Цитата(cruelangel @  25.9.2007,  11:31 Найти цитируемый пост)
> Иногда нужно сделать именно два переноса, а не параграф. 
можно пример, когда это семантически обосновано?

Резервирование места для последующей вставки формулы, стихи в стиле Маяковского, http://forum.dklab.ru/viewtopic.php?p=70980#70980... и вообще, правильно ли сначала дать юзеру выбор (разрешив и <br>, и <p>), а потом принудительно решать за него?

Цитата(cruelangel @  25.9.2007,  11:31 Найти цитируемый пост)
опера по энтеру вставляет бряк и никого не хочет слушать...

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

Автор: gregoryfly 25.9.2007, 14:47
Цитата(cruelangel @  25.9.2007,  11:31 Найти цитируемый пост)
это ты сейчас о каком редакторе? в wymeditor я ничего такого не нашёл...

Конкретно о WYMeditor версии 0.4.
Цитата из CSS-файла, который содержит эти все вещи:
Цитата
    The classes panel, the visual feedback and the preview
    will be affected by these values.
    
    - Commented styles inside style definitions are used for visual 
      feedback when using the editor.
    - Comments before opening the style are used as caption.
    - Comments after the class name and before the style declaration ({)
      define the jQuery expression that decides whether this 
      style should be applied or not.


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

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


Цитата(cruelangel @  25.9.2007,  11:31 Найти цитируемый пост)

для строчных элементов - как там описано c помощью foreColor.

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

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

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

Автор: cruelangel 25.9.2007, 17:51
> С точки зрения программы это один гигантский абзац с кучей искусственных разрывов.

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


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

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


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

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


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

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


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

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


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

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

Автор: SelenIT 25.9.2007, 19:02
Цитата(cruelangel @  25.9.2007,  17:51 Найти цитируемый пост)
c точки зрения программы нет ни текста, ни абзацев - есть только энное число байтов

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

Цитата(cruelangel @  25.9.2007,  17:51 Найти цитируемый пост)
неправильно, выбора давать не надо изначально

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

Цитата(cruelangel @  25.9.2007,  17:51 Найти цитируемый пост)
http://dark-demon.jino-net.ru/wysiwiki2/index.xml

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

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

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


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

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

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

Автор: SelenIT 26.9.2007, 15:46
Цитата(cruelangel @  25.9.2007,  20:08 Найти цитируемый пост)
разделение двух участков текста пустой строкой для пользователя фактически означает деление на абзацы.

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

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

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

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

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

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

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

Автор: cruelangel 26.9.2007, 17:19
> Кстати, как отобразится на сайте конструкция <p><br>·</p>?

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


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

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

Автор: SelenIT 26.9.2007, 17:35
Цитата(cruelangel @  26.9.2007,  17:19 Найти цитируемый пост)
достаточно простой механизм расширения функционала

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

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

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

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

Автор: cruelangel 26.9.2007, 23:19
ну тогда вообще всё логичнее оформлять списками - список параграфов, список ссылок итп smile
согласись следующее оформление выглядит довольно глупо:
  • расширением функционала разработчик, а не пользователь smile
  • например много мелких несвязных предложений (тезицы) нет смысла делить на абзацы
  • прямо как тут

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

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

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

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

Цитата(cruelangel @  26.9.2007,  23:19 Найти цитируемый пост)
хотя идеологически верно - ввести новый элемент thesises, но это в далёком xml будущем

Грамматически верно ввести элемент http://lingvo.yandex.ru/en?rpt=slovari&st_translate=2&CardId=SdGhlc2lz;L0B smile. А в реальной веб-разметке, имхо, вполне достаточно использовать <ul class="theses">. Или несколько <p class="thesis"> - по вкусу. Но разбивать тезисы бряками?

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

Автор: Hackboy 5.2.2008, 13:58
Всем привет!

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

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

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

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

Автор: Dr.Zlo 5.2.2008, 19:22
Цитата

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


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

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

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

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

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

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

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

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

Автор: Sardar 16.3.2008, 22:19
Цитата(gisttin @  16.3.2008,  18:22 Найти цитируемый пост)
а начем писать редактор, который будет работать только с CSS стилями и ничего лишнего

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

Автор: gisttin 17.3.2008, 00:28
Цитата

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

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

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)