Использование WYSIWYG редактора CKEditor
Использование WYSIWYG редактора CKEditor для плагинов для CMF Cotonti.
WYSIWYG (является аббревиатурой от англ. What You See Is What You Get, «что видишь, то и получишь») — программа, в которой содержание отображается в процессе редактирования и выглядит очень похоже на конечную продукцию, которая может быть печатным документом, веб-страницей, слайд-презентацией или даже использоваться для освещения театральных событий.
Сам же CKEditor представляет собой приложение JavaScript. Плагин, подключающий этот редактор с CMF Cotonti и позволяющий с его помощью редактировать страницы можно скачать тут. Помимо редактирования страниц, он дает разработчику возможность использовать этот редактор в своих плагинах.
Эту возможность мы сейчас и рассмотрим.
В настройках плагина в панели администратора сайта нам нужно опцию « «ckeditor.js» только для редактирования страниц» перевести в положение «Нет», чтобы CKEditor стал доступным на всех страница сайта (не только при редактировании страниц).
Создание экземпляра редактора
На Вашей странице CKEditor работает как элемент <textarea>. При этом он предоставляет пользователю интерфейс, позволяющий легко набирать текст с использованием форматирования. Что сделать без использования редактора для обычного пользователя не так легко, т.к. для этого потребовалось бы от пользователя знание HTML, которое и потребовалось бы ввести в <textarea>.
Фактически CKEditor использует элемент <textarea> для передачи данных на сервер. Во время работы редактора «textarea» не видна для пользователя. Но для создания экземпляра редактора, Вам нужно сначала создать элемент <textarea>.
<textarea name="editor1"><p>Initial value.</p></textarea>
Обратите внимание, если Вы хотите загрузить данные в редактор, например редактируемую страницу из базы данных, Вам нужно просто поместить данные внуть элемента <textarea>. Как в примере выше.
Мы назвали нашу текстовую область «editor1». Это имя в последующем следует использовать на стороне сервера для того, чтобы прочитать данные, которые будут набраны (отредактированы) в редакторе.
И вот, используя JavaScript CKEditor API мы превращаем текстовую обрасть в полнофункциональный редактор. Это делается всего одним обращением к JavaScript.
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
Этот блок кода может быть включен в любом месте страницы после заменяемого тега «textarea».
Вы также можете вызвать метод replace() из заголовка страницы (внутри тега <head>), но это следует делать из обработчика события «window.onload». Например:
<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'editor1' );
}
</script>
Сохранение данных из редактора
Как уже упоминалось выше, CKEditor работает как элемент <textarea>. Так при отправке формы на сервер, содержащей редактор, его данные отправляются на сервер используя имя замещенного элемента <textarea> как ключ для доступа к ним.
К примеру, следующий PHP код примет данные из редактора, созданного в предыдущем примере:
<?php
$editor_data = $_POST[ 'editor1' ];
?>
Это был общий пример.
Создавая плагин для Cotonti, следует использовать такой код:
<?php
$editor_data = sed_import( 'editor1', 'P', 'HTM' );
?>
Обработка данных на стороне клиента
Иногда требуется бработка данных на стороне клиента, например в проложениях Ajax. Используя CKEditor API данные из редактора, также достаточно легко прочитать, например:
<script type="text/javascript">
var editor_data = CKEDITOR.instances.editor1.getData();
</script>
Полный пример
<html>
<head>
<title>Sample - CKEditor</title>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>
<body>
<form method="post">
<p>
My Editor:<br />
<textarea name="editor1"><p>Initial value.</p></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
</p>
<p>
<input type="submit" />
</p>
</form>
</body>
</html>
(0)
Комментарии: