Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > 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 редакторе. пример - форма ответа на этом форуме А тут и нет абзацев . Два переноса - это всего лишь два переноса (<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 и, желательно, в Опере (современных версиях)     * делать это адекватно  это всё довольно просто реализовать. для строчных элементов - как там описано c помощью foreColor. для блочных - пробегаемся по всем блочным элементам и у касающихся выделения меняем имя тэга и класс. сложности начинаются, когда нужно реализовать убирание строчного выделения у части выделенного текста... > В Опере, например, невозможно создать новый параграф вообще -- по Enter создается <br/>. кстати, да  опера по энтеру вставляет бряк и никого не хочет слушать...

Автор: SelenIT 25.9.2007, 14:27

Цитата(cruelangel @  25.9.2007,  11:31 ) нет, два переноса - это пустая строка между двумя абзацами текста. Это пустая строка, визуально имитирующая разделение plaintext'а на два "псевдоабзаца", если быть точным;). С точки зрения программы это один гигантский абзац с кучей искусственных разрывов. А между настоящими абзацами нет никаких пустых строк - только отступы, заданные стилями. Если существует хоть одна реализация, где двойное нажатие энтера на лету преобразуется в <p></p> -    Цитата(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>), а потом принудительно решать за него? неправильно, выбора давать не надо изначально

Автор: 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

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

Автор: SelenIT 26.9.2007, 18:39

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

Автор: cruelangel 26.9.2007, 23:19

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

Автор: SelenIT 27.9.2007, 00:58

Имхо, если уж говорить об оформлении, то вообще нормальные по сути предложения, разбитые разрывами строк вместо точек и заглавных букв выглядят, эээ... не очень. Разве не лучше так? Цитата Расширением функционала занимается разработчик, а не пользователь . Например, много мелких предложений, иллюстрирующих одну идею, нет смысла делить на абзацы. Равно как и разбивать бряками. Прямо как тут . А вот настоящие законченные тезисы,  незаконченные "обрывки" мыслей, объединенные общим контекстом, и просто перечисления чего-либо вполне логично оформлять списком, разве нет? Цитата(cruelangel @  26.9.2007,  23:19 ) хотя идеологически верно - ввести новый элемент thesises, но это в далёком xml будущем Грамматически верно ввести элемент http://lingvo.yandex.ru/en?rpt=slovari&st_translate=2&CardId=SdGhlc2lz;L0B . А в реальной веб-разметке, имхо, вполне достаточно использовать <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> любит ставить

Автор: 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)