Мне уже не один раз сказали, что у меня талант препода, хотя я его вроде как не замечаю, может потому что он со мной всегда). Что-то меня сподвигло написать небольшую, возможно баянистую инструкцию кое-какой примочки для сайта. Эта информация скорее всего принесёт хоть какую-то пользу начинающим вэбмастерам, ну и кому просто так интересно. 

Уровень знаний - HTML база, желательно JavaScrip

Вот делаем мы на сайте своём форму, что бы отправлятть из неё сообщения куда-либо. Это может быть либо коммент к чему-то или сразу на мыло, короче на важно. В этой форме <form> </form> ставим поле для текста <textarea></textarea> Вот как это выглядит у меня

 

А теперь внимание, вот как это выглядит, если прилепить к форме визуальный редактор

 

 

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

1. Скачать сам скрипт редактора tiny_mce, погуглите, найдёте.

2. Распаковать папку tiny_mce в сайт, можно в корневую директорию (/home/your_site/www/tiny_mce)

3. На странице, где поле для текста делаем так:
В башке документа (после тега <head>) втыкнуть строчку <script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
Соответственно, если у вас свои пути до этого скрипта, то они должны быть прописаны правильно.

4. Теперь вместо вашего <textarea name="text"></textarea> нужно сделать так:

<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "exact",
elements: "content_area",
language: "en",
skin : "o2k7",
skin_variant : "silver",
plugins : "emotions, media, fullscreen, visualchars, advhr, table, paste, insertdatetime, preview, spellchecker, nonbreaking, file_manager, images",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,|,forecolor,backcolor,|,code",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,hr,|,link,unlink,anchor,|,insertdate,inserttime,preview",
theme_advanced_buttons3 : "tablecontrols,|,removeformat,visualaid,|,sub,sup,|,fullscreen",
theme_advanced_buttons4 : "spellchecker,|,visualchars,nonbreaking,|,file_manager,|,images",
extended_valid_elements : "hr[class|width|size|noshade]",
relative_urls : false,
remove_script_host : true
 });
 </script>

<textarea id="content_area" name="content_area" class="area_content" rows="30" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);"></textarea>

5. Собственно всё, осталось только разобрать что к чему.

• theme : "advanced", - Это означает, что мы используем расширенную версию редактора, есть ещё простая, где меньше кнопок, она называется : simple
• mode : "exact", - Означает, что мы припаиваем редактор к форме, через идентификатор формы id, пример:

tinyMCE.init({
 ...
 mode : "exact",
 elements : "elm1,elm2"
});
...
<textarea id="elm1" ..

• elements: "content_area", - Здесь пишем id нашего поля текста (<textarea id="content_area"...)
• language: "en", - Язык интерфейса - Инглиш
• skin : "o2k7", - Скин редактора. Так есть по умолчанию 2 скина, этот и дефолтовский, лежат тут: \tiny_mce\themes\advanced\skins
• skin_variant : "silver", - Вариант скина. Стоит серебристый, но ещё можно поставить голубоватый, нужно просто не писать эту строчку вообще
• plugins : "emotions, media, fullscreen, visualchars, advhr, table, paste, insertdatetime, preview, spellchecker, nonbreaking, file_manager, images", - Тут перечисляем какие плагины подключаются к редактору. Просто большинство некоторых кнопок на примере этого редактора - это плагины, написанные дополнительно, но входящие в комплект по умолчанию, НО не прописанные. Например emotions - это плагин смайликов, fullscreen  - Это кнопка что бы развернуть поле редактора на всё окно, paste - Это кнопка "вставить" для вставки из буфера обмена, как в ворде короче , preview - Когда жмёшь, появится окно, где будет видно как всё будет выглядеть в окончательном варианте. Порядок следования не имеет значения
• theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,|,forecolor,backcolor,|,code", - Так ну тут значит. Вот на скрине 4 ряда кнопок. Так вот верхний ряд - это первый и так далее. Тут можно задать вручную какие кнопки в каком ряду хотим видеть. По умолчанию стоят основные + надо самим дописывать кнопки плагинов, если они подключаются. Но я прописал каждую кнопку отдельно. Знак | - означает разделитель, пробел между кнопками. Название плагтна совпадает с названием кнопки и с названием папки плагина.
• theme_advanced_buttons2 (3) (4) : - Всё аналогично первому ряду. 
• extended_valid_elements : "hr[class|width|size|noshade]", - В этой строке мы разрешаем вставку тега <hr> и говорим ему, что бы он не резал атрибуты class, width, size, noshade (Впринципе не обязательно)
• relative_urls : false, - Означает, что пути к файлам делает не относительными, а абсолютными
• remove_script_host : true - Эта опция используется, когда relative_urls : false. По сути эта опция делает из этого: http://www.somesite.com/somedir/somefile.htm это: /somedir/somefile.htm.

 Документация можно посмотреть тут: http://tinymce.moxiecode.com/

Я вообще тут кратко это всё описал и на конкретном примере...