Современная, быстрая и удобная система управления сайтом

Визуальный редактор

Архив записейКомментарии: 13Просмотров: 17240

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

Первоначально я взял редактор FreeRTE. Всё в нем замечательно: и оформление, и настройки, но в процессе работы возникло несколько проблем. Главная из них в том, что спецсимволы, которые с лихвой присутствуют в PHP и которые я публикую, не совсем корректно обрабатываются этим редактором. Даже когда я перехожу на закладку «Код», все равно некотоыре символы неверно кодируются.

Основная проблема, как оказалось, кроется в кавычках, которыми экранируются спецсимволы. Получилась солянка: на стороне сервера я делаю правильное html-кодирование, на стороне браузера уже работает JS, со своими особенностями. Поэтому «серверные тексты» нужно отдавать редактору уже в его формате.

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

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

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

Самым лучшим оказался tinyMCE. Но у него очень большой размер. По этой причине пришлось от него отказаться сразу. Далее была еще череда опытов, которые привели меня к WYMeditor.

Этот редактор выгодно отличается от остальных тем, что сразу генерирует практически идеальный HTML. То есть парсинг текстов, как это обычно бывает (например авторасстановка тэгов) уже не нужна. Немного поэкспериментировав с этим редактором, я решил добавить его в CMS. На первых порах все было замечательно, пока я не столкнулся с проблемой, которую так и не смог побороть.

Дело в том, что у меня есть привычка набирать тексты в блокноте, а уже потом их публиковать на сайте. И вот сам процесс вставки текста в этом редакторе сделан довольно станным способом: он напрочь не понимает текст без html-разбивки. То есть его можно вставить, после этого достаточно нажать клавишу курсора и текст превращается в сплошное месиво. Попытки исправить ситуацию ни к чему не привели. Получилось, что WYMeditor отлично подходит для непосредственного набора текстов, но для уже готовых непригоден.

Признаться, я уже был в отчаянии и готов был на всё плюнуть и делать свой редактор с нуля. Я составил список требований:

  • Маленький размер. Чем меньше, тем лучше.
  • Несложный js-код, который можно модернизировать.
  • Возможность добавления своих кнопок.
  • Можно добавлять свои кнопки со своими действиями, например добавить псевдокод или смайлик или любой другой текст.
  • Текст должен добавляться в textarea. Это позволит полностью исключить проблемы с кодированием спецсимволов.
  • Возможность переключаться в режим «Код».
  • Корректное понимание спецсимволов: любой текст добавленный в визуальном режиме должен отображаться в том же виде.

В качестве допольнительного «бонуса» мне хотелось получить возможность задания правил для автоматической правки кода. Например, вы набираете в визуальном режиме «*Текст/*», а при переключении на код получаете «<b>Текст</b>». И обратно.

Должен сказать, что под эти требования я так ничего и не нашел. Но к наткнулся на редактор JWYSIWYG. Если быть точнее, то это даже не редактор, а плагин к jquery. Немного поиграв с ним я вдруг сделал то, что не удавалось с другими.

Как известно обычный текст мы разбиваем символами абзаца. В HTML есть два разных тэга (P и BR). И вот когда вы переключаетесь в любом визуальном редакторе на код, то видите эти тэги в результирующем коде. Причем только в IE они отображаются в новой строчке. В других браузерах вообще получается сплошное мессиво. Конечно работать с таким кодом очень сложно. И вот в JWYSIWYG я смог сделать простую замену: замену <br> тэгов на простой символ переноса строки (и обратно). То есть текст при переключении между этими режимами выглядит примерно одинаково.

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

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

Что касается размеров, то они более чем удовлетворительны: в сумме это 48Кб, включая два css-файла, один gif и сам jquery (29Кб).

Комментариев: 13 RSS

1Егор14-05-2008 06:00

Совершенно правильный выбор, JWYSIWYG — простой и удобный редактор.

2Medalist14-05-2008 06:20

А вам не кажеться что он какойто мало функциональный?

3Максим14-05-2008 08:49

Дело в том, что у него функциональность легко добавляется. Например сейчас такие кнопки:

Жирный, курсив, зачеркнутый, подчеркнуты, влево, по центру, вправо, по формату, вставить абзац, цвет фона, цвет шрифта, преформат (pre), отступ добавить, отступ убрать, sub, sup, отмена, повтор, список нумерованный, список обычный, hr, ссылка, изображение, h1-h6, вырезать, копировать, вставить, увеличить шрифт, уменьшить, удалить форматирование, просмотр кода.

Еще будет [cut] отрезающий анонс. Да и можно добавить любые комбинации и тэги.

Достаточно?

4Medalist15-05-2008 02:06

Круто! Я просто частенько сначала говорю а потом вникаю в проблему :)

5vladname23-05-2008 07:13

для меня требованием было возможность вставки/закачки картинок/файлов прямо из редактора. это сумели только (после обработки) tinyMce и FCKeditor

6Max11-07-2008 12:32

Вы серьезно?

JWYSIWYG уж слишком простой... точнее сказать в нем вообще ничего нет

7Роман20-07-2008 17:15

Дело не в том, что ничего нет, а в том, что можно легко добавить.

8Александр07-09-2008 17:33

Прошу объяснить мне как неопытному. Либо я что-то не так сделал либо редактор напрочь кривой. Проблемы такие: из кнопок h1-h6 показываются только h1,h2,h3, за ними сразу идет "вырезать", h4-h6 вообще нет. Когда пытаюсь какой-то текст обрамить, допустим в h2, страница зависает. Кнопки "увеличить-уменьшить шрифт" и "вставить абзац" тоже отсутствуют. Остальные кнопки вроде работают. И еще, когда пытаюсь редактировать уже имеющуюся страницу с длинным заголовком - он, бывает, внезапно обрезается до двух-трех слов. Может где-то стоит ограничитель по длине заголовка, а я не заметил? И последнее, как разделить анонс и полный текст, т.е. ссылка на полный текст статьи ("читать далее", "more") - как это сделать не пойму?

9Максим07-09-2008 19:00

Дополнительные кнопки появятся только после того, как выловлю все глюки текущего редактора и разберусь с механизмом добавления новых кнопок. Есть там определенные проблемы. Поэтому ограничимся только тем, что есть.

Если же вам нужно вставить другие тэги, то переключаетесь в HTML-режим (голубой фон) и там пишете всё, что душе угодно. ;)

Отделить анонс можно с помощью [cut], [cut далее], [cut Дальше еще %wordcount% слов]

По «зависаниям» и «обрезаниям» ничего не скажу. У меня такой ошибки нет.

10Александр08-09-2008 18:32

Максим, в целом MaxSite CMS мне понравился: легкий, понятная структура шаблона, везде комменты, функционал нормальный, в общем отлично. Но опять же с виз.редактором одно серьезное неудобство: при вставке готового кода в html-режиме, на выходе страницы все что начинается с новой строки закрыто тегами ‹P› ‹/P›. Даже сами теги. И вставить чистый код и получить его на выходе в первозданном виде невозможно. Как это исправить?

11Максим08-09-2008 19:46

Для вставки html прямо в визуальном редакторе достаточно его обрамить в


[ html]
ваш код
[ /html]

Если нужно сделать всю страницу как html, то достаточно в начало добавить [volkman].

А вот что касается обрамнение P, BR, то так работает любой визуальный редактор. Это даже не сколько проблема редактора, сколько браузера - они все по разному генерируют разметку. Насколько было возможно, я исправил их глюки и сделал такие замены, чтобы код был примерно одинаковым.

12WaveСайт23-09-2008 12:54

Не помню, обсуждалось ли это. Сам не нашёл.

1. Будет ли в редакторе "вставка из ворда"? Т.е. чтобы можно было вставить в визуальном режиме, чтобы сохранилось форматирование, но при этом почистились мегатонны вордовских стилей.

2. Типограф. В простейшем варианте хотя бы кнопки тире и угловых кавычек. Будет ли?

3. Вставил из ворда, поклацал кнопками, вот что получил:

http://post4me.ru/images/2008/39/1222170719_89c6ede745fed71e99059a6710f2c680.jpg

Оставьте свой комментарий!

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)