Наши заметки о MODx
В этом разделе мы будем собирать небольшую копилку секретов по работе с системой управления контентом сайта (CMS) MODx. Эти заметки ни в коем случае не претендуют на лавры документации. На нашем сайте тема MODx вообще занимает небольшой уголок, и эти материалы мы размещаем только потому, что по роду основной работы нам приходится оказывать техническую поддержку нескольким десяткам организаций, использующих наши прототипы сайтов. В то же время кое-что может пригодиться и другим людям.
Мы не претендуем на изложение "истины в последней инстанции". Наверняка в этих заметках гуру MODx найдут неточности и ошибки. Мы будем очень благодарны, если на это нам укажут в комментариях.
В заметках мы стараемся не просто сразу приводить готовое правильное решение, но и показываем, как мы набивали шишки в процессе поиска.

В этот раздел мы перенесли статьи, потерявшие актуальность. В основном это связано с появлением новых версий элементов системы, обнаружением более рациональных решений, а также с подготовкой более подробной документации по MODx.

Как настроить FCKEditor в CMS Etomite


Это наша старая заметка о настройке FCKEditor в CMS Etomite. Написана она давно, по версии редактора 2.1.1 (а сейчас уже 2.6.4 появилась). Конечно, за несколько лет и в самом редакторе кое-то изменилось, но принцип настроек остался прежний. Публикуем эту заметку для памяти, да и с Etomite мы еще не окончательно съехали.

Вообще-то FCKEditor предназначен для встраивания куда угодно, обычно в различные системы управления контентом. Свежую версию всегда можно взять на сайте http://www.fckeditor.net/

Текстовый редактор FCKeditor удобнее и шустрее стандартных редакторов, встроенных в Etomite, и используется во многих CMS.
Этот редактор предназначен для встраивания "куда угодно", но предполагает свое размещение в корне сервера и для встаивания его в Etomite требуются дополнительные усилия. К сожалению, нельзя просто откорректировать конфигурационный файл, а приходится залезать в различные интимные места как редактора, так и Etomite.
 

Шаг1. Загрузка

 

Сначала нужно скачать FCKeditor. Лучше всего зайти на http://www.fckeditor.net/. На сайте всегда показана текущая версия редактора в правом верхнем углу:

Сайт FCKEditor

Сайт FCKEditor

Надо пройти по ссылкам для скачивания. Внимание - не следует скачивать версию для 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?Connector=connectors/asp/connector.asp' ; 

Раскомментируем строку 
// PHP // FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=connectors/php/connector.php' ; 
и изменим ее на 

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/asp/connector.asp' ; 

//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' ; 

и изменим ее на 

FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=images&Connector=connectors/php/connector.php' ; 

Обратите внимание - Type=Image изменено на Type=images!

Закомментируем строки 

//FCKConfig.ContextMenu = ['Generic', 'Link', 'Anchor','Image', 'Flash','Select','Textarea', 'Checkbox','Radio','TextField','HiddenField','ImageButton', 'Button','BulletedList','NumberedList', 'TableCell','Table','Form'] ; 

Перепишем ее, чтобы убрать ненужные пункты из контекстного меню 

FCKConfig.ContextMenu = ['Link','Image','BulletedList','NumberedList'] ;
 

Шаг 4. Редактирование fckeditor.php

  
Изменяем в функции FCKeditor BasePath,  Height и ToolbarSet в файле fckeditor.php

function FCKeditor( $instanceName ) 

$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', как показано: 

Было:

var aTypes = [ 
['File','File'], 
['Image','Image'], 
['Flash','Flash'], 
['Media','Media'] 
] ; 

Нужно:

var aTypes = [ 
['files','files'], 
['images','images'], 
['Flash','Flash'], 
['Media','Media'] 
] ; 

 

Мы изменили типы обзоров для файлового менеджера редактора FCKeditor. При редактировании файла fckconfig.jsp мы указали

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', как показано: 

Заменяем 

if ( !in_array( $sResourceType, array('File','Image','Flash','Media') ) ) 
return ; 

на 

if ( !in_array( $sResourceType, array('files','images','Flash','Media') ) ) 
return ;


Шаг 7. Редактирование файла manager/actions/dynamic/mutate_content.dynamic.action.php

 
 
Здесь мы уже влезаем в настройки самой Etomite! Добавляем FCKeditor в выбор конфигурации Etomite.
 

Ищем и изменяем строку 

if($which_editor==2) { 

на: 

# Start - FCKeditor 
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!
 
Нужно разыскать строку: 

<option value="2" <?php echo $which_editor==2 ? "selected='selected'" : "" ;?>>HTMLArea</option> 

и добавить после нее строку: 

<option value="3" <?php echo $which_editor==3 ? "selected='selected'" : "" ;?>>FCKeditor</option>


Но в версиях EtoMite, которые мы рассматриваем, такая строка уже включена. Видимо, "навырост".

Шаг 9.Редактированиеc файла manager\media\fckeditor\editor\filemanager\browser\default\connectors\php\config.php

Делаем доступным браузер
$Config['Enabled'] = true ;
Комментируем строку

// Path to user files relative to the document root. 
//$Config['UserFilesPath'] = '/UserFiles/' ; 
и пишем новую:
$Config['UserFilesPath'] = '/assets/'; 

Закомментируем это:
//$Config['UserFilesAbsolutePath'] = '' ;

И напишем это:
$Config['UserFilesAbsolutePath'] = $_SERVER["DOCUMENT_ROOT"].$Config['UserFilesPath'] ; 

Внесем изменения здесь:
$Config['AllowedExtensions']['files'] = array('zip','rar','pdf','dwg','lsp') ; 
$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['Enabled'] = true ; 

// Path to uploaded files relative to the document root. 
//$Config['UserFilesPath'] = '/UserFiles/' ; 
$Config['UserFilesPath'] = 'assets/' ; 

$Config['AllowedExtensions']['files'] = array() ; 
$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

от старой версии, но потом ошибка нашлась.

function OpenServerBrowser( type, url, width, height ) 

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 нет никакого смысла устанавливать его из дистрибутива.
 
Для других сайтов мы просто включаем его в свой инсталляционный комплект Etomite. В этом случае после настройки самой Etomite нужно выполнить настройку FCKEditor.
 
Но ее и не требуется, так как мы внесли изменения, позволяющие работать редактору в любом месте.
 
Единственным узким местом  является весьма желательная настройка редактора на использование таблицы стилей нашего сайта и на отображение в списке стилей редактора нашего списка стилей.
 

Стили в FCKeditor

 
Если уж мы используем визуальный редактор, то хотелось бы, чтобы редактируемое содержимое отображалось именно так, как оно будет отображаться на сайте.
 
Кроме того, в редакторе имеется выпадающий список стилей. Хочется, чтобы в этом списке были именно наши стили.
 
Эти пожелания можно реализовать в FCKeditor.

Чтобы использовать нашу таблицу стилей (допустим, ее имя site.css) можно скопировать ее в каталог 

manager/media/fckeditor/editor/css/site.css 

и переопределить переменную в fckcongig.jsp 
 
//FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/site.css' ;

Но это не очень хороший путь, так как нам придется постоянно синхронизировать рабочий файл с его копией для редактора.

Лучше просто сослаться на рабочий файл таблицы.
 
FCKConfig.EditorAreaCSS = 'http://yourdomain.ru/templates/css/site.css' ;

В этом случае мы привязаны к конкретному домену, и это не очень хорошо.
 
Можно указать относительный путь. 

FCKConfig.EditorAreaCSS = document.location.protocol + '//' + document.location.host + '/templates/css/site.css';

Вот это лучше всего. Мы теперь не привязаны к доменному имени. Необходимо только всегда именовать файл таблицы стилей site.css, размещать его в постоянном месте и настройки FCKeditor можно не менять.


 

Отображение тега body

 
В FCKeditor при подключении таблицы стилей  (впрочем, как и с другими встроенными редакторами) может наблюдаться небольшая неприятность. 

На нашем сайте для элемента body задан цвет фона 
 
background-color: #D3D3D3;

Это сделано для выделения страницы на общем фоне. Сама страница заключена в другой элемент, создающий основной цвет для содержимого. Но редактор об этом не знает, он просто окружает свое редактируемое содержание тегом body. В этом случае придется сделать дополнительный класс с фоном для своих страниц.

Например, определим класс 

.bkgrnd { 
background-color: #D3D3D3; 

а в элементе шаблона укажем
 
<body class="bkgrnd">

В описании элемента body фоновый цвет мы вообще удалим.
 

Список стилей

В FCKeditor имеется выпадающий список Стиль, из которого можно выбрать несколько предопределенных стилей. И это хорошо, так как вообще лучше не применять (или применять в исключительных случаях) "чисто конкретное" форматирование текста (цвет, шрифт и прочее). Все это должно наследоваться из таблицы стилей, а применять нужно именно стиль. 

Стандартные стили FCKeditor описаны в файле 

managermediafckeditorfckstyles.xml 

<Styles> 
<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> 

Но мы уже подключили собственную таблицу стилей и желательно иметь выпадающий список именно с нашими стилями. Разработаем описание наших стилей для списка.
 
Хотя в нашем css-файле может быть много классов и идентификаторов, для списка мы оставим только те, которые могут применяться для содержимого страницы - в CMS редактор используется только для редактирования тега [ *content* ]. 

Для начала переопределим в fckcongig.js 

FCKConfig.StylesXmlPath = '../fckstyles.xml' ; 

на 

FCKConfig.StylesXmlPath = '../site_name_styles.xml' ; 

скопируем прототип из fckstyles.xml в site_name_styles.xml и отредактируем этот файл. 

В него мы также скопируем имена наших классов, которые могут применяться для текста, например: 
  • h1
  • h2
  • h3
  • h4
  • right
  • top_border
  • border
  • alert 
  • smallText
  • mono
  • code
  • code_comment

  • и отредактируем:
<Styles> 
<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> 

После перезагрузки менеджера мы будем иметь свой список стилей

Теперь в нем отображаются наши имена стилей, причем так, как они и должны выглядеть.

Чтобы приучить редакторов пользоваться стилями, мы теперь вообще можем убрать из панели инструментов кнопки для "ненужного" форматирования. Только стили!
 
Итак, это последняя настройка редактора под наш сайт.

Замечание.
Изменения в таблице и списке стилей  не сразу сказываются на редакторе, так как происходит какое-то глубокое кэширование. Возможно придется перезагрузить менеджер или вообще браузер.

В результате всех описанных мучений FCKeditor должен выполнять следующие действия: 

1. Загружаться сам при редактировании документа. Признаком правильной загрузки должно быть наличие тулбаров заданной комплектации. 

2. В списке стилей должны отображаться заданные стили, причем в виде, установленном в заданной таблице стилей. 

3. Редактируемая страница должна отображаться заданными стилями. 

4. При вставке изображения и щелчке по кнопке Просмотреть на сервере должно открываться окно для обзора каталога assets и его подкаталогов. URL риснков, выбранных в этом окне должен иметь вид 
 
/assets/images/xxxxx.jpg 

5. Вставленные рисунки должны отображаться и в редакторе и при просмотре сайта.
 
Если что-то из перечисленного выполняется не так, как надо, внимательно просмотрите свою конфигурацию. Возможно, придется учесть особенности размещения файлов на хостинге.
 
Для подключения FCKeditor к самой CMS Etomite нам пришлось выполнить только действия, указанные в шагах 7 и 8. Это не так уж много. Всё остальное относится к приспосабливанию самого FCKeditor и его файлового менеджера к особенностям Etomite.


18-01-2009 14:43:45



    Содержание раздела «Настройки FCKEditor в Etomite»:
Комментарии любых посетителей

Написать комментарий


 
Комментарии с 1 по 10 из 16 | Пред | Начало
джaн
Комментарий
Занятно
Реплика №16: 29.10.2009, 15:54:24
Хм... Читаю и понимаю, что не фига не понимаю о чем речь:)
Федор Малкин
Комментарий
Любопытно
Реплика №15: 28.10.2009, 00:03:25
Радует, что блог постоянно развивается. Подобные посты только прибавляют вам популярности.
ShaggyDoc
Комментарий
Личный опыт?
Реплика №14: 25.09.2009, 22:22:48
Конечно, не "исключительно". Сначала документацию читал, всякие советы. Потом приходилось разбираться с новыми версиями FCKeditor - в них бывали новинки. Потом записал это всё для себя - чтоб не забывалось. По возможности разжевывая все детали. Впрочем, это всё, возможно, устарело - уже несколько новых версий FCK вышло, да и я больше не занимаюсь Etomite.
Глеб Рубин
Комментарий
Познавательно
Реплика №13: 25.09.2009, 21:28:54
А это Вы написали на основе исключительно Вашего личного опыта?
ShaggyDoc
Комментарий
Re: Как настроить FCKEditor в CMS Etomite
Реплика №12: 16.09.2009, 20:32:24
Читаю, читаю.
А что, я "огрызаться" должен?
Вячеслав Сенников
Комментарий
Увлекательно
Реплика №11: 16.09.2009, 16:52:19
А вот интересно, а сам автор читает комментарии к этому сообщению. Или мы тут сами для себя пишем? :)
Xray
Комментарий
Интересно
Реплика №10: 22.08.2009, 10:32:17
Прикольно было почитать :) Попробуем-с тоже ответить в ближайших постах.
любoвбeзcлoв
Комментарий
Действительно интересно
Реплика №9: 21.08.2009, 20:04:55
Конечно же присоединяюсь к вышесказанному!
Даниил Попов
Комментарий
Отлично
Реплика №8: 17.08.2009, 19:36:29
Благодарю за возможность оставлять комментарии на этой странице!
Виталий
Комментарий
Жесть
Реплика №7: 14.08.2009, 06:19:19
Очень признателен, реально полезная информация.
Комментарии с 1 по 10 из 16 | Пред | Начало