This shows you the differences between two versions of the page.
how_to:editor_configuration_more_options [2011/11/26 09:17] Connie added spellcheck |
how_to:editor_configuration_more_options [2013/04/19 15:04] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== More Editor Options ====== | ||
- | You can configure more than //toolbars//, //editor language// and //editor height//. For all other options this is the place. | ||
- | |||
- | The following list will never be complete. A really impressive list of all available CKEditor Options is here: [[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html]] | ||
- | |||
- | How to define the options in the //gsconfig.php:// \\ The options have to be added in this place. | ||
- | # WYSIWYG Editor Options | ||
- | define('GSEDITOROPTIONS'," | ||
- | "); | ||
- | | ||
- | see below some of the most needed or most searched options: | ||
- | |||
- | ===== Editor Skin ===== | ||
- | |||
- | The editor skin defines the graphic set which is used for the editor area. | ||
- | GetSimple ships with one skin, which sits in the directory //your getsimple installation/admin/template/js/ckeditor/skins/getsimple// | ||
- | |||
- | As explained at [[http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Minimum_Setup|the CKeditor site]], this directory //skins// contains CKEditor skin files along with toolbar buttons and stylesheet definitions and is necessary for CKEditor to work. You can however remove unused skins and their files. | ||
- | |||
- | If you want other skins (with more visible buttons for example, or because you are used to another skin in other web-applications), you can define that. You will need 3 steps for that. | ||
- | |||
- | {{:how_to:ckeditor_advanced_skin.jpg|}} | ||
- | |||
- | This example shows the //advanced toolbar// + the skin //v2//. | ||
- | - CKeditor comes with three skins: //kama//, //office2003// and //v2//. GetSimple does not use these, but uses it's own skin, //getsimple// | ||
- | - If you haven't done yet, download CKEditor from [[http://ckeditor.com/download]] and unpack it to your local harddisk. Open the directory //ckeditor/skins// and upload the skin which you want to use to your GetSimple-directory at the server: //your_getsimple_installation/admin/template/js/ckeditor/skins// | ||
- | - edit the configuration, //gsconfig.php// and re-upload it to your server. | ||
- | |||
- | # WYSIWYG Editor Options | ||
- | define('GSEDITOROPTIONS',"skin : 'v2' | ||
- | "); | ||
- | |||
- | this setting defines the skin v2, you can also add //kama// or //office2003//, depending on which skin you uploaded. | ||
- | ===== Enter Mode: Paragraph or LineBreak? ===== | ||
- | |||
- | You can define the behaviour of the ENTER KEY. 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.// | ||
- | |||
- | You can define the behaviour for the ENTER Key and the SHIFT-ENTER Key. | ||
- | - 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. | ||
- | define('GSEDITOROPTIONS',"skin : 'v2', | ||
- | enterMode: CKEDITOR.ENTER_P, | ||
- | 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. | ||
- | {{: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. | ||
- | To populate these combo boxes with the default values of your site, use these settings: | ||
- | # WYSIWYG Editor Options | ||
- | define('GSEDITOROPTIONS',"skin : 'v2', | ||
- | enterMode: CKEDITOR.ENTER_P, | ||
- | shiftEnterMode : CKEDITOR.ENTER_BR, | ||
- | fontSize_defaultLabel : '11px', | ||
- | font_defaultLabel : 'Arial', | ||
- | font_names : 'Arial;Times New Roman;Verdana' | ||
- | "); | ||
- | {{:how_to:ckeditor_fonts.jpg|}} | ||
- | ===== Collapse Toolbar ===== | ||
- | |||
- | 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|}} | ||
- | # WYSIWYG Editor Options | ||
- | define('GSEDITOROPTIONS',"skin : 'v2', | ||
- | enterMode: CKEDITOR.ENTER_P, | ||
- | shiftEnterMode : CKEDITOR.ENTER_BR, | ||
- | fontSize_defaultLabel : '11px', | ||
- | font_defaultLabel : 'Verdana', | ||
- | font_names : 'Arial;Times New Roman;Verdana', | ||
- | toolbarCanCollapse : true | ||
- | "); | ||
- | when clicked, all toolbars will be closed. Find out, if you like that ;=) | ||
- | {{:how_to:ckeditor_collapsed.jpg|}} | ||
- | ===== More Colors for Text and Background ===== | ||
- | |||
- | 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|}} | ||
- | # WYSIWYG Editor Options | ||
- | define('GSEDITOROPTIONS',"skin : 'v2', | ||
- | enterMode: CKEDITOR.ENTER_P, | ||
- | shiftEnterMode : CKEDITOR.ENTER_BR, | ||
- | fontSize_defaultLabel : '11px', | ||
- | font_defaultLabel : 'Verdana', | ||
- | font_names : 'Arial;Times New Roman;Verdana', | ||
- | toolbarCanCollapse : true, | ||
- | colorButton_enableMore : true | ||
- | "); | ||
- | ===== Entities and Special Characters ===== | ||
- | |||
- | 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//. | ||
- | # WYSIWYG Editor Options | ||
- | define('GSEDITOROPTIONS',"skin : 'v2', | ||
- | enterMode: CKEDITOR.ENTER_P, | ||
- | shiftEnterMode : CKEDITOR.ENTER_BR, | ||
- | fontSize_defaultLabel : '11px', | ||
- | font_defaultLabel : 'Verdana', | ||
- | font_names : 'Arial;Times New Roman;Verdana', | ||
- | toolbarCanCollapse : true, | ||
- | colorButton_enableMore : true, | ||
- | entities : false | ||
- | "); | ||
- | ===== Language Direction ===== | ||
- | |||
- | 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|}} | ||
- | # WYSIWYG Editor Options | ||
- | define('GSEDITOROPTIONS',"skin : 'v2', | ||
- | enterMode: CKEDITOR.ENTER_P, | ||
- | shiftEnterMode : CKEDITOR.ENTER_BR, | ||
- | fontSize_defaultLabel : '11px', | ||
- | font_defaultLabel : 'Verdana', | ||
- | font_names : 'Arial;Times New Roman;Verdana', | ||
- | toolbarCanCollapse : true, | ||
- | colorButton_enableMore : true, | ||
- | entities : false, | ||
- | contentsLangDirection : 'rtl' | ||
- | "); | ||
- | | ||
- | The editor allows 3 options: | ||
- | - ui = as defined by the user interaction interface (default) | ||
- | - ltr = left to right | ||
- | - rtl = right to left | ||
- | |||
- | There is not top-down until now ;=) | ||
- | ===== Email Protection ===== | ||
- | |||
- | sometimes it is necessary to add some email-adresses into a website. And it is always necessary to protect these adresses from spam-harvesters. | ||
- | |||
- | So you can enable some kind of email protection in the editor options. | ||
- | See more info here: [[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.emailProtection]] | ||
- | |||
- | so add to gsconfig.php-editor-options: | ||
- | # WYSIWYG Editor Options | ||
- | define('GSEDITOROPTIONS',"skin : 'v2', | ||
- | enterMode: CKEDITOR.ENTER_P, | ||
- | shiftEnterMode : CKEDITOR.ENTER_BR, | ||
- | fontSize_defaultLabel : '11px', | ||
- | font_defaultLabel : 'Verdana', | ||
- | font_names : 'Arial;Times New Roman;Verdana', | ||
- | toolbarCanCollapse : true, | ||
- | colorButton_enableMore : true, | ||
- | entities : false, | ||
- | contentsLangDirection : 'ltr', | ||
- | emailProtection : 'encode' | ||
- | "); | ||
- | now, whenever you create a mail-link in the editor, that mail-adress will be protected in the source-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. | ||
- | |||
- | As there are a lot of options for the spell-checker, we will describe the basic configuration here. | ||
- | |||
- | |||
- | ---- |