аукцион / FPR / donate / услуги / RSS / распечатать / вход 
Мой мир
Вконтакте
Одноклассники

[9 января 2012 | 10 января 2012 | 11 января 2012]

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

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

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

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

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

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

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

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

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

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

Затем меняем стандартные <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




12 комментариев
Имя: Вадим 🖉
Как раз только опубликовал статью пр визивиг редактор. Но хорошо, что у тебя как на сайт установить, у меня же по другому. А за статью спасибо, как раз экспериментирую с сайтом новым (самописный и простенький), но думаю смогу на него CLE поставить.
Комментарий оставлен: 2012-01-11 00:00:00


Имя: Orcinus Orca 🖉
Вадим, я тут про установку написал так как при его установке есть парочка подводных камней, а на их сайте про это ничего не написано. Вот и написал заметку (по большей части самому себе), что бы не лазить по исходникам в поисках ошибок. Я сначала думал, что тулбаровская картинка находится и подключается в скрипте, а оказалось, что ссылка на неё лежит в CSS. Пришлось дотачивать напильником...

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

В серьёзном проекте я бы рекомендовал использовать CKeditor.
Комментарий оставлен: 2012-01-11 00:00:00


Имя: Вадим 🖉
СКЕ немного перегружен ненужным, но для блога он подойдет на 120% — много там интересностей. Я где то видел вообще редактор аля блокнот — шрифт, картинка и всё! Думаю чтобы дать человеку что либо добавить на сайт (уже получается не личный блог) этого вполне хватит.
Комментарий оставлен: 2012-01-11 00:00:00


Имя: Orcinus Orca 🖉
Вадим, при упрощении редакторов бывает и маразм. Например в Эгее всё упрощено до нельзя. Там вообще WIKI-синтаксис используется. Вот мои размышления по этому поводу:
Open WIKI
WYSIWYG и WIKI
Комментарий оставлен: 2012-01-11 00:00:00


Имя: Алиса 🖉
Еще бы рассказали как можно добавить свой текст в данный редактор, например, человек опубликовал пост, но забыл кое-что добавить, тыкает кнопочку редактировать и спокойно проводит манипуляции с текстом.
Буду очень благодарна за ответ :)
Комментарий оставлен: 2012-06-06 00:00:00


Имя: Orcinus Orca 🖉
Алиса, это уже нужно писать отдельную программу на стороне сервера. Эта программа (скрипт) извлечёт ранее записанные данные из базы данных и интегрируется их в текст страницы. Это возможно, но неизвестно на каком языке вам нужна подобная программа, а так же неизвестно по какому критерию идентифицировать, что текст был написан конкретно тем человеком, который нажал на кнопку отредактировать.
Комментарий оставлен: 2012-06-06 00:00:00


Имя: Алиса 🖉
Мне вот и нужно написать на js , например значение-то я получить могу, а вот записать почти аналогичным способом уже не получается, пыталась и id прописывать в body, куда собственно текст и пишется, и пытаясь его заменить, но чего-то не выходит аленький цветочек, не видит он его.
Сообразит не могу что-то :)
Комментарий оставлен: 2012-06-06 00:00:00


Имя: Orcinus Orca 🖉
Алиса, на JS нельзя получить данные со SQL который порой закрыт от внешнего мира.
Комментарий оставлен: 2012-06-06 00:00:00


Имя: Алиса 🖉
Я использую технологию ajax, вы меня немного недооцениваете, связь с БД меня не интересует, да и не по теме это, Вы можете привести элементарный пример на подобии:
$(’#input’).val(); (вот я получила значение), а как мне теперь подставить что-либо, например как $(’#input’).val(’Тут какой-то текст’) только не работает к сожалению :)

Комментарий оставлен: 2012-06-06 00:00:00


Имя: Orcinus Orca 🖉
Алиса, пост который вы публикуете где хранится? Вероятно в базе данных, которая скорей всего является Microsoft SQL-Server или Oracle или MySQL. Вы в курсе как у вас организовано хранение постов? А в качестве примера я могу показать как это можно организовать на моём сайте.

Set dump = Server.CreateObject("ADODB.RecordSet")
dump.Open table, DB, adOpenForwardOnly, adLockPessimistic, 2

Response.Write (dump.Fields(0).Value)

Комментарий оставлен: 2012-06-07 00:00:00


Имя: Андрей 🖉
Hi!
Запускаю локально, почему-то не работает )
Так и должно быть?
Комментарий оставлен: 2015-08-29 00:00:00


Имя: Orcinus Orca 🖉
Андрей, браузеры не дают исполнять локальные скрипты. Я с этим несколько раз сталкивался. Возведи на компьютере что-нибудь Дэнвероподобное.
Комментарий оставлен: 2015-08-30 00:00:00



Этот сайт использует файлы cookies, чтобы упростить вашу навигацию по сайту, предлагать только интересную информацию и упростить заполнение форм. Я предполагаю, что, если вы продолжаете использовать мой сайт, то вы согласны с использованием мной файлов cookies. Вы в любое время можете удалить и/или запретить их использование изменив настройки своего интернет-браузера.

Сообщайте мне о замеченных ошибках на: web@orcinus.ru. Все пожелания и советы будут учтены при дальнейшем проектировании сайта. Я готов сотрудничать со всеми желающими. В некоторых случаях, мнение автора может не совпадать с мнением автора! Phone: +7-902-924-70-49.

Top.Mail.Ru
Top.Mail.Ru LiveInternet Rambler's Top100 Яндекс.Метрика