HTML редактор для сайта, WYSIWYG редактор кода сайта CKeditor
- Подробности
- Категория: Для сайта
- Опубликовано 23.12.2012 11:33
Что такого вообще 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/samples/sample.js"></script>
<link rel="stylesheet" href="/ckeditor/samples/sample.css">
Первые 2 строки подключают сам редактор с модулями, третья - визуальные стили.
4. Настало время использования редактора. Вам нужно создать элемент textarea, на который и будет распространяться действия редактора. Как это нужно сделать? Вот пример:
<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. Обратите внимание на используемый синтаксис, для примера:
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']
]
toolbar - Это опция в которой содержаться используемые на панели редактора элементы. Начинается и заканчивается квадратными скобками [ и ]
['TextColor','BGColor'] и ['Maximize', 'ShowBlocks','-','About'] - Это 2 блока элементов редактора. Каждый из блоков должен отделяться запятой друг от друга и долбын быть заключён в квадратные скобки.
TextColor, 'BGColor, Maximize, ShowBlocks и 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 загружал картинки и файлы на сервер описано в этом материале.