Для web-Мастеров /Прикрепляем правильно визуальный редактор на сайт/ |
Мне уже не один раз сказали, что у меня талант препода, хотя я его вроде как не замечаю, может потому что он со мной всегда). Что-то меня сподвигло написать небольшую, возможно баянистую инструкцию кое-какой примочки для сайта. Эта информация скорее всего принесёт хоть какую-то пользу начинающим вэбмастерам, ну и кому просто так интересно.
Уровень знаний - 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. Собственно всё, осталось только разобрать что к чему.
tinyMCE.init({
...
mode : "exact",
elements : "elm1,elm2"
});
...
<textarea id="elm1" ..
Документация можно посмотреть тут: http://tinymce.moxiecode.com/
Я вообще тут кратко это всё описал и на конкретном примере...
| Рубрики: | Программирование Обзор web скриптов и программного обеспечения IT проблемы и их решения |
| Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |
