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
how_to:editor_configuration_custom_files [2011/05/14 12:44]
Connie [Custom Stylesheet]
how_to:editor_configuration_custom_files [2013/05/21 10:16] (current)
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 124: Line 125:
  
 ===== Standard Stylesheet ===== ===== Standard Stylesheet =====
-The +{{ :​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. 
 + 
 +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. 
 + 
 +So it is much more handy to define your own stylesheet-configuration and store it at a save location. 
 + 
 + 
 + 
 + 
 ===== 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>​
how_to/editor_configuration_custom_files.1305377095.txt.gz · Last modified: 2013/04/19 14:56 (external edit)