This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
ru:how_to:editor_configuration_more_options [2013/10/18 07:22] Arkady [Визуальное оформление (тема или скин)] |
ru:how_to:editor_configuration_more_options [2013/10/18 07:54] (current) Arkady [Necessary modifications:] |
||
---|---|---|---|
Line 20: | Line 20: | ||
GetSimple применяет свою собственную и единственную тему оформления редактора, которая расположена в папке //Корневой_каталог_GetSimple/admin/template/js/ckeditor/skins/getsimple//. | GetSimple применяет свою собственную и единственную тему оформления редактора, которая расположена в папке //Корневой_каталог_GetSimple/admin/template/js/ckeditor/skins/getsimple//. | ||
- | Как объясняется [[http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Minimum_Setup|на сайте CKEditor]], папка skins содержит файлы тем CKEditor вместе с кнопками панели управления и файлами стилей и является обязательной для работы редактора. Тем не менее, пользователь может удалять неиспользуемые темы и их файлы. | + | Как объясняется [[http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Minimum_Setup|на сайте CKEditor]], папка //skins// содержит файлы тем CKEditor вместе с кнопками панели управления и файлами стилей и является обязательной для работы редактора. Тем не менее, пользователь может удалять неиспользуемые темы и их файлы. |
Если вы хотите использовать другие темы (например, с большим количеством видимых кнопок или из-за других предпочтений), подключить новую тему несложно. Вам потребуется выполнить три шага: | Если вы хотите использовать другие темы (например, с большим количеством видимых кнопок или из-за других предпочтений), подключить новую тему несложно. Вам потребуется выполнить три шага: | ||
Line 28: | Line 28: | ||
На приведенном рисунке открыта //дополнительная (advanced) панель инструментов// и применена тема редактора //v2//. | На приведенном рисунке открыта //дополнительная (advanced) панель инструментов// и применена тема редактора //v2//. | ||
- | - В стандартный пакет CKeditor входят три темы: //kama//, //office2003// и //v2//. GetSimple их не использует, в системе применяется собственная тема //getsimple// | + | - В стандартный пакет CKeditor входят три темы: //kama//, //office2003// и //v2//. GetSimple их не использует, в системе применяется собственная тема //getsimple// |
- | - Если вы еще не сделали этого – [[http://ckeditor.com/download|скачайте CKEditor]] с официального сайта и распакуйте его в отдельную папку на своем компьютере. | + | - Если вы еще не сделали этого – [[http://ckeditor.com/download|скачайте CKEditor]] с официального сайта и распакуйте его в отдельную папку на своем компьютере.Откройте папку //ckeditor/skins// и загрузите тему редактора, которую хотите использовать, в папку //Корневой_каталог_GetSimple/admin/template/js/ckeditor/skins// на сервере. |
- | Откройте папку //ckeditor/skins// и загрузите тему редактора, которую хотите использовать, в папку //Корневой_каталог_GetSimple/admin/template/js/ckeditor/skins// на сервере. | + | - Отредактируйте конфигурационный файл системы //gsconfig.php// и перезагрузите его на сервер. |
- | - Отредактируйте конфигурационный файл системы //gsconfig.php// и перезагрузите его на сервер. | + | |
- | + | <code> | |
# WYSIWYG Editor Options | # WYSIWYG Editor Options | ||
define('GSEDITOROPTIONS',"skin : 'v2' | define('GSEDITOROPTIONS',"skin : 'v2' | ||
"); | "); | ||
+ | </code> | ||
- | this setting defines the skin v2, you can also add //kama// or //office2003//, depending on which skin you uploaded. | + | Эта настройка подключает тему //v2//, вы можете подключить //kama// или //office2003//, в зависимости от того, какие новые темы вы загрузили. |
- | ===== Enter Mode: Paragraph or LineBreak? ===== | + | ===== Поведение клавиши Enter: абзац или перенос строки? ===== |
- | You can define the behaviour of the ENTER KEY. | + | Пользователь редактора имеет возможность переопределять поведение клавиши ENTER. |
- | The CKEditor-documentation explains: //Sets the behavior for the ENTER key. It also dictates other behaviour rules in the editor, like whether the <br> element is to be used as a paragraph separator when indenting text.// | + | Документация CKEditor объясняет параметры настройки поведения клавиш следующим образом: //Настройка определяет поведение клавиши ENTER. Настройка также устанавливает и другие параметры редактора, например, использование тэга <br> как разделителя абзацев.// |
- | You can define the behaviour for the ENTER Key and the SHIFT-ENTER Key. | + | Нажатию клавиши ENTER или SHIFT-ENTER возможно сопоставить следующие действия: |
- | - P: new <p> paragraphs are created | + | |
- | - BR: lines are broken with <br> elements | + | |
- | - DIV: new <div> blocks are created | + | |
- | Edit your //gsconfig.php// and re-upload it to the server. | + | - P: создание нового абзаца <p> |
+ | - BR: создание перевода строки тэгом <br> | ||
+ | - DIV: создание нового блока <div> | ||
+ | |||
+ | Отредактируйте файл конфигурации //gsconfig.php// и перезагрузите его на сервер: | ||
+ | |||
+ | <code> | ||
define('GSEDITOROPTIONS',"skin : 'v2', | define('GSEDITOROPTIONS',"skin : 'v2', | ||
enterMode: CKEDITOR.ENTER_P, | enterMode: CKEDITOR.ENTER_P, | ||
shiftEnterMode : CKEDITOR.ENTER_BR | shiftEnterMode : CKEDITOR.ENTER_BR | ||
"); | "); | ||
- | this setting will enclose your text in Paragraphs when you hit the ENTER Key (<p> </p>) and add a <br /> when you hit SHIFT-ENTER. | + | </code> |
+ | |||
+ | В результате данных настроек по нажатию клавиши ENTER текст будет заключен в тэги <p> </p>, а при нажатии комбинации клавиш SHIFT-ENTER в текст будет вставлен тэг <br />. | ||
{{:how_to:ckeditor_editormode.jpg|}} | {{:how_to:ckeditor_editormode.jpg|}} | ||
- | ===== Default Font Labels ===== | + | ===== Шрифты по умолчанию ===== |
- | + | Любой визуальный редактор должен предлагать опции выбора шрифтов и их размеров.\\ | |
- | A visual editor should offer a choice of fonts and font-sizes. \\ If you activated the advanced Toolbar, you will get combo boxes for fonts and font-sizes in the second ribbon. \\ As soon as you click into the editor-area, these values will be activated. \\ You can restrict the available fonts as well. | + | Возможность для установки шрифтов и размеров предоставляется пользователю при активации дополнительной (advanced) панели инструментов, на которой выводятся выпадающие списки доступных шрифтов и их размеров.\\ |
+ | Вы также имеете возможность сократить или ограничить список доступных шрифтов.\\ | ||
- | To populate these combo boxes with the default values of your site, use these settings: | + | Чтобы занести в выпадающие списки наименования шрифтов и их размеры по умолчанию, используйте следующие настройки: |
+ | |||
+ | <code> | ||
# WYSIWYG Editor Options | # WYSIWYG Editor Options | ||
define('GSEDITOROPTIONS',"skin : 'v2', | define('GSEDITOROPTIONS',"skin : 'v2', | ||
Line 70: | Line 79: | ||
font_names : 'Arial;Times New Roman;Verdana' | font_names : 'Arial;Times New Roman;Verdana' | ||
"); | "); | ||
+ | </code> | ||
+ | | ||
{{:how_to:ckeditor_fonts.jpg|}} | {{:how_to:ckeditor_fonts.jpg|}} | ||
- | ===== Collapse Toolbar ===== | + | ===== Скрытие панели инструментов ===== |
+ | |||
+ | В readme-файле, включенном в состав CKEditor, интегрированного в GetSimple, написано, что возможность скрытия панели инструментов в этой версии редактора отсутствует. На самом деле эту возможность очень легко активировать.\\ | ||
+ | Возможность скрытия панели инструментов предписывается опцией //toolbarCanCollapse//, по умолчанию установленной в //false//. | ||
+ | При установке этой опции в true, вы увидите небольшую кнопку со стрелкой у правой границы панели инструментов. | ||
- | In the readme-file which comes with the CKeditor-in-GetSimple-Integration, we read that the toolbar can't collapse. | ||
- | But it can.\\ The following option defines the behaviour, which is //false// by default. \\ When set to //true//, you will see a small arrow-button at the right of the ribbon. | ||
{{:how_to:ckeditor_collapse.jpg|}} | {{:how_to:ckeditor_collapse.jpg|}} | ||
+ | <code> | ||
# WYSIWYG Editor Options | # WYSIWYG Editor Options | ||
define('GSEDITOROPTIONS',"skin : 'v2', | define('GSEDITOROPTIONS',"skin : 'v2', | ||
Line 86: | Line 100: | ||
toolbarCanCollapse : true | toolbarCanCollapse : true | ||
"); | "); | ||
- | when clicked, all toolbars will be closed. Find out, if you like that ;=) | + | </code> |
+ | |||
+ | Панели инструментов закрываются при нажатии на эту кнопку. Если такая возможность вам нравится – попробуйте сами. ;=) | ||
{{:how_to:ckeditor_collapsed.jpg|}} | {{:how_to:ckeditor_collapsed.jpg|}} | ||
- | ===== More Colors for Text and Background ===== | + | ===== Опция палитры More Colors (Другие цвета) ===== |
+ | |||
+ | По умолчанию CKEditor предлагает опцию More colors… (Другие цвета). Кнопка выбора расположена внизу цветовой палитры. Если вам эта возможность не требуется, установите опцию //colorButton_enableMore// в //false//. | ||
- | by default, CKEditor offers more colors at the bottom of the color palette. If you do not want this, set it to //false//. | ||
{{:how_to:ckeditor_morecolors.jpg|}} | {{:how_to:ckeditor_morecolors.jpg|}} | ||
+ | <code> | ||
# WYSIWYG Editor Options | # WYSIWYG Editor Options | ||
define('GSEDITOROPTIONS',"skin : 'v2', | define('GSEDITOROPTIONS',"skin : 'v2', | ||
Line 102: | Line 121: | ||
colorButton_enableMore : true | colorButton_enableMore : true | ||
"); | "); | ||
- | ===== Entities and Special Characters ===== | + | </code> |
+ | ===== Специальные символы и сущности ===== | ||
- | By default, the editor converts special characters like umlauts (üäö ...) to their HTML-equivalents.\\ This is not needed anymore if you encode your pages in UTF-8. So you can set this option to //false//. | + | По умолчанию редактор конвертирует специальные символы, например, умлауты (üäö …) в их HTML-эквиваленты (сущности).\\ Эта опция не требуется, если ваши страницы кодируются в UTF-8, поэтому можно ее выключить, установив параметр //entities// в //false//. |
+ | <code> | ||
# WYSIWYG Editor Options | # WYSIWYG Editor Options | ||
define('GSEDITOROPTIONS',"skin : 'v2', | define('GSEDITOROPTIONS',"skin : 'v2', | ||
Line 117: | Line 138: | ||
entities : false | entities : false | ||
"); | "); | ||
- | ===== Language Direction ===== | + | </code> |
+ | ===== Направление чтения или письма ===== | ||
+ | Во многих языках чтение и письмо осуществляются слева направо. Примером могут служить немецкий, английский, русский языки.\\ | ||
+ | В некоторых других языках, например, в арабском, фарси, иврите чтение выполняется справа налево.\\ | ||
+ | Существуют языки с направлением чтения и письма сверху вниз и снизу вверх.\\ | ||
+ | По умолчанию редактор применяет настройку пользовательского интерфейса (например, настройку браузера). | ||
+ | Поведение редактора можно поменять, явным образом указав направление чтения и письма в параметре //contentsLangDirection// | ||
- | In many languages the //reading-// or //write-direction// is from left to right. In German, English, French or whatever. \\ In other languages the reading-direction goes from right to left: in Arabic, Farsi, Hebrew and many others.\\ Other languages go from Top to Down or from Down to Top. | ||
- | |||
- | The editor follows per default the settings of the //user interface language direction// (f.e. your browser-settings).\\ If this does not work correctly or you want to force the direction, set the option //contentsLangDirection// | ||
{{:how_to:ckeditor-rtl.jpg|}} | {{:how_to:ckeditor-rtl.jpg|}} | ||
+ | <code> | ||
# WYSIWYG Editor Options | # WYSIWYG Editor Options | ||
define('GSEDITOROPTIONS',"skin : 'v2', | define('GSEDITOROPTIONS',"skin : 'v2', | ||
Line 135: | Line 160: | ||
contentsLangDirection : 'rtl' | contentsLangDirection : 'rtl' | ||
"); | "); | ||
- | | + | </code> |
- | The editor allows 3 options: | + | |
- | - ''ui'' = as defined by the user interaction interface (default) | + | Опция contentsLangDirection принимает три значения: |
- | - ''ltr'' = left to right | + | - ''ui'' = применяется настройка интерфейса пользователя (по умолчанию) |
- | - ''rtl'' = right to left | + | - ''ltr'' = слева направо |
+ | - ''rtl'' = справа налево | ||
+ | |||
+ | Пока направление сверху вниз и снизу вверх не реализовано. ;=) | ||
- | There is not top-down until now ;=) | + | ===== Защита Email ===== |
- | ===== Email Protection ===== | + | Иногда возникает необходимость размещения на странице сайта email-адреса. В этом случае их всегда необходимо защищать от обнаружения спамерскими грабберами и пауками.\\ |
+ | Для защиты адреса электронной почты возможна активация внутреннего модуля CKEditor, используя параметр //emailProtection : 'encode'//. | ||
- | sometimes it is necessary to add some email-adresses into a website. \\ And it is always necessary to protect these adresses from spam-harvesters. | + | Дополнительную информацию можно почерпнуть [[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.emailProtection|здесь]]. |
- | You can enable some kind of email protection in the editor options (''emailProtection : 'encode''').\\ See more info here: [[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.emailProtection]] | + | Добавьте в файл ''gsconfig.php'' в параметр GSEDITOROPTIONS настройку //emailProtection : 'encode'//. |
- | Add to gsconfig.php-editor-options: | + | <code> |
# WYSIWYG Editor Options | # WYSIWYG Editor Options | ||
define('GSEDITOROPTIONS',"skin : 'v2', | define('GSEDITOROPTIONS',"skin : 'v2', | ||
Line 162: | Line 191: | ||
emailProtection : 'encode' | emailProtection : 'encode' | ||
"); | "); | ||
- | now, whenever you create a mail-link in the editor, that mail-adress will be protected in the source-code: | + | </code> |
- | {{:how_to:ckeditor_mail_protection.jpg|}} | + | |
- | ===== SpellCheck ===== | + | |
- | CKEditor comes with built-in spellchecking feature, which is deactivated by default. | + | |
- | When activated, errors will be marked by a red line below the error. | + | |
- | When you position the cursor over that marked error, the context menu will pop up and show a list of suggestions | + | |
- | The Spellchecker-feature is named **SCAYT**, which means: **S**pell**C**heck**A**s**Y**ou**T**ype | + | Теперь, при размещении на странице email-адреса он будет защищен на странице: |
- | As there are a lot of options for the spell-checker, we will describe the basic configuration here. | + | {{:how_to:ckeditor_mail_protection.jpg|}} |
- | If you want to use more of the options, find out in the documentation at ckeditor.net,http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.scayt_autoStartup | + | |
+ | ===== Проверка орфографии ===== | ||
+ | CKEditor поставляется со встроенным модулем проверки орфографии, который активирован по умолчанию. При активном модуле орфографические ошибки подчеркиваются красной линией. Если расположить курсор над подчеркнутой ошибкой – появится всплывающее контекстное меню со списком возможных исправлений. | ||
- | ==== Necessary modifications: ==== | + | Эта функциональность редактора сокращенно называется **SCAYT**, что означает **S**pell**C**heck**A**s**Y**ou**T**ype (проверка орфографии при вводе). |
- | - Enable the feature (''scayt_autoStartup:true'') | + | Для модуля проверки орфографии существует большое количество настроек, в этой статье будут описаны только основные. Полный список настроек можно найти в документации [[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.scayt_autoStartup|CKEditor]]. |
- | - Define the language for the spellchecker (''scayt_sLang:'de_DE''')\\ The default language is en_US, so you should define the language when you need another language. \\ Possible values for the languages are: //en_US, en_GB, pt_BR, da_DK, nl_NL, en_CA, fi_FI, fr_FR, fr_CA, de_DE, el_GR, it_IT, nb_NO, pt_PT, es_ES, sv_SE//. | + | ==== Необходимые изменения: ==== |
- | - add the spellchecker-symbols to the toolbar\\ There are 2 symbols: the symbol ''Spellchecker'' opens the text in a dialogue window, allows to choose the language to check with and to correct the text, the second symbol, ''Scayt'' opens a pop-up-dialogue to activate / deactivate the spellchecker and to set some options. | + | |
- | So add //SCAYT-options// to editor-options and //'Scayt'// to the toolbar in gsconfig.php | + | - Включаем проверку орфографии (''scayt_autoStartup:true'') |
+ | - Определяем проверяемый язык (''scayt_sLang:'de_DE''') \\Язык по умолчанию - //en_US//. \\Возможные значения: //en_US, en_GB, pt_BR, da_DK, nl_NL, en_CA, fi_FI, fr_FR, fr_CA, de_DE, el_GR, it_IT, nb_NO, pt_PT, es_ES, sv_SE//. | ||
+ | - Добавляем кнопки-ссылки модуля проверки орфографии на панель инструментов редактора.\\ | ||
+ | Их всего две: ''Spellchecker'' загружает текст в диалогове окно, позволяет выбирать язык для проверки и проводить корректировку текста. ''Scayt'' открывает диалоговое окно для включения/отключения проверки орфографии и установки некоторых опций. | ||
+ | Добавляем //SCAYT-опции// к настройкам редактора и строку '''Scayt''' к панели инструментов в файле ''gsconfig.php'' | ||
+ | <code> | ||
# WYSIWYG Editor Options | # WYSIWYG Editor Options | ||
define('GSEDITOROPTIONS',"scayt_autoStartup:true, scayt_sLang:'de_DE'"); | define('GSEDITOROPTIONS',"scayt_autoStartup:true, scayt_sLang:'de_DE'"); | ||
Line 191: | Line 220: | ||
'Redo','Find','Replace','-','SelectAll','RemoveFormat','SpellChecker','Scayt'],'/', | 'Redo','Find','Replace','-','SelectAll','RemoveFormat','SpellChecker','Scayt'],'/', | ||
"); | "); | ||
- | + | </code> | |
- | **Attention:** | + | |
- | There is a bug in CKEditor SpellChecker's plugin which you should be aware of: | + | **Внимание:** |
- | if spellchecker is enabled and **the cursor is placed in a list** (whether unordered or ordered list), do not switch to SourceCode mode! | + | В плагине CKEditor SpellChecker есть ошибка, о существовании которой надо знать.\\ |
- | When switching back your list will be "destroyed" because the spellchecker plugin adds superfluous list-elements to the source code | + | Если проверка орфографии включена и **курсор находится в списке** (неупорядоченном или нумерованном – не имеет значения), не переключайтесь в режим //Source//! При переключении назад в режим WYSIWYG ваш список будет поврежден, так как модуль проверки орфографии добавит к нему лишние элементы.\\ |
+ | Существование этой ошибки проверено для последней на момент написания статьи версии CKEditor (3.6.2), в этой версии она так же присутствует. Это – не ошибка GetSimple, поэтому придется ждать, пока разработчики CK Editor ее исправят. | ||
- | It's tested with the newest CKEditor version (3.6.2), the bug is still there | ||
- | this is no GetSimple bug, so we have to wait until that bug is fixed in CKEditor | ||
- | ---- |