This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
how_to:editor_configuration_custom_files [2011/05/14 12:57] Connie [Standard Stylesheet] |
how_to:editor_configuration_custom_files [2013/05/21 10:16] yojoe [HTML or XHTML output ?] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | **GetSimple-CKEditor** comes with a default configuration file and with a default stylesheet-file (for the styles-combobox). | + | \\ |
+ | ======CKEditor Configuration Files====== | ||
- | You can define your own configuration files which will not be overwritten by GetSimple-Upgrades and which offer some features which are not needed in a standard, stripped-down version. | + | **GetSimple-CKEditor** comes with a default configuration file and with a default stylesheet-file (for the styles-combobox). You can define your own configuration files which will not be overwritten by **GetSimple**-Upgrades and which offer some features which are not needed in a standard, stripped-down version. |
===== Standard Configuration File ===== | ===== Standard Configuration File ===== | ||
- | The standard configuration file, which comes with every GetSimple-Version, is located in the folder ''yourGetSimpleRoot/admin/template/js/ckeditor'' and is nearly empty. | + | The standard configuration file, which comes with every **GetSimple**-Version, is located in the folder ''yourGetSimpleRoot/admin/template/js/ckeditor'' and is nearly empty. |
It contains only 2 editor-options: | It contains only 2 editor-options: | ||
Line 41: | Line 42: | ||
<code>define('GSEDITOROPTIONS', "entities : false,customConfig : '../../../../data/editorconfig/yourconfigfile.js',skin: 'v2' | <code>define('GSEDITOROPTIONS', "entities : false,customConfig : '../../../../data/editorconfig/yourconfigfile.js',skin: 'v2' | ||
");</code> | ");</code> | ||
- | For this you must create the folder ''editorconfig'' in your ''data-directory'' and upload the file to that folder. | + | For this you must create the folder ''editorconfig'' in your ''data-directory'' and upload the file to that folder. And allow check the .htaccess that js-files are allowed in the data-directory. |
=== Example file: === | === Example file: === | ||
<code>/* | <code>/* | ||
Line 137: | Line 138: | ||
===== Custom Stylesheet ===== | ===== 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]] | ||
+ | - name this file whatever and upload it to a secure place, for example into the data- or the theme-folder | ||
+ | - now edit the ''gsconfig.php'' and re-upload it to your server. | ||
+ | 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> | ||
+ | Now, what to edit in this file? | ||
+ | |||
+ | The CKEditor-Styleset contains definitions for the following styles: | ||
+ | * 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> |