Веб-разработка / текстовый редактор + загрузчик файлов + файловый менеджер

в 22:16, , рубрики: codeigniter, текстовый редактор, файловый менеджер, метки: , ,

Прикручиваем текстовый редактор к сайту

Я взял за основу 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


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js