Установка визуального редактора FCKeditor
Многие начинающие web разработчики в свою первую админку хотят прикрутить [bb] коды. В этой статье я расскажу, как проще всего прикрутить самый классный визуальный редактор.
Первое, что следует сделать – это скачать этот самый редактор с официальной странички. На всякий случай альтернатива на депозите. Кидаем разархивированную папку рядом с файлом, в котором мы будем использовать визуальный редактор.
Дальше смотрим наш файл, в котором мы хотим использовать визуальный редактор, а именно поле к которому нужно прикрутить редактор, сейчас оно имеет вид:
-
form name='myform' method='post' action='myform.php'>
-
label>Введите текст статьиbr>
-
textarea name="text" id="text" cols="50" rows="5">Я текст статьиtextarea>
-
label>
-
form>
Прикручиваем следующим образом, перед и после вставляем следующий код:
-
script type="text/javascript" src="fckeditor/fckeditor.js">script> // указываем путь к fckeditor.js
-
script type="text/javascript">
-
var oFCKeditor = new FCKeditor("text"); // привязываем к textarea с id="text"
-
oFCKeditor.ToolbarSet="Default"; // число кнопочек на панели (полная Default)
-
oFCKeditor.BasePath="fckeditor/"; //путь к fckeditor
-
oFCKeditor.ReplaceTextarea(); // вставка текста из textarea с id="text"
-
После чего сохраняем и проверяем, уже должно работать.
Количество кнопок, а так же высоту и ширину можно настроить. Количество кнопок настраивается в файле fckconfig.js, в нем ищем строчку: FCKConfig.ToolbarSets["Default"] . После этой строчки следуют названия кнопок, которые присутствуют на панели инструментов. По названию легко догадаться, например текст TextColor отвечает за кнопку выбор цвета для текста на панели визуального редактора.
Высоту и ширину можно регулировать в файле fckeditor.js, ищем там вот такие строчки в начале:
-
this.Width = width || '100%' ; //ширина
-
this.Height = height|| '500' ; // высота
-
this.ToolbarSet = toolbarSet || 'Default' ; // используемый набор кнопок
Теперь перейдем к настройке загрузки картинок. Самое вкусное в этом редакторе
- Открываем файл fckeditor/editor/filemanager/upload/php/config.php
Ищем строчку
$Config['Enabled'] = false ;
заменяем ее на
$Config['Enabled'] = true ;
там же правим путь к директории, в которой хранятся картинки. Я храню картинки в директории /img/
нахожу и заменяю строку
$Config['UserFilesPath'] = '/userfiles/' ;
на
$Config['UserFilesPath'] = '/img/' ;
Открываем файл system fckeditor/fckconfig.js. Находим и меняем строки:
Находим и меняем строки
-
var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
-
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | /admin/article/edit/9~nocache107442#~nocache800576lasso | php
на
-
var _FileBrowserLanguage = 'php' ;
-
var _QuickUploadLanguage = 'php' ;
Там же проконтролируем наличие строки:
FCKConfig.ImageUpload = true ;
Думаем о безопасности. Функция Upload не закрыта авторизацией. Поэтому загрузить можно, чего душе угодно. Чтобы обезопаситься себя от совсем неумех переименуйте директорию FCKeditor во что-то оригинальное.
Твитнуть
Комментарии
Отправить комментарий