Сайтостроительство (8)

PHP-кодинг (25)

Веб-дизайн (9)

DHTML/JavaScript (8)

Подкастинг (1)

Безопасность в PHP (3)

Секретный раздел

Карта блога

Регистрация пользователей на PHP+MySQL

Скрипт гостевой книги с красивым дизайном

Галерея на jQuery

Простая система регистрации пользователей на сессиях

Галерея на php+jquery

Форма обратной связи с защитой типа капча

Шаблоны запросов и placeholders

Быстрое перенаправление средствами php

Flash плеер для вашего сайта

Сортировка столбцов в таблице на php+mysql

Этапы создания сайта

Распределенная система комментирования

ALIZEE - Moi...Lolita ( LIVE )

Создание документа при помощи JavaScript

Скрипт гостевой книги с красивым дизайном

За весь период

За 2010-11

За 2009-06

За 2009-05

За 2009-04

За 2009-03

За 2009-02

За 2008-08

Бегун контекстная реклама

Ruseller видеоуроки

Letitbit файлообменник

Tak.Ru $$$ вебмастеру

WMmail почтовые рассылки

WMlink продажа трафика

Sape.Ru продажа ссылок

Главная » DHTML/JavaScript

Визуальный редактор на сайте (TinyMCE)

Чтобы загрузить себе последнюю версию системы, вам необходимо зайти на сайт tinymce.org, либо скачать специально мной подготовленную сборку tinymce для вашего сайта.

Итак, допустим, у вас есть некоторый документ form.html, в котором содержится некоторая форма, с полем TextArea. Но как его сделать WYSIWYG-типа?

Да очень просто, для этого вам сначала необходимо подключить основной класс TinyMCE, после чего в документе автоматически станет доступным прототип объекта TinyMCE, который и является основным API-интерфейсом системы, через который происходит общение с программой, и её настройка.

Давайте рассмотрим простейший случай применения программы, на примере документа с формой и элементом TextArea:


<html>
<head>
<title>Первый пример</title>
<meta http-equiv='Content-Type'
Content='text/html;charset=utf-8'/>
<script type='text/javascript'
src='tinymce/jscripts/tiny_mce/tiny_mce.js'></script>
<script type='text/javascript'>
<!--
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
-->
</script>
</head>
<body>
<h3>Некоторый элемент TextArea</h3>
<textarea id='ds1' cols='65' rows='13'></textarea>
</body>
</html>

В данном простейшем случае в качестве поля для редактирования мы увидим редактор с минимальным набором функций для стандартного форматирования текста, но не больше. Подобный подход можно применить в рамках проекта по созданию чата, форума, гостевой книги и прочего. Для более же сложных вариантов у нас есть дополнительный набор функций и методов, о которых мы сейчас и поговорим. Но давайте поговорим сначала о параметрах, которые мы в данном случае передаём в метод инициализации класса - init(). Мы передаём в качестве параметра некоторый хеш, в котором значение элемента mode соответствует 'textareas', а элемента theme - 'simple'. Элемент `mode` означает метод "замены" стандартных текстовых полей (textarea), на WYSIWYG. Он может принимать значения 'textareas' , 'exact' и 'specify_textareas'. В случае 'textareas' мы даём команду редактору преобразовать все элементы TextArea в редактируемые элементы. В остальных случаях мы манипулируем определенным полями для редактирования, идентификаторы которых необходимо перечислить в качестве значения элемента elems, через запятую.

В свою очередь элемент 'theme' означает ничто иное, как текущий тип оформления редактора и может принимать значения: 'simple' и 'advanced'.

В нашем случае, когда мы используем тип 'simple', мы подключаем исключительно стандартные функции редактора, и при этом не может особо менять его функционал, как я уже говорил - это вполне сгодится для малых проектов, а так же для тех, в которых необходима высокая скорость соединения.

Теперь давайте рассмотрим работу с редактором во время включённого режима темы 'advanced'.

Для отображения редактора в более функциональном виде необходимо использовать дополнительные параметры, указывающие какие панели нужно паказывать в редакторе.

Приведу пример кода наиболее распространенного вида при использовании расширенного режима отображения


<html>
<head>
<title>TNT43 Visual Editor</title>
<script type='text/javascript' src='tinymce/jscripts/tiny_mce/tiny_mce.js'></script>
<script type='text/javascript'>
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "table,save,advhr,advimage,advlink,insertdatetime,
preview,zoom, searchreplace,print,contextmenu,paste,directionality ",
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,
forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator",
theme_advanced_buttons3_add : "advhr,separator,print,separator,ltr,rtl,separator ",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
plugi2n_insertdate_dateFormat : "%Y-%m-%d",
plugi2n_insertdate_timeFormat : "%H:%M:%S",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
paste_auto_cleanup_on_paste : true,
paste_convert_headers_to_strong : false,
paste_strip_class_attributes : "all",
paste_remove_spans : false,
paste_remove_styles : false
});
</script>
</head>
<body>
<textarea id='data' rows='15' cols='60'></textarea>
</body>
</html>

ВАЖНО: Полезные функции!

  • paste_remove - при режиме true, редактор фильтрует все поступившие из буфера обмела данные, и удаляет контеинеры span.
  • paste_convert_headers_to_strong - при режиме true, редактор изменяет все заголовки (h1,h2,h3,h4,h5,h6) в буффере обмена на элементы <strong>
  • paste_auto_cleanup_on_paste - фильтр для данных из буфера обмена (применимо к данным из MS Word)

Чтобы вставить этот редактор в блок добавления комментариев на вашем сайте достаточно прописать следующие строчки. Вот в частности как это сделал я:


<form action="comments.php" method="post" name="form_com">
<div class="pvote">
<table cellpadding="2" cellspacing="0" border="0" style="font-size:75%">
<tr><td>Комментарий<td></tr>
<script type="text/javascript" src="js/tinymce/tiny_mce.js"></script>
<script type="text/javascript">tinyMCE.init({mode:"textareas",theme:"advanced",plugins:"advhr,advimage,advlink,insertdatetime,paste",theme_advanced_buttons2_add:"forecolor",theme_advanced_toolbar_location:"top",theme_advanced_toolbar_align:"left",theme_advanced_statusbar_location:"bottom"});</script>
<tr><td><textarea id="ds1" name="text" cols="40" rows="10"></textarea></td></tr></table>
<input name="id" type="hidden" value="<? echo $id; ?>"></div>
<span class="comment"><input name="sub_com1" type="submit" value="Комментировать" style="width:386px"></span>
</form>

Обратите внимание на значение атрибута id тэга textarea (id="ds1"). Для вставки второго редактора используйте id="ds2" и так далее.

Вот - это и весь код. Он выглядит довольно громоздко, но в целом довольно прост для понимания. Абсолютно все параметры можно редактировать, убирать лишние функции, добавлять новые, тем самым подбираее себе на сайт только самые необходимые. За более подробной информацией по используемым функциям обращайтесь за документацией на офф.сайт TinyMCE в России http://tinymce.ru

Вот и всё! пользуйтесь))

Источник статьи: http://shockstudio.net

Комментировать

Автор: admin | Добавлена: 17.04.2009 | Просмотров: 9972
Рейтинг: 29 | Голосов: 6

Оцените заметку: 1 2 3 4 5

Последние обновления в категории: DHTML/JavaScript

Комментарии (0)

Комментариев пока нет!

Только авторизованные пользователи могут добавлять комментарии. Зарегистрироваться.

Логин:
Пароль:
 

Регистрация

: Тема:

Заметок в базе: 56
Комментариев: 0
Всего юзеров: 114
Сейчас онлайн: 1