Differences

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

--- how_to:editor_configuration_custom_files [2011/05/14 12:52]
Connie [Standard Stylesheet]
+++ how_to:editor_configuration_custom_files [2013/05/21 10:15]
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 =====
-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:
@@ Line 41: / Line 42: @@
 <code>define('GSEDITOROPTIONS', "entities : false,customConfig : '../../../../data/editorconfig/yourconfigfile.js',skin: 'v2'
 ");</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: ===
 <code>/*
@@ Line 124: / Line 125: @@
 ===== Standard Stylesheet =====
-Very often, users do not want to use the styles which come by default in the style-combo-box:
+{{ :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.
-{{:how_to:ckeditorstylecombo.jpg|}}
-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''
@@ Line 133: / Line 131: @@
 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, non-overwritten-location.
+So it is much more handy to define your own stylesheet-configuration and store it at a save location.
 ===== 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>

GetSimple CMS Wiki

User Tools

Site Tools

Differences

Page Tools