GetSimple CMS Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
 \\
======Файлы конфигурации редактора======
Редактор **CKEditor**, включаемый в состав **GetSimple**, поставляется с файлом конфигурации по умолчанию и файлом стилей по умолчанию. У пользователей есть возможность создавать собственный конфигурационный файл, который не будет переписываться при очередном обновлении системы, для определения настроек редактора, которые отсутствуют в его усеченной версии для GS.

===== Стандартный файл конфигурации =====

Стандартный файл конфигурации редактора, идущий с пакетом **GetSimple**, располагается в папке ''Корневой_каталог_системы/admin/template/js/ckeditor'' и практически пуст:

Он содержит всего 2 опции:
<code>CKEDITOR.editorConfig = function( config )
{
	// Определяйте изменения конфигурации по умолчанию здесь. Например:
	config.removePlugins = 'elementspath,resize' ; // не показывать путь к элементу, запретить изменение размера
	config.toolbarCanCollapse = false; //скрыть кнопку сворачивания панели инструментов
};</code>

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

===== Пользовательский файл конфигурации =====

Преимуществом редактора CKEditor является возможность определения собственного конфигурационного файла или файла пользовательских настроек. Казалось бы, зачем вообще нужен такой файл? Вы уже убедились, что значительное количество параметров CKEditor определяется в файле настроек системы GetSimple ''gsconfig.php''.

Для создания собственных настроек есть несколько причин:
  * Вам необходимо добавить большое количество опций и вам по какой-то причине удобнее сделать это в файле ''config.js'', а не в ''gsconfig.php''
  * Вы хотите не только определить настройки редактора, но и , например, управлять поведением диалоговых окон
  * Вы хотите изменить автоматическое форматирование текста редактором по умолчанию
  * …

Процесс создания файла пользовательской конфигурации достаточно прост. Файл ''config.js'' представляет собой обычный javascript-файл.

  * Возьмите файл ''config.js'', который поставляется с GetSimple, переименуйте его и сохраните в папке ''data'' или ''theme''.
  * Отредактируйте его и загрузите на сервер в соответствующую папку, проверьте права доступа (файл должен быть доступен на чтение);
  * Пропишите наименование и путь к вашему файлу конфигурации редактора в файле ''gsconfig.php'' в параметре GSEDITOROPTIONS.

Пример: 
<code>define('GSEDITOROPTIONS', "entities : false,customConfig : '../../../../theme/папка_вашей_темы/yourconfigfile.js',skin: 'v2'
");</code>

Эта инструкция определяет, что пользовательский файл конфигурации редактора с именем ''yourconfigfile.js'' расположен в папке с вашей активной темой ''папка_вашей_темы''.

Еще пример: 
<code>define('GSEDITOROPTIONS', "entities : false,customConfig : '../../../../data/editorconfig/yourconfigfile.js',skin: 'v2'
");</code>

Для данного случая необходимо создать папку ''editorconfig'' в папке ''data'' и загрузить файл конфигурации в эту папку. Проверьте, не запрещен ли доступ к js-файлам в папке ''data'' в соответствующем ''.htaccess'' файле. 

=== Пример файла пользовательской конфигурации CKEditor: ===
<code>/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config )
{
	// Определяйте изменения настроек редактора по умолчанию здесь. Например:
	config.toolbarCanCollapse = true,
	config.enterMode = CKEDITOR.ENTER_P,
	config.shiftEnterMode = CKEDITOR.ENTER_BR,
	config.colorButton_enableMore = true,
  	config.bodyId = 'content',
	config.entities = false,
	config.forceSimpleAmpersand = false,
	config.fontSize_defaultLabel = '12px',
	config.font_defaultLabel = 'Arial',
	config.emailProtection = 'encode',
	config.contentsLangDirection = 'ltr',
	config.language = 'en',
	config.contentsLanguage = 'en',
	config.toolbarLocation = 'top',
	config.browserContextMenuOnCtrl = false,
	config.image_previewText = CKEDITOR.tools.repeat('Get-Simple - the best CMS for your purposes. Install it, test it, enjoy it. Free, OpenSource and userfriendly', 50 )
		};
// из  http://help.pixelandtonic.com/brandonkelly/topics/how_do_i_set_output_formatting_writer_rules?from_gsfn=true 
CKEDITOR.on( 'instanceReady', function( ev ) {

var blockTags = ['div','h1','h2','h3','h4','h5','h6','p','pre','ul','li'];
var rules = {
indent : false,
breakBeforeOpen : false,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : true
};

for (var i=0; i<blockTags.length; i++) {
ev.editor.dataProcessor.writer.setRules( blockTags[i], rules );
}

});

// из  http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Dialog_Customization

CKEDITOR.on( 'dialogDefinition', function( ev )
	{
		// Берем наименование диалога и его определение из данных события.
		var dialogName = ev.data.name;
		var dialogDefinition = ev.data.definition;
 
		// Проверяем, тот ли это диалог, который нас интересует.
		 
		if ( dialogName == 'link' )
		{
			/* Включаем эту часть только если вы не убираете вкладку 'target' в предыдущем блоке.  */
 			FCKConfig.DefaultLinkTarget = '_blank'
			// Получаем ссылку на вкладку "Target".
			var targetTab = dialogDefinition.getContents( 'target' );
			var targetField = targetTab.get( 'linkTargetType' );
			targetField[ 'default' ] = '';
			linkField[ 'default' ] = 'URL';

		} //  окончание для dialogDefinition
 
		if ( dialogName == 'image' )
		{
		 dialogDefinition.removeContents( 'advanced' );
		dialogDefinition.removeContents( 'Link' );
		}
 
		if ( dialogName == 'flash' )
		{
					dialogDefinition.removeContents( 'advanced' );
		}
 
	});</code>




===== Стандартный файл стилей =====
{{ :how_to:ckeditorstylecombo.jpg}}

Пользователи как правило, не очень охотно используют стили по умолчанию, которые доступны в выпадающем списке стилей редактора. Они хотят иметь выбор.

По умолчанию, стилевой  файл редактора, определяющий содержимое выпадающего списка стилей, носит имя //default.js//  и располагается по этому пути: ''Корневой_каталог_GetSimple /admin/template/js/ckeditor/plugins/styles/styles/default.js'' 

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

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

===== Пользовательские стили =====

Краткое описание шагов для применения пользовательского стиля в редакторе.

  - Скачайте несжатый файл стилей [[http://svn.ckeditor.com/CKEditor/trunk/_source/plugins/styles/styles/default.js| с домашней страницы CKEditor]]
  - Переименуйте файл как вам угодно и загрузите его в безопасное место на сервер, например, в папку data или theme
  - Отредактируйте соответствующим образом файл ''gsconfig.php'' и перезагрузите его на сервер. 

Теперь обсудим эти шаги более подробно: 

  * Нам потребуется дополнительная (advanced) панель инструментов редактора, на которой расположен выпадающий список стилей. Активируйте ее в файле gsconfig.php , если вы еще этого не сделали.\\
<code>define('GSEDITORTOOL', 'advanced');</code>
  * добавьте новый файл стиля в параметр GSEDITOROPTIONS файла gsconfig.php\\

<code>define('GSEDITOROPTIONS',"stylesSet: 'default:http://www.yourdomain.de/getsimple-root/themes/ckeditorstyles.js'");</code>


Now with more details:
  * you need the advanced editor-toolbar to use the styles-combo-box. If you have not done yet, activate that toolbar.\\ <code>define('GSEDITORTOOL', 'advanced');</code>
  * add the stylesheet-definition to the Editor-Options:\\ 
<code>define('GSEDITOROPTIONS',"stylesSet: 'default:http://www.yourdomain.de/getsimple-root/themes/ckeditorstyles.js'");</code>
 
Теперь – что именно требуется редактировать в этом файле?

Таблица стилей CKEditor содержит следующие стилевые правила:
  * Block-Styles (already defined, but can be overwritten)
  * Inline-Styles
  * Object-Styles

Define the category for the element you want to add here and edit the file at the relevant place.
The syntax:
<code>	{ name : 'Computer Code', element : 'code' },</code>

or
<code>{ name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } },</code>

or even
<code>{
		name : 'Image on Left',
		element : 'img',
		attributes :
		{
			'style' : 'padding: 5px; margin-right: 5px',
			'border' : '2',
			'align' : 'left'
		}
	},</code>

One definition must contain at least 2 parameters: ''name'' and ''element''. 
You are free to set the ''name'' to whatever you want. ''element'' stands for the HTML-element which will be added to the HTML-Output, when you mark some text in the editor and activate this style.

So with these definitions you can add often used formats with an explanatory name to the dropdown-list (and you can delete those which only annoy and are never used).

If you want to add **HTML-attributes** to the elements in the style-combo, you need the third parameter ''attributs''
e.g.
<code>{ name : 'Tablecell top', element : 'td', attributes : { 'valign' : 'top' } },</code>

for **CSS-styles**, you use the parameter ''styles''. E.g.

<code>{ name : 'Red table', element : 'table', styles : { 'background-color':'red' } },</code>
 \\
===== HTML or XHTML output ? =====
CKEditor by default wraps the content using XHTML tags (every tag has to be enclosed), and in such way formats it. \\
To get rid of / in closing tags (to achieve for example **'' <br> ''** [HTML] instead of **'' <br /> ''** [XHTML]) upon saving page , \\
you need to edit CKE's '' config.js '' file located in '' admin/template/js/ckeditor/ '' , and add below code:

<code>
CKEDITOR.on( 'instanceReady', function( ev )
    {
        ev.editor.dataProcessor.writer.selfClosingEnd = '>';
    });
</code>
GetSimple CMS Wiki

User Tools

Site Tools

Page Tools
