User Tools

Site Tools


how_to:editor_configuration_custom_files

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
Next revision Both sides next revision
how_to:editor_configuration_custom_files [2011/05/14 12:57]
Connie [Standard Stylesheet]
how_to:editor_configuration_custom_files [2013/05/06 12:12]
yojoe HTML4 output instead of XHTML
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 ''​[b] <br> [/​b]''​ [HTML] instead of ''​[b] <br /> [/​b]''​ [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>​
how_to/editor_configuration_custom_files.txt · Last modified: 2013/05/21 10:16 by yojoe