Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
Форум программистов > 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: ещё мне в существующих визивигах очень не нравится, что по ентеру создаётся новый параграф, а для переноса строки приходится юзать шифт+ентер, а то и вообще нельзя его вставить никак %-\ а ведь так естественно: втавил подряд два переноса - получи новый праграф. |
Автор: cruelangel 25.9.2007, 02:41 |
> Где это "естественно"? в любом plain-text редакторе. пример - форма ответа на этом форуме. > В самом ворде, сколько себя помню, именно так ворд - далеко не эталон с точки зрения юзабилити и если честно, несколько задалбывает мания создателей визивигов реализовать ворд на базе веб-технологий. получается криво и неудобно. особенно убивает, что одной только клавиатуры не достаточно - приходится то и дело хватать мышку и тянуться к кнопочке на тулбаре.. > энтер - абзац, шифт-энтер - перенос с практической точки зрения: двойное нажатие энтера много проще и быстрее комбинации с шифтом c визуальной точки зрения: более сложная комбинация почему-то реализует менее значимое изменение (перенос строки против нового абзаца) |
Автор: SelenIT 25.9.2007, 04:50 | ||||
А тут и нет абзацев ![]()
Оно-то, может быть, и менее значимое, но и гораздо реже востребованное. Обычный юзер (не программист), какой-нибудь гуманитарий, привыкший к Ворду, печатает текст сплошняком, пока "идет связная мысль", мысль закончилась - отбивает энтер - пошел новый абзац. Разрывать строку посреди абзаца приходится гораздо реже, поэтому и реализуется чуть сложнее (также, как и вставка неразрывного пробела вместо обычного, к примеру). Если же принудительно превращать два переноса в абзац, да еще на лету - как быть, если нужны именно два переноса? Нет, имхо, тут в Ворде как раз с точки зрения юзабилити все продумано (и проверено миллионами человеко-часов). По-другому абзацы, имхо, нет смысла делать вообще, т.к. всегда можно обойтись их имитацией (см. выше;). |
Автор: gregoryfly 25.9.2007, 08:58 | ||||||
да, есть такое... Видимо, не могут корректно определять выделенную область, вот и сделали так...
Можно. Поставьте курсор на ссылку и нажмите "Link". C параграфами там всё сложно. В Опере, например, невозможно создать новый параграф вообще -- по Enter создается <br/>. Вариант с Shift+Enter меня бы устроил... Иногда нужно сделать именно два переноса, а не параграф. Shift+Enter надежнее. WYMeditor -- продукт очень сырой. В последней версии, например, я не смог придумать, как удалить таблицу... Но, зато, принципы редактирования очень правильные. А как красиво там сделано добавление пользовательских классов!! Есть парсер CSS. Я просто определяю в CSS нужные классы и название для них (в виде комментария перед классом). Всё!
Основные идеи прописаны в статье "Пишем правильный online WYSIWYG-редактор". Самые проблемные моменты в реализации на JavaScript:
Последний пункт сложно описать заранее, но это больше касается интерфейса, а не внутренних функций. Но тут также важно, например, корректное определение выделенной области и определение, к чему именно нужно применить действие редактирования. Во многих редакторах есть корректная работа с таблицами. Некоторые даже понимают 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 | ||||
Это пустая строка, визуально имитирующая разделение plaintext'а на два "псевдоабзаца", если быть точным;). С точки зрения программы это один гигантский абзац с кучей искусственных разрывов. А между настоящими абзацами нет никаких пустых строк - только отступы, заданные стилями. Если существует хоть одна реализация, где двойное нажатие энтера на лету преобразуется в <p></p> - ![]()
Резервирование места для последующей вставки формулы, стихи в стиле Маяковского, http://forum.dklab.ru/viewtopic.php?p=70980#70980... и вообще, правильно ли сначала дать юзеру выбор (разрешив и <br>, и <p>), а потом принудительно решать за него? ...на Вас прямо не угодишь;) |
Автор: gregoryfly 25.9.2007, 14:47 | ||||
Конкретно о 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. Попробую приделать к нему некоторые полезные мелочи, например, типограф от студии Лебедева. Плюс, где-то нужно будет взять полноценный менеджер изображений (файлов). |
Автор: 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 | ||
Но в языках разметки есть абзац (<p></p>) и разрыв строки (<br>) - разные сущности с абсолютно разной семантикой. Оперная реализация так и делает... ;) 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 | ||
Визуальное и не более того. Лично для меня пустая строка - это просто пустая строка, никакого "магического эффекта" я от нее не жду. Мне абсолютно без разницы, как она реализована (бряком или <p> </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 |
А не приведет ли это в итоге к тому, с чем боролись? Только вместо "Жирный красный комик 36 пунктов" будет "Текст, очень красивый по мнению блондинки-секретарши", но выглядеть он будет так же? Как-то это слабо стыкуется с идеологией "изначально ограничить возможность выбора юзера" (с которой я кстати, безусловно согласен)... Возвращаясь к переносам: а часто ли при семантически правильной верстке нужен одиночный бряк? |
Автор: cruelangel 26.9.2007, 18:30 |
расширением функционала разработчик, а не пользователь ![]() например много мелких несвязных предложений (тезицы) нет смысла делить на абзацы прямо как тут |
Автор: SelenIT 26.9.2007, 18:39 |
Тезисы, как справедливо отметил gregoryfly в теме с опросом, логичнее оформлять списком;). |
Автор: cruelangel 26.9.2007, 23:19 |
ну тогда вообще всё логичнее оформлять списками - список параграфов, список ссылок итп ![]() согласись следующее оформление выглядит довольно глупо:
в общем, это довольно сложная тема, где нужно применять ul, где dl, а где обычный div... хотя идеологически верно - ввести новый элемент thesises, но это в далёком xml будущем ![]() |
Автор: SelenIT 27.9.2007, 00:58 | ||||
Имхо, если уж говорить об оформлении, то вообще нормальные по сути предложения, разбитые разрывами строк вместо точек и заглавных букв выглядят, эээ... не очень. Разве не лучше так?
А вот
Грамматически верно ввести элемент http://lingvo.yandex.ru/en?rpt=slovari&st_translate=2&CardId=SdGhlc2lz;L0B ![]() Впрочем, это уже глубокий оффтоп... |
Автор: Hackboy 5.2.2008, 13:58 |
Всем привет! Прочитав статью, я так до конца и не определил, какие все-таки требования являются самыми необходимыми при написании WYSIWYG-редактора? Вы знаете, я считаю, что если расчитывать использование WYSIWYG-редактора для обычного рядового пользователя, который как правило работает с офисными приложениями, то ориентироваться необходимо именно на Microsoft Word. Так как пользователю совсем нет времени изучать что-то новое. Для него главное: [*]старое привычное [*]интуитивно понятное Давайте все-таки составим эталон, которым должен руководствоваться разработчик при написании WYSIWYG-редактора. |
Автор: Dr.Zlo 5.2.2008, 19:22 | ||
Попрошу не крошить батон на 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 | ||
Это очень зависит от браузера, это ведь он генерит вёрстку. ИЕ так вообще не валидные <font> любит ставить ![]() |
Автор: gisttin 17.3.2008, 00:28 | ||
а кто сказал что IE правилтный браузер? |
Автор: Apimpl 23.3.2008, 11:40 |
FCKeditor, код открыт, что мешает урезать функционал ?.. Так и поступили на одном из проектов... |