От автора: когда мы создаем сайт, предполагающий административную часть, то рано или поздно нам придется столкнуться с вопросом визуального редактора для добавления/редактирования контента на сайте. Те, кто знакомы с языком разметки HTML, могут обойтись и без подобного редактора, вводя теги в поля формы вручную… но, согласитесь, это крайне неудобно. Да и что делать, если сайт мы пишем на заказ? Клиент ведь может вообще не знать такого слова — «тег».
Давайте решим эту проблему.
Детали учебника
Тема: Сайтостроение
Сложность: Легкая
Урок: Видео (.mp4)
Время: 00:43:09
Размер архива: 81 Mb
Говоря о визуальном редакторе, в сети Вы можете встретить такой термин, как WYSIWYG-редактор. На самом деле — это аббревиатура, которая расшифровывается следующим образом — «What You See Is What You Get». Перевести эту фразу можно буквально так — «Что ты видишь, то ты и получишь».
Подобных редакторов довольно много. Есть как платные, так и бесплатные решения. Наиболее известны и широко используемы редакторы TinyMCE и CKeditor. Сегодня мы как раз будем использовать второй из них — CKeditor.
Для работы с этими редакторами совсем необязательны знания HTML/CSS, и наполнять сайт может рядовой пользователь, достаточно лишь немного разобраться. Панель таких редакторов очень напоминает панель небезызвестного MS Word (который по сути своей также является WYSIWYG-редактором). Вот как выглядит стандартная панель редактора CKeditor:
Итак, для того, чтобы научиться устанавливать визуальный редактор на страницы своего сайта, нам потребуется простенький тестовый сайт из одной странички, точнее из двух — вторая будет страницей административной части. Поскольку создание сайта с использованием БД не является целью нашего урока, то этого момента я лишь вскользь касаюсь в видеоверсии урока, объясняя принцип работы заранее написанного функционала.
Таким образом, страница для работы у нас имеется. Для установки WYSIWYG-редактора нам потребуется его дистрибутив. Его Вы найдете в дополнительных материалах либо можете скачать с офсайта — ckeditor.com
Безусловным преимуществом редактора является простота его установки. Сразу следует отметить, что редактор используется только для текстовых областей (textarea), т.е. использовать его для полей ввода (input) нельзя. Первое, что нужно сделать для подключения редактора — это подключить скрипт ckeditor.js… подключаем в области head:
|
1 |
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script> |
После этого текстовой области, к которой подключается редактор, необходимо присвоить идентификатор. Поскольку идентификатор уникализирует элемент документа, это значит, что мы можем подключать редактор к любому количеству текстовых областей документа. Присваиваем идентификатор текстовой области:
|
1 |
<textarea id="editor1" name="txt" cols="100" rows="20"><?php echo $txt[0]['text'] ?></textarea> |
Последним этапом будет небольшой участок кода JavaScript сразу после текстовой области. Этот код как раз и установит редактор для искомого поля формы:
|
1 2 3 4 5 6 7 8 |
<textarea id="editor1" name="txt" cols="100" rows="20"><?php echo $txt[0]['text'] ?></textarea> <script type="text/javascript"> var ckeditor1 = CKEDITOR.replace( 'editor1' ); AjexFileManager.init({ returnTo: 'ckeditor', editor: ckeditor1 }); </script> |
Дело сделано… Теперь можем сохранить результаты работы и протестировать. Если все сделано верно, то теперь к текстовой области подключается визуальный редактор и мы сможем форматировать текст непосредственно из него:
Казалось бы все отлично. Но на самом деле это только половина работы. Все дело в том, что в бесплатной версии не предусмотрен файловый менеджер. Это значит, что загрузить, к примеру, картинку для статьи посредством установленного редактора не получится. Именно поэтому следующей нашей задачей будет интеграция файлового менеджера в редактор.
Уже готовое решение можно найти на сайте demphest.ru, где автор предлагает некоммерческий файловый менеджер, который, к слову, подходит как для CKEditor, так и для TinyMCE. В дополнительных материалах Вы найдете дистрибутив данного плагина или можете взять его с офсайта.
Итак, для интеграции нам потребуется для начала подключить скрипт ajex.js:
|
1 |
<script type="text/javascript" src="/AjexFileManager/ajex.js"></script> |
И немного изменить скрипт, инициализирующий визуальный редактор:
|
1 2 3 4 5 6 7 8 |
<textarea id="editor1" name="txt" cols="100" rows="20"><?php echo $txt[0]['text'] ?></textarea> <script type="text/javascript"> var ckeditor1 = CKEDITOR.replace( 'editor1' ); AjexFileManager.init({ returnTo: 'ckeditor', editor: ckeditor1 }); </script> |
Готов наш визуальный редактор php. Опять-таки ничего сложного. После подключения мы можем запустить файл ajax.php с GET-параметром isWork. Этот скрипт создаст необходимые каталоги, куда и будут сохраняться файлы, загружаемые из редактора.
Вот теперь все. Наш визуальный редактор с файловым менеджером готовы — осталось только наслаждаться теперь уже простой возможностью добавления/редактирования контента.
На этом наш урок завершен. Ваши вопросы и отзывы всегда будем рады видеть в комментариях. Удачи в Ваших разработках и до новых встреч!
Комментарии (94)