HTML редактор для сайта, WYSIWYG редактор кода сайта CKeditor

Что такого вообще WYSIWYG редактор для сайта?

С помощью этой чудесной штуки, посетители смогут писать в форму текста что угодно, любого цвета и размера, а обработчику будет уже передаваться HTML код написанного.

Например, посетитель пишет в форму следующее:

Привет, мир!!!

Это Петя из г.Митяево.

И затем отправляет это. И обработчику, будет доставлен уже HTML, код, отправленного Петей текста:

 <p><span style="color: #ff6600;">Привет</span><span style="color: #00ff00;">мир</span><span style="color: #0000ff;">!!!</span></p>
<p><span style="color: #ff0000;">Это Петя из г.Митяево.</span></p>

Для чего это нужно?

Это может понадобиться во-первых для безопасности. В редакторе вы можете убрать доступ к HTML коду, написанного, и никто не сможет разместить ссылку или оставить открытыми тэги.

Во-вторых это очень удобно для самих посетителей. Они без проблем могут выделить жирным какие-особые участки текста и сразу видеть что они выделили и как оно будет выглядеть в итоге. И всё это без каких либо BB-кодов и прочей ерунды. Всё отображается сразу в форме ввода.

Начнём...

Я не буду вам советовать то, с чем не имел дело, поэтому разберём единственный редактор, который мне понравился и не безосновательно.

Рассмотрим очень удобный и настраваемый под ваш вкус редактор CKeditor.

Этот редактор я и сам неоднократно использовал на некоторых сайтах и вам советую.

В чём преимущество данного редактора?

1. Простой интерфейс, в который умещена неплохая функциональность.

2. Лёгкая настраеваемость. Вы можете не имея знаний по Web-программированию, с лёгкостью настроить кнопки редактора (Добавить/Удалить/Переместить).

3. Удобность для использования и надёжность.

Как использовать CKeditor?

1.Для начала скачайте архив с файлами редактора.

Скачать

2.Распакуйте архив, папку ckeditor, содержащую файлы редактора, скопируйте в корень вашего сайта, к кторому собираетесь подключить редактор.

3. Теперь необходимо подключить редактор к сайту. Вставьте между тегами <head> и </head> следующие строки:

<script src="/ckeditor/ckeditor.js"></script>
<script src="/ckeditor/samples/sample.js"></script>
<link rel="stylesheet" href="/ckeditor/samples/sample.css">

Первые 2 строки подключают сам редактор с модулями, третья - визуальные стили.

4. Настало время использования редактора. Вам нужно создать элемент textarea, на который и будет распространяться действия редактора. Как это нужно сделать? Вот пример:

<form method="POST" action="index.php">
<textarea cols="80" name="mess" id="mess" cols="48" rows="10"></textarea>
<script>
CKEDITOR.replace( 'mess', {
uiColor: '#dddddd',
toolbar: [

['Source','-','Save','NewPage','Preview','-','Templates'] ,
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print'] ,
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
['BidiLtr', 'BidiRtl'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']

]
} );
</script>
<br><input type="submit" value="Постить" name="B1">
</form>

Зелёным цветом выделен Javascript редактора, который необходимо вставить ниже необходимой к привязке формы textarea. Обратите внимание какое имя имеет textarea, такое у него должно быть и id, и именно такое имя должно быть в скрипте редактора, который вы располагаете ниже. В примере использовано имя mess.

 

Как настраивать редактор?

Для настройки элементов редактора, правьте тот код, который вы вставляете на странице, наже textarea.

Настройка элементов редактора заключена в опцию toolbar. Обратите внимание на используемый синтаксис, для примера:

toolbar: [
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']
]

toolbar - Это опция в которой содержаться используемые на панели редактора элементы. Начинается и заканчивается квадратными скобками [ и ]

['TextColor','BGColor'] и ['Maximize', 'ShowBlocks','-','About'] - Это 2 блока элементов редактора. Каждый из блоков должен отделяться запятой друг от друга и долбын быть заключён в квадратные скобки.

TextColor, 'BGColorMaximizeShowBlocks и About - Это имена элементов которые вы добавляете на панель редактора(Ниже на странице представлены все имена элементов редактора). Каждый из элементов должен быть заключён в одиночные кавычки (апостроф) и отделён друг от друга запятой.

'-' - Это вертикальная черта, визуально отделяющая элементы редактора в одном блоке.

Кроме настройки элементов на панели редактора, можно также настроить цветовое оформление редактора. сделать это можно в код, который вы помещаете после необходимого поля textarea. Изменит цвет оформления можно такой строкой:

uiColor: '#dddddd',

В этой строке #dddddd - Цвет редактора, который будет вторым цветов в градиенте белого в #dddddd.

Строку это нужно заключать НЕ В toolbar!!! Посмотрите на примере выше как это правильно делать, чтобы не ошибиться.

Возможные элементы редактора (для вставки в toolbar):

Source - Показать код

Save - Сохранить

NewPage - Новая страница

Preview - Предпросмотр

Templates - Шаблоны

Cut - Вырезать

Copy - Копировать

Paste - Вставить

PasteText - Вставить только текст

PasteFromWord - Вставить из Word

Print - Печатать

Undo - Отменить

Redo - Повторить

Find - Найти

Replace - Заменить на странице

SelectAll - Выделить всё

RemoveFormat - Убрать форматирование

Form - Создать форму

Checkbox - Создать чекбокс

Radio - Создать кнопку выбора

TextField - Создать текстовое поле

Textarea - Создать многострочное текстовое поле

Select - Создать список выбора

Button - Создать кнопку

ImageButton - Изображение кнопки

HiddenField - Создать скрытое поле

BidiLtr - Направление текста слева направо

BidiRtl -Направление текста справа налево

Bold - Жирный текст

Italic - Курсив

Underline - Подчёркнутый

Strike - Зачёркнутый

Subscript - Подстрочный

Superscript - Надстрочный

NumberedList -Нумерованый список

BulletedList -Маркерованый список

Outdent - Уменьшить отступ

Indent - Увеличить отступ

Blockquote -Цитата

CreateDiv - Создать DIV

JustifyLeft - Обтекание слева

JustifyCenter - Обтекание по центру

JustifyRight - Обтекание справа

JustifyBlock - Обтекание по всей ширине

Link - Создание ссылки

Unlink - Удаление ссылки

Anchor - Создание якоря на странице

Image - Вставка изображения

Flash - Вставка Flash ролика

Table - Вставка таблицы

HorizontalRule - Горизонтальная черта

Smiley - Смайлы

SpecialChar - Спец символы

PageBreak - Разрыв страницы для печати

Styles - Стиль текста

Format - Формат текста

Font - Шрифт текста

FontSize - Размер шрифта текста

TextColor - Цвет текста

BGColor - Фон текста

Maximize - Максимизировать редактор

ShowBlocks - Показать блоки

About - О разработчиках

Если у вас возникнут какие-либо вопросы, пишите в комментариях.

В заключение хочется сказать что в редакторе CKeditor по умолчание невозможно загрузить картинку или файл на сервер, но можно включить эту возможность. О том как сдалать чтобы CKeditor загружал картинки и файлы на сервер описано в этом материале.


Добавить комментарий


Защитный код
Обновить

Карта сайта