Прикручиваем текстовый редактор к сайту
Я взял за основу tinymce, но можно использовать и любой другой. Этот интересен тем, что распространяется бесплатно и возможностей у него полный чемодан. Есть все, что может понадобится самому капризному пользователю. Но есть и два существенных недостатка: в базовой (бесплатной) комплектации нет загрузчика картинок и файлов, и нет файлового менеджера. Но мы это легко исправим.
Первым делом качаем сам редактор с официального сайта tinymce.moxiecode.com
и распоковываем его в папку /tinymce/ в корне вашего сайта.
Второе — качаем плагин ImageManager и распоковываем его в папку с редактором: /tinymce/jscripts/tiny_mce/plugins/
Создаем папку для картинок
/upload/images/
и папку для файлов
/upload/files/
Поправляем пути в файле /tinymce/jscripts/tiny_mce/plugins/images/connector/php/config.php
Примерно так он должен выглядеть:
//Директория с изображениями (относительно корневой) define('DIR_IMAGES','/upload/images'); //Директория с файлами (относительно корневой) define('DIR_FILES','/upload/files');
Внутри тега <head> вашей страницы втавьте этот код:
<script type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "advanced", skin : "o2k7", // В этой строке объявляется наш файловый менеджер и загрузчик файлов "images" plugins : "images,advimage,preview", // В этой строке выводим иконку нашего плагина "images" theme_advanced_buttons1 : "bold,italic,underline,formatselect,fontselect,fontsizeselect,|,undo,redo,|,link,|,"+ "image,images,|,forecolor,|,code,|,preview,", theme_advanced_buttons2 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, content_css : "css/word.css", template_external_list_url : "lists/template_list.js", external_link_list_url : "lists/link_list.js", external_image_list_url : "lists/image_list.js", media_external_list_url : "lists/media_list.js", template_replace_values : { username : "Some User", staffid : "991234" } }); </script>
Обратите внимание на комментарии в коде. Они указывают на место подключения загрузчика файлов и файлового менеджера.
И последнее, используйте для текстового поля идентификатор elm1 и будет Вам счастье.
<textarea name="text" id="elm1"></textarea>
Если все сделано правильно, то должно получиться так: tinymce_demo
Автор: frentsel
