Вообще-то FCKEditor предназначен для встраивания куда угодно, обычно в различные системы управления контентом. Свежую версию всегда можно взять на сайте http://www.fckeditor.net/.
Шаг1. Загрузка
Сначала нужно скачать FCKeditor. Лучше всего зайти на http://www.fckeditor.net/. На сайте всегда показана текущая версия редактора в правом верхнем углу:
Надо пройти по ссылкам для скачивания. Внимание - не следует скачивать версию для Java Servlet Pages (JSP)!
Все дальнейшие инструкции на этой странице касаются FCKeditor версии 2.1.1 и CMS Etomite. Установка более поздних версий может быть немного отличаться.
Шаг2. Распаковка
Распаковать архив в каталог сайта /manager/media/fckeditor.
В подкаталоге fckeditor должны быть файлы и каталоги:
- _samples
- _testcases
- editor
- fckeditor.asp
- fckeditor.cfc
- fckeditor.cfm
- fckconfig.js
- fckeditor.js
- fckeditor.php
- fckeditor.pl
- license.txt
- fckstyles.xml
Часть файлов потом можно будет удалить - они не нужны для работы с PHP.
Шаг 3. Редактирование файла fckconfig.js
Редактирование файла fckconfig.js придется выполнять несколько раз. Сначала выполним грубую настройку. Закомментируем строку
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=files&Connector=connectors/php/connector.php' ;
Об аргументе Type=files поясним ниже.
Закомментируем строки
//FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=connectors/aspx/connector.aspx' ;
// PHP // FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=connectors/php/connector.php' ;
Закомментируем строки
Перепишем ее, чтобы убрать ненужные пункты из контекстного меню
Шаг 4. Редактирование fckeditor.php
Изменяем в функции FCKeditor BasePath, Height и ToolbarSet в файле fckeditor.php:
{
$this->InstanceName = $instanceName ;
$this->BasePath = 'media/fckeditor/' ;
$this->Width = '100%' ;
$this->Height = '600' ;
$this->ToolbarSet = 'Short'; //'Default' ;
$this->Value = '' ;
$this->Config = array() ;
}
Шаг 5. Редактирование файла 'editor/filemanager/browser/default/frmresourcetype.html'
Изменяем 'var aTypes', как показано:
Было:
['File','File'],
['Image','Image'],
['Flash','Flash'],
['Media','Media']
] ;
Нужно:
['files','files'],
['images','images'],
['Flash','Flash'],
['Media','Media']
] ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=files&Connector=connectors/php/connector.php;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=images&Connector=connectors/php/connector.php' ;
Мы дали директиву FCK-editor для начала обзора ссылок на файлы нашего сайта с подкаталога files, а начала обзора ссылок на картинки нашего сайта с подкаталога images. Type=files и Type=images как раз и используют типы, указанные в var aTypes.
Если бы мы не изменили эти типы, мы должны были бы создавать каталоги assets/File и assets/Image, что противоречит концепции Etomite.
Шаг 6. Редактирование файла ' editor/filemanager/browser/default/connectors/php/connector.php'
Изменяем массив '$sResourceType', как показано:
Заменяем
return ;
на
return ;
Шаг 7. Редактирование файла manager/actions/dynamic/mutate_content.dynamic.action.php
Ищем и изменяем строку
на:
if($which_editor==3) {
# Локальный сайт
include($_SERVER["DOCUMENT_ROOT"]."/manager/media/fckeditor/fckeditor.php") ;
$sBasePath = "/manager/media/fckeditor/" ;
$oFCKeditor = new FCKeditor('ta') ;
$oFCKeditor->BasePath = $sBasePath ;
$oFCKeditor->Value = $content['content'];
$oFCKeditor->Create() ;
# End - FCKeditor
} elseif($which_editor==2) {
Шаг 8. Редактирование файла manager/actions/dynamic/mutate_settings.dynamic.action.php
и добавить после нее строку:
Но в версиях EtoMite, которые мы рассматриваем, такая строка уже включена. Видимо, "навырост".
Шаг 9.Редактированиеc файла manager\media\fckeditor\editor\filemanager\browser\default\connectors\php\config.php
// Path to user files relative to the document root.
//$Config['UserFilesPath'] = '/UserFiles/' ;
Закомментируем это:
И напишем это:
Внесем изменения здесь:
$Config['DeniedExtensions']['files'] = array('php','php3','php5','phtml','asp', 'aspx','ascx','jsp','cfm', 'cfc','pl','bat','exe','dll','reg','cgi') ;
$Config['AllowedExtensions']['images'] = array('jpg','gif','jpeg','png') ;
$Config['DeniedExtensions']['images'] = array() ;
Шаг 10. Редактируем manager\media\fckeditor\editor\filemanager\upload\php\config.php
//$Config['UserFilesPath'] = '/UserFiles/' ;
$Config['UserFilesPath'] = 'assets/' ;
$Config['DeniedExtensions']['files'] = array('php','php3','php5','phtml','asp','aspx','ascx', 'jsp','cfm', 'cfc','pl','bat','exe','dll','reg','cgi') ;
$Config['AllowedExtensions']['images'] = array('jpg','gif','jpeg','png') ;
$Config['DeniedExtensions']['images'] = array() ;
Шаг 11. Исправление найденных ошибок
Недоступность окна просмотра папок
В FCKeditor 2.1.1 обнаружено:При вставке ссылок и рисунков по BrowseServer окно просмотра открывается, но диалог вставки не прячется. В результате выбор файла недоступен.
Пришлось временно, до выявления ошибки, поставить
manager/media/fckeditor/editor/dialog/fck_image/fck_image.js
от старой версии, но потом ошибка нашлась.
{
sActualBrowser = type ;
var iLeft = (FCKConfig.ScreenWidth - width) / 2 ;
var iTop = (FCKConfig.ScreenHeight - height) / 2 ;
var sOptions = "toolbar=no,status=no,resizable=yes,dependent=yes" ;
sOptions += ",width=" + width ;
sOptions += ",height=" + height ;
sOptions += ",left=" + iLeft ;
sOptions += ",top=" + iTop ;
/*
if ( oEditor.FCKBrowserInfo.IsIE )
{
// The following change has been made otherwise IE will open the file
// browser on a different server session (on some cases):
// http://support.microsoft.com/default.aspx?scid=kb;en-us;831678
// by Simone Chiaretta.
var oWindow = oEditor.window.open( url, "FCKBrowseWindow", sOptions ) ;
oWindow.opener = window ;
}
else*/
window.open( url, "FCKBrowseWindow", sOptions ) ;
}
Стили в FCKeditor
Чтобы использовать нашу таблицу стилей (допустим, ее имя site.css) можно скопировать ее в каталог
manager/media/fckeditor/editor/css/site.css
и переопределить переменную в fckcongig.jsp
Но это не очень хороший путь, так как нам придется постоянно синхронизировать рабочий файл с его копией для редактора.
Лучше просто сослаться на рабочий файл таблицы.
В этом случае мы привязаны к конкретному домену, и это не очень хорошо.
Вот это лучше всего. Мы теперь не привязаны к доменному имени. Необходимо только всегда именовать файл таблицы стилей site.css, размещать его в постоянном месте и настройки FCKeditor можно не менять.
Отображение тега body
На нашем сайте для элемента body задан цвет фона
Это сделано для выделения страницы на общем фоне. Сама страница заключена в другой элемент, создающий основной цвет для содержимого. Но редактор об этом не знает, он просто окружает свое редактируемое содержание тегом body. В этом случае придется сделать дополнительный класс с фоном для своих страниц.
Например, определим класс
.bkgrnd {
background-color: #D3D3D3;
}
а в элементе шаблона укажем
В описании элемента body фоновый цвет мы вообще удалим.
Список стилей
Стандартные стили FCKeditor описаны в файле
managermediafckeditorfckstyles.xml
<Style name="Image on Left" element="img">
<Attribute name="style" value="padding: 5px; margin-right: 5px" />
<Attribute name="border" value="2" />
<Attribute name="align" value="left" />
</Style>
<Style name="Image on Right" element="img">
<Attribute name="style" value="padding: 5px; margin-left: 5px" />
<Attribute name="border" value="2" />
<Attribute name="align" value="right" />
</Style>
<Style name="Custom Bold" element="span">
<Attribute name="style" value="font-weight: bold;" />
</Style>
<Style name="Custom Italic" element="em" />
<Style name="Title" element="span">
<Attribute name="class" value="Title" />
</Style>
<Style name="Code" element="span">
<Attribute name="class" value="Code" />
</Style>
<Style name="Title H3" element="h3" />
<Style name="Custom Ruler" element="hr">
<Attribute name="size" value="1" />
<Attribute name="color" value="#ff0000" />
</Style>
</Styles>
Но мы уже подключили собственную таблицу стилей и желательно иметь выпадающий список именно с нашими стилями. Разработаем описание наших стилей для списка.
Для начала переопределим в fckcongig.js
на
скопируем прототип из fckstyles.xml в site_name_styles.xml и отредактируем этот файл.
В него мы также скопируем имена наших классов, которые могут применяться для текста, например:
- h1
- h2
- h3
- h4
- right
- top_border
- border
- alert
- smallText
- mono
- code
- code_comment
-
и отредактируем:
<Style name="H1" element="h1" />
<Style name="H2" element="h2" />
<Style name="H3" element="h3" />
<Style name="H4" element="h4" />
<Style name="Right" element="div">
<Attribute name="style" value="text-align : right;" />
</Style>
<Style name="Monospace" element="span">
<Attribute name="class" value="mono" />
</Style>
<Style name="Small Text" element="span">
<Attribute name="class" value="smallText" />
</Style>
<Style name="Light Text" element="span">
<Attribute name="class" value="light_text" />
</Style>
<Style name="Border" element="div">
<Attribute name="class" value="border" />
</Style>
<Style name="Alert" element="div">
<Attribute name="class" value="alert" />
</Style>
<Style name="Image-border" element="img">
<Attribute name="class" value="border" />
</Style>
<Style name="Code" element="div">
<Attribute name="class" value="code" />
</Style>
<Style name="Commemt" element="div">
<Attribute name="class" value="code_comment" />
</Style>
</Styles>
После перезагрузки менеджера мы будем иметь свой список стилей
Теперь в нем отображаются наши имена стилей, причем так, как они и должны выглядеть.
Чтобы приучить редакторов пользоваться стилями, мы теперь вообще можем убрать из панели инструментов кнопки для "ненужного" форматирования. Только стили!
Изменения в таблице и списке стилей не сразу сказываются на редакторе, так как происходит какое-то глубокое кэширование. Возможно придется перезагрузить менеджер или вообще браузер.
1. Загружаться сам при редактировании документа. Признаком правильной загрузки должно быть наличие тулбаров заданной комплектации.
2. В списке стилей должны отображаться заданные стили, причем в виде, установленном в заданной таблице стилей.
3. Редактируемая страница должна отображаться заданными стилями.
4. При вставке изображения и щелчке по кнопке Просмотреть на сервере должно открываться окно для обзора каталога assets и его подкаталогов. URL риснков, выбранных в этом окне должен иметь вид
5. Вставленные рисунки должны отображаться и в редакторе и при просмотре сайта.
Написать комментарий
Реплика №16: 29.10.2009, 15:54:24
Реплика №15: 28.10.2009, 00:03:25
Реплика №14: 25.09.2009, 22:22:48
Реплика №13: 25.09.2009, 21:28:54
Реплика №12: 16.09.2009, 20:32:24
Реплика №11: 16.09.2009, 16:52:19
Реплика №10: 22.08.2009, 10:32:17
Реплика №9: 21.08.2009, 20:04:55
Реплика №8: 17.08.2009, 19:36:29
Реплика №7: 14.08.2009, 06:19:19