Лёгкий визуальный редактор 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
Как раз только опубликовал статью пр визивиг редактор. Но хорошо, что у тебя как на сайт установить, у меня же по другому. А за статью спасибо, как раз экспериментирую с сайтом новым (самописный и простенький), но думаю смогу на него CLE поставить.