Чтобы не мелочиться прикрутим сразу два: FCKeditor и TinyMCE. И то и
другое занимает по времени не более 10-15 минут. Потом придется
затратить некоторое время, чтобы напильником заточить их под себя,
убрать все врожденные глюки и FCKeditor и TinyMCE и т.п. внимательно
прочитав их мануалы перед этим, но это отдельная тема.
По умолчанию оба редактора вполне работоспособны, на фоне прочих бесплатных WYSYWIG смотрятся очень хорошо и невзыскательного пользователя вполне устроят.
Устанавливаем FCKeditor
Идем на сайт FCKeditor и копируем оттуда последнюю версию редактора. Как прикручивать правильно, написано в мануале: Но мы прикрутим без мануалов. Создаем директорию fckeditor. Копируем туда fckeditor. Удаляем из этой и вложенной в нее директории лишнее - примеры, смайлики, ненужные файлы языковой поддержки, интерфейсы к ASP,PERL и т.д., php-файлы из корневой директории. В результате сокращаем вдвое объем библиотеки.
Дорабатываем вьюер для добавления записей Вашей CMS допустим это add.php - сразу за textarea для ввода записи пишем js-код для вызова FCKeditor
<div><textarea name="body" id="body" rows="10" cols="40">Comment</textarea></div>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
var oFCKeditor = new FCKeditor("body"); // привязка к textarea с id="body"
oFCKeditor.ToolbarSet="Basic"; // число кнопочек на инструментальной панели (полная Default)
oFCKeditor.BasePath="fckeditor/"; //путь к fckeditor
oFCKeditor.ReplaceTextarea(); // вставка текста из textarea с id="body"
</script>
<div class="submit"> <input type="submit" value="Submit" /></div>
На этом миимальная установка может считаться законченной. Все, коме отдельных плагинов, в которых возможно и нет никакой необходимости, должно работать. Проверяем результат, вызвав в броузере: add.php
Устанавливаем TinyMCE
Идем на сайт tinymce и копируем оттуда последнюю версию редактора. В архиве куча файлов примеров, документации и т.п. Из всего этого для работы нужна только директория tinymce/jscripts/tiny_mce. Вот ее tiny_mce копируем в нужную директорию
дописываем в начало нашего админочного php вот такой код (между <head> и </head>):
<script language="javascript" type="text/javascript" src="../tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
language : "ru_CP1251",
document_base_url : "add.php", convert_urls : false
});
</script>
Проверяем результат, вызвав в броузере: add
Немного о FCKeditor:
FCKeditor не вполне кроссброузерный - для IE он использует родную IE-библиотеку, для прочих броузеров - "кроссброузерную". За счет этого намного быстрее других работает в IE и это особенно заметно при работе с большими текстами. В FireFox степень его глючности и тормознутости точно такая же как и у прочих халявных WYSIWYG. (Имхо) В Opera он вообще не работает, ну и хрен с ней с Оперой.
FCKeditor не обрушивает сложные (с rowspan и colspan) таблицы импортированные из MS Word (Кажется из бесплатных это умеет только редактор встроенный в Joomla).
FCKeditor умеет по-человечески вставлять картинки, без подгрузки дополнительных сторонних плагинов.
Естественно FCKeditor без недостатков (а у кого их нет?). Но из наиболее заметных:
Как-то странно работает отмена исправлений (откат CTRL+Z). И похоже, что это неисправимо в текущей версии..
Норовит добавить лишние строки. Но этим грешит не только FCKeditor. У остальных тоже такая Но можно подпилить код.
О первичной настройке FCKeditor:
Уберем лишние функции с панели инструментов, для этого откроем конфигурационный файл fckeditor/fckconfig.js,
Находим строку FCKConfig.ToolbarSets["Default"] = ...
Редактируем ее, не забыв сохранить на всякий случай ее копию. Я обычно оставляю следующее:
FCKConfig.ToolbarSets["Default"] = [
['FitWindow','Source','PasteWord','RemoveFormat'], ['Textarea'], ['Style','FontFormat'],'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Table'],
] ;
Переопределяем дефолтные CSS-стили в листбоксе. Для этого редактируется файл fckeditor/fckstyles.xml, который отвечает за листбокс на панели инструментов и fckeditor/css/fck_editorarea.css, отвечающий за отображение стилей в окне редактирования
Настраиваем функцию загрузки картинок в текст (из-за чего и был выбран FCKeditor)
- Открываем файл fckeditor/editor/filemanager/upload/php/config.php
Находим строчку
$Config['Enabled'] = false ;
заменяем ее на
$Config['Enabled'] = true ;
там же правим путь к директории, в которой хранятся картинки. Я храню картинки в директории /img/
нахожу и заменяю строку
$Config['UserFilesPath'] = '/userfiles/' ;
на
$Config['UserFilesPath'] = '/img/' ;
Открываем файл fckeditor/fckconfig.js
Находим и меняем строки
var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php
на
var _FileBrowserLanguage = 'php' ;
var _QuickUploadLanguage = 'php' ;
Там же проконтролируем наличие строки:
FCKConfig.ImageUpload = true ;
Подумайте о безопасности.
Функция Upload не закрыта авторизацией. Поэтому на сайт можно выложить без всякой авторизации что угодно. От вирусов до порно. Чтобы немного обезопаситься можно переименовать директорию FCKeditor во что-то менее стандартное. Для большей безопасности нужно прикрутить авторизацию к Upload и запрет записи в директорию /img/ вне режима добавлеения записей администратором.
По материалам сайта: http://erum.ru/
 Добавить в любимые (501) | Просмотров: 15847 | Версия для печати
Только зарегистрированные пользователи могут оставлять коментарии.
Пожалуйста зарегистрируйтесь или войдите в ваш аккаунт. |
