Использование WYSIWYG редактора CKEditor https://lily-software.com Лента комментариев страницы Cotonti ru Thu, 30 Apr 2026 11:49:08 +0300 Комментируемая страница Использование 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="https://lily-software.com/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>

]]> сб, 20 мар 2010 12:48:00 +0300