This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
ru:how_to:editor_configuration_custom_files [2013/10/17 09:07] Arkady created |
ru:how_to:editor_configuration_custom_files [2013/10/17 09:21] (current) Arkady |
||
---|---|---|---|
Line 126: | Line 126: | ||
- | ===== Standard Stylesheet ===== | + | ===== Стандартный файл стилей ===== |
- | {{ :how_to:ckeditorstylecombo.jpg}}Very often, users do not want to use the styles which come by default in the style-combo-box. They want to have another choice. | + | {{ :how_to:ckeditorstylecombo.jpg}} |
- | By default, the stylesheet which defines the contents of the dropdown-list, is called ''default.js'' and is located in the folder ''yourGetSimpleRootDirectory/admin/template/js/ckeditor/plugins/styles/styles/default.js'' | + | Пользователи как правило, не очень охотно используют стили по умолчанию, которые доступны в выпадающем списке стилей редактора. Они хотят иметь выбор. |
- | You can edit this file, but as it is a compressed file, this will be no real pleasure, and, what is more important, this file will be overwritten with every upgrade. | + | По умолчанию, стилевой файл редактора, определяющий содержимое выпадающего списка стилей, носит имя //default.js// и располагается по этому пути: ''Корневой_каталог_GetSimple /admin/template/js/ckeditor/plugins/styles/styles/default.js'' |
- | So it is much more handy to define your own stylesheet-configuration and store it at a save location. | + | Этот файл можно редактировать, но он поставляется в сжатом формате, и процесс вряд ли доставит вам удовольствие. Но что еще более важно, этот файл будет переписываться сверху новым при каждом обновлении. |
+ | Поэтому значительно удобнее создать собственную конфигурацию и хранить ее в безопасном для обновлений месте. | ||
+ | ===== Пользовательские стили ===== | ||
+ | Краткое описание шагов для применения пользовательского стиля в редакторе. | ||
+ | - Скачайте несжатый файл стилей [[http://svn.ckeditor.com/CKEditor/trunk/_source/plugins/styles/styles/default.js| с домашней страницы CKEditor]] | ||
+ | - Переименуйте файл как вам угодно и загрузите его в безопасное место на сервер, например, в папку data или theme | ||
+ | - Отредактируйте соответствующим образом файл ''gsconfig.php'' и перезагрузите его на сервер. | ||
- | ===== Custom Stylesheet ===== | + | Теперь обсудим эти шаги более подробно: |
- | Here are the steps to install your custom stylesheet in short. | + | |
- | - get an umcompressed copy of the default stylesheet here from [[http://svn.ckeditor.com/CKEditor/trunk/_source/plugins/styles/styles/default.js| CKEditor's homepage]] | + | * Нам потребуется дополнительная (advanced) панель инструментов редактора, на которой расположен выпадающий список стилей. Активируйте ее в файле gsconfig.php , если вы еще этого не сделали.\\ |
- | - name this file whatever and upload it to a secure place, for example into the data- or the theme-folder | + | <code>define('GSEDITORTOOL', 'advanced');</code> |
- | - now edit the ''gsconfig.php'' and re-upload it to your server. | + | * добавьте новый файл стиля в параметр GSEDITOROPTIONS файла gsconfig.php\\ |
- | 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> | <code>define('GSEDITOROPTIONS',"stylesSet: 'default:http://www.yourdomain.de/getsimple-root/themes/ckeditorstyles.js'");</code> | ||
- | Now, what to edit in this file? | + | Теперь – что именно требуется редактировать в этом файле? |
- | The CKEditor-Styleset contains definitions for the following styles: | + | Таблица стилей 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> | <code> { name : 'Computer Code', element : 'code' },</code> | ||
- | or | + | или |
<code>{ name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } },</code> | <code>{ name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } },</code> | ||
- | or even | + | или так |
<code>{ | <code>{ | ||
name : 'Image on Left', | name : 'Image on Left', | ||
Line 176: | Line 180: | ||
},</code> | },</code> | ||
- | One definition must contain at least 2 parameters: ''name'' and ''element''. | + | Определение должно содержать как минимум два параметра: ''name'' (наименование) и ''element'' (элемент). Наименование (name) может быть абсолютно любым, но лучше – значимым. Element служит для указания HTML-тэга, подлежащего вставке в редактируемую разметку при выделении в окне редактора любого текста и активации этого стиля. |
- | 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). | + | Таким образом, у вас есть возможность дать часто используемому формату значимое имя, под которым он будет выведен в выпадающий список стилей (можно также удалить неиспользуемые форматы, которые зачастую только раздражают пользователя). |
+ | Если есть необходимость добавить к элементам **HTML-атрибуты**, потребуется третий параметр ''attributes'', например: | ||
- | 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> | <code>{ name : 'Tablecell top', element : 'td', attributes : { 'valign' : 'top' } },</code> | ||
- | for **CSS-styles**, you use the parameter ''styles''. E.g. | + | Для **CSS-стилей** применяется параметр ''styles'', например: |
<code>{ name : 'Red table', element : 'table', styles : { 'background-color':'red' } },</code> | <code>{ name : 'Red table', element : 'table', styles : { 'background-color':'red' } },</code> | ||
\\ | \\ | ||
- | ===== HTML or XHTML output ? ===== | + | ===== HTML или XHTML? ===== |
- | CKEditor by default wraps the content using XHTML tags (every tag has to be enclosed), and in such way formats it. \\ | + | По умолчанию CKEditor проставляет закрывающие тэги, следуя стандартам XHTML (каждый тэг должен быть закрыт), и соответствующим образом форматирует код. |
- | 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: | + | Для того, чтобы переключить поведение редактора на HTML-стандарт и не использовать косую черту в закрывающих тэгах (например, оставлять в документе тэг **<br>** (HTML) вместо **<br/>** (XHTML) при сохранении страницы), необходимо отредактировать файл конфигурации редактора ''config.js'', расположенный в папке ''admin/template/js/ckeditor/'', добавив следующий код: |
<code> | <code> |