Лёгкий визуальный редактор CLEditor

При тестировании двух WYSIWYG-редакторов, FCKeditor и TinyMCE, выиграл CLEditor от Premium Software. Почему так получилось? Дело в лёгкости и простоте редактора. Правда у него есть масса проблем из-за которых многие разработчики откажутся от его использования. Но пока рано о проблемах. Его огромное достоинство заключается в том, что вся библиотека для визуального редактирования состоит всего из пяти файлов. Один из этих файлов можно смело удалять, так как он нужен только тем кто хочет исправить какие-либо косяки. Его установка занимает всего пару минут редактирования страницы. Объём копируемых файлов всего 17KB. При редактировании существующего параграфа, не уничтожается старое форматирование.

Теперь о минусах этого редактора. Он совершенно не подходит педантам, которые хотят видеть на своих проектах чистый и валидный HTML-код. Дело в том, что при форматировании текста этот скрипт использует не стили и классы, а тэг font, который был удалён в спецификации HTML 5. Форматирование параграфа тоже сделано старым методом: align. Если в тексте уже был использован стиль подключаемый к страничке, то он не воспринимается и, соответственно, не применяется при визуальном форматировании. Перед тэгами завершения параграфа обязательно ставится тэг перевода строки.

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

И так, от слов к делу.

Подключение редактора

Для начала заходим на сайт разработчиков CLEditor и скачиваем архив с программой. Распаковываем архив в корень сайта. Нас интересует всего четыре файла:

• jquery.cleditor.min.js
• jquery.cleditor.css
• buttons.gif
• toolbar.gif

Кстати, без заточки напильником этот скрипт не работает. По этому приготовились к активному кодингу и не забываем о том, что это приложение является плагином для jQuery, а не самостоятельным продуктом. По этому предварительно скачиваем jQuery. Его можно найти по адресу: jQuery from Google API, либо порывшись в HTML-коде практически любого сайта. Скачав этот файл, его необходимо записать в корень сайта.

Когда скачали всё необходимое, открываем в HTML-редакторе страничку на которой нужно заменить стандартную форму для редактирования. Сначала подключаем дополнительный файл с таблицами стилей:

<link rel="stylesheet" type="text/css" href="/jquery.cleditor.css" />

Далее, перед областью для редактирования, прописываем вызов двух джаваскриптов:

<script type="text/javascript" src="/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.cleditor.min.js"></script>

Потом необходимо отредактировать файл jquery.cleditor.css так как он содержит небольшую ошибку. Необходимо найти строчки содержащие:

• images/toolbar.gif
• images/buttons.gif

И ставим перед этими строчками слэши. Получится вот так:

• /images/toolbar.gif
• /images/buttons.gif

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

Затем меняем стандартные <textarea name="input"> на <textarea id="input" name="input">. Изменяем идентификатор на id=container слою в котором выводится форма для редактирования.

Добавляем несколько строк скрипта для растягивания по ширине и высоте:

<script type="text/javascript">
  $(document).ready(function() {
    editor = $("#input").cleditor({width:"100%", height:"100%"})[0].focus();
    $(window).resize();
  });
  $(window).resize(function() {
    var $win = $(window);
    $("#container").width($win.width() - 32).height($win.height() - 33).offset({left:15, top:15});
    editor.refresh();
  });
</script>

Вот и всё. Довольно просто и весело.

Кстати, сейчас кручу в лапах интересную CMS для блогов. Называется «Эгея». Очень интересный и простой движок для блоггеров не претендующих на изыски. Любителям минимализма очень понравится сие творение Ильи Бирмана.

UPD: по просьбам трудящихся сделал архив, содержащий исправленный скрипт и добавил библиотеку jQuery.
Скачать архив cleditor.zip.

Тэги: программирование

Отредактировано:2020-09-26 11:01:40