I've programed some configuration options for ckeditor. My intention was to give the advanced users flexible configuration options and user who don't want to deal with custom config.js files some simple options.

First, i changed ckeditor to 4.1.3-full, because i had problems with the ckeditor.js (https://n2cms.codeplex.com/discussions/450462)
And to full edition because of the toolbar configuration ooption (see EditableFreeTextAreaAttribute)

I've tried to include most of the configuration options as ckeditor inpage configuration. First because of ckeditor updates and second i hohope i makes the usage of own ckeditor config.js files easier.

New features

1. Editor Mode
I've integrated three predefined Editor Modes, they modify the ckeditor toolbars.

Standard=Same toolbar configuration as before.
Basic = Copy/Paste, Undo/Redo, FOrmatting (Bold,Underline/Italic)
Full=All Features available

- The Editor mode is configurable as EditableFreeTextAreaAttribute.
- Defaultmode = Standard
- Moved the toolbar configuration from config.js to inpage

We have projects with different areas, in some areas the user is allowed to change styles or format the text free. And in other areas he should be restricted to simple formating. So with this options we are flexible.

2. Custom config.js configuration element
I've programed the inpage configration for a custom config.js file

I had to rename the predefined configuration property, because i couldn't compile the code. I always got an configuration element is not allowed to use reserved prefix config or locked error.

Example:
<ckeditor ckConfigJsPath="/scripts/ckconfig.js" />

3. Format dropdown
I've moved the default configuration of the format dropdown from config.cs to inpage configuration.
Then i added a configuration element overwriteFormatTags. This option overwrites the predefined format values.

And the EditableFreeTextArea also has a property AdditionalFormats. If specified, the given formats will be added in addtiotin to the default values to the format dropdown.

So you can set common format's with web.config and however have the flexibility to set special format values on a page.

Example:
In web.config
<ckeditor overwriteFormatTags="p;h1"  />

AdditionalFormats:="h2;h3"

Default option for all dropdowns are h1;p and for the EditableFreeTextAre with set AdditionalFormats  h1;h2;h3p

4. advancedMenues
I've moved the advanced menues as inpage configuration. I'ts not important, but i think so there some logic in the configuration

5. Custon contents.css
I've aded a configuration element which let's you specify the path to a custom contents.css file.

Example:
<ckeditor contentsCssPath="/scripts/contents.css" />

5. Custom Styles
To fill custom styles into the styles dropdown you have to integrate a custom config.js file. In this file you could add your own stylesets, it's not limited to one. I've interated a sample into config.js and comented it out.
So copy the original config.js file to your own location, uncoment the block which adds the custom styles. Add your own styleset(s).

Like before i've integrated a default option in web.config which points ckeditor to the custom style. But you can also overide this option with an EditableFreeTextArea Property for special pages.

This example asumes the style i put as sample into config.js and copied into my own location

<ckeditor ckConfigJsPath="/scripts/ckconfig.js" overwriteStylesSet="my_styles" />

With this configuration options and the custom config.js file all editors are using the Styleset my_styles

Now you can integrate a second styleset named styles_productspage into /scripts/ckconfig.js and set UseStylesSet:=productspage in EditableFreeTextAre

So i hope this covers the most configuration tasks and provides a bigger configuration flexibility through the global configurtion options in web.config and special options as EditableFreeTextArea Property.

https://n2cms.codeplex.com/discussions/445836

Author: andy4711

.gitattributes

@@ -0,0 +1,2 @@
+# Disable LF normalization for all files
+* -text

docs/n2cms.configuration.xsd

@@ -552,7 +552,11 @@
 							</xs:element>
 							<xs:element name="ckeditor" minOccurs="0" maxOccurs="1">
 								<xs:complexType>
-									<xs:attribute name="configJsPath" type="xs:string" use="optional" default="~/N2/Resources/ckeditor/config.js" />
+									<xs:attribute name="ckConfigJsPath" type="xs:string" use="optional" default="~/N2/Resources/ckeditor/config.js" />
+                  <xs:attribute name="overwriteStylesSet" type="xs:string" use="optional" default="default" />
+                  <xs:attribute name="overwriteFormatTags" type="xs:string" use="optional" default="p;h1;h2;h3;pre" />
+                  <xs:attribute name="contentsCssPath" type="xs:string" use="optional" default="~/N2/Resources/ckeditor/contents.css" />
+                  <xs:attribute name="advancedMenues" type="xs:boolean" use="optional" default="false" />
 								</xs:complexType>
 							</xs:element>
 							<xs:element name="tinyMCE" minOccurs="0">

src/Framework/N2/Configuration/CkEditorElement.cs

@@ -11,11 +11,39 @@ namespace N2.Configuration
 	/// </summary>
 	public class CkEditorElement : ConfigurationElement
 	{
-		[ConfigurationProperty("configJsPath")]
+		[ConfigurationProperty("ckConfigJsPath")]
 		public string ConfigJsPath
 		{
-			get { return (string)base["configJsPath"]; }
-			set { base["configJsPath"] = value; }
-		}
+			get { return (string)base["ckConfigJsPath"]; }
+			set { base["ckConfigJsPath"] = value; }
+		}
+
+		[ConfigurationProperty("overwriteStylesSet")]
+		public string OverwriteStylesSet
+		{
+			get { return (string)base["overwriteStylesSet"]; }
+			set { base["overwriteStylesSet"] = value; }
+		}
+
+		[ConfigurationProperty("overwriteFormatTags")]
+		public string OverwriteFormatTags
+		{
+			get { return (string)base["overwriteFormatTags"]; }
+			set { base["overwriteFormatTags"] = value; }
+		}
+
+		[ConfigurationProperty("contentsCssPath")]
+		public string ContentsCssPath
+		{
+			get { return (string)base["contentsCssPath"]; }
+			set { base["contentsCssPath"] = value; }
+		}
+
+		[ConfigurationProperty("advancedMenues")]
+		public bool AdvancedMenues
+		{
+			get { return (bool)base["advancedMenues"]; }
+			set { base["advancedMenues"] = value; }
+		}
 	}
 }

src/Framework/N2/Details/EditableFreeTextAreaAttribute.cs

@@ -12,53 +12,37 @@
 
 namespace N2.Details
 {
-	/// <summary>
-	/// Rich text editor settings set (toolbars, features).
-	/// </summary>
-	public enum FreeTextAreaSettingsSet
-	{
-		/// <summary>Setting set is defined by configuration, DEFAULT by default.</summary>
-		Undefined,
-		/// <summary>Fixed rich text editor toolbar, basic features, no additional toolbars.</summary>
-		[Obsolete]
-		Fixed,
-		/// <summary>Single line toolbar, no additional toolbars.</summary>
-		Minimal,
-		/// <summary>Single line tooolbar, all other toolbars shown by toogle icon.</summary>
-		Simple,
-		/// <summary>Extended toolbar with all features, less frequently used toolbars shown by toogle icon.</summary>
-		Extended
-	}
 
 
 	/// <summary>Attribute used to mark properties as editable. This attribute is predefined to use the <see cref="N2.Web.UI.WebControls.FreeTextArea"/> web control as editor.</summary>
-	/// <example>
+	/// <example>
+	/// Editor with standard toolbars:
 	/// [N2.Details.EditableFreeTextArea("Text", 110)] 
 	/// public virtual string Text { get; set; }
-	/// 
-	/// Setting set with full features:
-	/// [N2.Details.EditableFreeTextArea("Text", 110, FreeTextAreaSettingsSet.Extended)]
+	/// 
+	/// Editor with full toolbars:
+	/// [N2.Details.EditableFreeTextArea("Text", 110, FreeTextArea.EditorModeSetting.Full)]
+	/// 
+	/// Editor with reduced toolbars:
+	/// [N2.Details.EditableFreeTextArea("Text", 110, FreeTextArea.EditorModeSetting.Basic)]
 	/// 
 	/// Default toolbar mode can be set in Web.config, e.g.
 	/// <![CDATA[ 
 	///  <n2>
 	///   <edit>
 	///     <tinyMCE cssUrl="/Content/myrichtext.css">
-	///       <settings>
-	///         <add key="settings_set" value="Extended" />
-	///       </settings>
 	///   </edit>
 	///  </n2>
 	/// ]]>
 	/// 
-	/// Notes: 
-	/// settings_set property is nonstantard.
-	/// See also standard TinyMCE settings at http://tinymce.moxiecode.com/wiki.php/Configuration
-	/// Toogle toolbars: see PWD plugin at http://www.neele.name/pdw_toggle_toolbars/
 	/// </example>
 	[AttributeUsage(AttributeTargets.Property)]
 	public class EditableFreeTextAreaAttribute : EditableTextBoxAttribute, IRelativityTransformer
-	{
+	{
+		private FreeTextArea.EditorModeSetting editorMode = FreeTextArea.EditorModeSetting.Standard;
+		private string additionalFormats = string.Empty;
+		private string useStylesSet = string.Empty;
+
 		public EditableFreeTextAreaAttribute()
 			: base(null, 100)
 		{
@@ -67,20 +51,27 @@ public EditableFreeTextAreaAttribute()
 		public EditableFreeTextAreaAttribute(string title, int sortOrder)
 			: base(title, sortOrder)
 		{
+		}
+
+
+		public FreeTextArea.EditorModeSetting EditorMode
+		{
+			set { editorMode = value; }
+		}
+
+		public string AdditionalFormats
+		{
+			set { additionalFormats = value; }
+		}
+
+		public string UseStylesSet
+		{
+			set { useStylesSet = value; }
 		}
 
-		public EditableFreeTextAreaAttribute(string title, int sortOrder, FreeTextAreaSettingsSet toolbars)
-			: base(title, sortOrder)
-		{
-			Toolbars = toolbars;
-		}
-
-		/// <summary> Current rich text editor setting set (e.g. basic features with simple toolbar, extended etc) </summary>
-		public FreeTextAreaSettingsSet Toolbars { get; set; }
-
 		protected override void ModifyEditor(TextBox tb)
 		{
-			// set width and height to control the size of the tinyMCE editor
+			// set width and height to control the size of the ckeditor
 			// 1 column is evaluated to 10px
 			// 1 row is evaluated to 20px
 			if (Columns > 0)
@@ -90,8 +81,14 @@ protected override void ModifyEditor(TextBox tb)
 		}
 
 		protected override TextBox CreateEditor()
-		{
-			return new FreeTextArea();
+		{
+			FreeTextArea fta = new FreeTextArea();
+
+			fta.EditorMode = editorMode;
+			fta.AdditionalFormats = additionalFormats;
+			fta.UseStylesSet = useStylesSet;
+
+			return fta;
 		}
 
 		protected override Control AddRequiredFieldValidator(Control container, Control editor)
@@ -105,40 +102,17 @@ public override void UpdateEditor(ContentItem item, Control editor)
 		{
 			base.UpdateEditor(item, editor);
 
-			FreeTextArea fta = (FreeTextArea)editor;
+			FreeTextArea fta = (FreeTextArea)editor;
+			
+			fta.EditorMode = editorMode;
+			fta.AdditionalFormats = additionalFormats;
+			fta.UseStylesSet = useStylesSet;
 
 			if (item is IDocumentBaseSource)
 				fta.DocumentBaseUrl = (item as IDocumentBaseSource).BaseUrl;
 
-			string rt_mode = GetSettingsSetString(Toolbars);
-			if (!string.IsNullOrEmpty(rt_mode))
-				fta.CustomOverrides["settings_set"] = rt_mode;
-
-			string content_css = GetCssFiles(string.Empty);
-			if (!string.IsNullOrEmpty(content_css))
-			{
-				fta.CustomOverrides["content_css"] = content_css;
-			}
 		}
 
-		/// <summary>Stringify current settingset mode.</summary>
-		/// <remarks>Extended class might implement extended logics, 
-		///   e.g. check current site StartPage properties when UNDEFINED. 
-		///   When defined will override default config. value.
-		/// </remarks>
-		protected virtual string GetSettingsSetString(FreeTextAreaSettingsSet settingsSet)
-		{
-			return settingsSet.ToString();
-		}
-
-		/// <summary> Comma separated list of CSS file Urls to be used by TinyMCE, defined by application, default empty (unset) </summary>
-		/// <remarks> Extended class might implement extended logics, e.g. to check current site StartPage properties to set site specific styling. 
-		///   When defined will override default config. value.
-		/// </remarks>
-		protected virtual string GetCssFiles(string cssFiles)
-		{
-			return cssFiles;
-		}
 
         public override string GetIndexableText(ContentItem item)
         {