CKEditor 3.x/Developers Guide/ASP.NET/Configuration - Revision history

Anna: /* Event Support */

2011-04-20T13:43:29Z

‎Event Support

Anna: CKEditor.NET -> CKEditor for ASP.NET

2011-04-20T13:43:05Z

CKEditor.NET -> CKEditor for ASP.NET

Anna: TOC added

2011-03-04T16:39:26Z

TOC added

Wiktor: Created page with '{{#CUSTOMTITLE:Setting CKEditor.NET Configuration}} CKEditor is a highly customizable tool and the full list of all configuration options is available in the [http://docs.cksourc…'

2011-03-04T15:57:33Z

Created page with '{{#CUSTOMTITLE:Setting CKEditor.NET Configuration}} CKEditor is a highly customizable tool and the full list of all configuration options is available in the [http://docs.cksourc…'

New page

{{#CUSTOMTITLE:Setting CKEditor.NET Configuration}}
CKEditor is a highly customizable tool and the full list of all configuration options is available in the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html JavaScript API]. The <code>config</code> configuration object of CKEditor.NET contains all configuration options of the standard CKEditor release, as available in the JavaScript API documentation.

The CKEditor.NET Control also contains some of the frequently used and thus most useful configuration options in a form of CKEditor control '''properties'''. These properties can be set both in the source code and in Visual Studio visual designer, where they can be seen in the '''Properties''' window.

== CKEditor.NET Control Properties ==
The names of the CKEditor.NET properties use the [http://msdn.microsoft.com/en-us/library/ms229043.aspx ASP.NET naming conventions] and are written in Pascal case. Check some of the comparisons between the JavaScript names and ASP.NET ones.

Orginal JavaScript name:
<source lang="javascript">
CKEditor1.config.format_tags = "p;h1;h2;h3;h4;h5;h6;pre;address;div";
CKEditor1.config.defaultLanguage = "en";
</source>

ASP.NET name in Pascal case:
<source lang="asp">
CKEditor1.FormatTags = "p;h1;h2;h3;h4;h5;h6;pre;address;div";
CKEditor1.DefaultLanguage = "en";
</source>

== Passing Configuration String Values ==
Please note that CKEditor.NET settings that are represented by string objects when passed from ASP.NET to JavaScript do not require additional quote characters as they will be converted to the JSON format automatically.
<source lang="asp">
CKEditor1.config.defaultLanguage = "en";
CKEditor1.config.filebrowserImageBrowseUrl = "~/ckfinder/ckfinder.html?type=Images";
CKEditor1.config.filebrowserImageUploadUrl = "~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images";
CKEditor1.config.format_div = @"{ element : 'div' }";
CKEditor1.config.toolbar = "Full";
CKEditor1.config.toolbar = new object[] { new object[] { "Source", "About" } };
</source>

== Methods of Setting Configuration ==
The configuration of the CKEditor.NET Control can be set in two different ways.

Firstly, you can define the configuration in the source file, inside the <code><script></code> element (either inline or in the external source file).
<source lang="asp">
<script language="C#" runat="server">
protected void Page_Load(object sender, EventArgs e)
{
CKEditor1.config.toolbar = "Basic";
}
</script>
</source>

Secondly, you can set the same property in the CKEditor.NET control tag on the <code>.aspx</code> page.
<source lang="asp">
<CKEditor:CKEditorControl ID="CKEditor1" runat="server" Toolbar="Basic">
</CKEditor:CKEditorControl>
</source>

Do remember, though, that if you use both methods at the same time, the definition from the source code will prevail and override the one from the CKEditor.NET control tag.

== Toolbar Definition ==
CKEditor toolbar can be defined in a similar way as [[CKEditor_3.x/Developers_Guide/Toolbar|in JavaScript]], using an array of objects representing toolbar elements (buttons, drop-down menus).

The toolbar can be defined inside the source code file.
<source lang="asp">
CKEditor1.config.toolbar = new object[]
{
new object[] { "Source" },
new object[] { "Bold", "Italic", "Underline", "Strike", "-", "Subscript", "Superscript" },
new object[] { "NumberedList", "BulletedList", "-", "Outdent", "Indent" },
"/",
new object[] { "Styles", "Format", "Font", "FontSize", "TextColor", "BGColor", "-", "About" },
};
</source>

It can also be defined inside the <code>.aspx</code> page.
<source lang="asp">
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"
Toolbar="Source
Bold|Italic|Underline|Strike|-|Subscript|Superscript
NumberedList|BulletedList|-|Outdent|Indent
/
Styles|Format|Font|FontSize|TextColor|BGColor|-|About">
</CKEditor:CKEditorControl>
</source>

CKEditor comes with two predefined toolbar sets, so instead of providing the full definition of a toolbar it is possible also to specify simply the name of a toolbar:

<source lang="asp">
CKEditor1.config.toolbar = "Full";
</source>

<source lang="asp">
<CKEditor:CKEditorControl ID="CKEditor1" runat="server" Toolbar="Full">
</CKEditor:CKEditorControl>
</source>

== Options Defined as Enumerators ==
Some configuration options that let you select one or more pre-defined options are implemented as enumerators. You can set them in the following way.

Inside the source code file:
<source lang="asp">
CKEditor1.config.contentsLangDirection = contentsLangDirections.Ui;
CKEditor1.config.dialog_buttonsOrder = DialogButtonsOrder.OS;
CKEditor1.config.enterMode = EnterMode.P;
CKEditor1.config.resize_dir = ResizeDir.Both;
CKEditor1.config.scayt_contextCommands = ScaytContextCommands.All;
CKEditor1.config.scayt_contextMenuItemsOrder = ScaytContextMenuItemsOrder.Suggest | ScaytContextMenuItemsOrder.Moresuggest;
CKEditor1.config.scayt_moreSuggestions = ScaytMoreSuggestions.On;
CKEditor1.config.shiftEnterMode = EnterMode.P;
CKEditor1.config.startupMode = StartupMode.Wysiwyg;
CKEditor1.config.toolbarLocation = ToolbarLocation.Top;
</source>

Inside the <code>.aspx</code> page:
<source lang="asp">
<CKEditor:CKEditorControl ID="CKEditor1" runat="server" Toolbar="Full" ContentsLangDirection="Ui" DialogButtonsOrder="OS"
EnterMode="P" ResizeDir="Both" ShiftEnterMode="P" StartupMode="Wysiwyg" ToolbarLocation="Top">
</CKEditor:CKEditorControl>
</source>

== Options Defined as Arrays ==
Some CKEditor options (like <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.smiley_images smiley_images]</code> or <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.specialChars specialChars]</code>) are defined in JavaScript as array objects, in the following way:
<source lang="javascript">
config.smiley_descriptions =
[
'smiley', 'sad', 'wink', 'laugh', 'frown', 'cheeky', 'blush', 'surprise',
'indecision', 'angry', 'angel', 'cool', 'devil', 'crying', 'enlightened', 'no',
'yes', 'heart', 'broken heart', 'kiss', 'mail'
];
</source>

To define them using ASP.NET, use the following form:
<source lang="asp">
CKEditor1.config.smiley_descriptions = new string[]
{
"smiley", "sad", "wink", "laugh", "frown", "cheeky", "blush", "surprise",
"indecision", "angry", "angel", "cool", "devil", "crying", "enlightened", "no",
"yes", "heart", "broken heart", "kiss", "mail"
};

CKEditor1.config.blockedKeystrokes = new int[]
{
CKEditorConfig.CKEDITOR_CTRL + 66 /*B*/, CKEditorConfig.CKEDITOR_CTRL + 73 /*I*/, CKEditorConfig.CKEDITOR_CTRL + 85 /*U*/
};

CKEditor1.config.keystrokes = new object[]
{
new object[] { CKEditorConfig.CKEDITOR_ALT + 121 /*F10*/, "toolbarFocus" },
new object[] { CKEditorConfig.CKEDITOR_ALT + 122 /*F11*/, "elementsPathFocus" },
new object[] { CKEditorConfig.CKEDITOR_SHIFT + 121 /*F10*/, "contextMenu" },
new object[] { CKEditorConfig.CKEDITOR_CTRL + 90 /*Z*/, "undo" },
new object[] { CKEditorConfig.CKEDITOR_CTRL + 89 /*Y*/, "redo" },
new object[] { CKEditorConfig.CKEDITOR_CTRL + CKEditorConfig.CKEDITOR_SHIFT + 90 /*Z*/, "redo" },
new object[] { CKEditorConfig.CKEDITOR_CTRL + 76 /*L*/, "link" },
new object[] { CKEditorConfig.CKEDITOR_CTRL + 66 /*B*/, "bold" },
new object[] { CKEditorConfig.CKEDITOR_CTRL + 73 /*I*/, "italic" },
new object[] { CKEditorConfig.CKEDITOR_CTRL + 85 /*U*/, "underline" },
new object[] { CKEditorConfig.CKEDITOR_ALT + 109 /*-*/, "toolbarCollapse" }
};
</source>

== Event Support ==
CKEditor.NET events can be added to both the global editor object and an editor instance.

To attach an event handler to an editor instance configure the <code>CKEditorInstanceEventHandler</code> property.
<source lang="asp">
// Equivalent to CKEditor1.on in JavaScript
CKEditor1.config.CKEditorInstanceEventHandler = new System.Collections.Generic.List<object>();
CKEditor1.config.CKEditorInstanceEventHandler.Add(new object[] { "instanceReady"
, "function (evt) { alert('Event handler attached to editor instance: ' + evt.editor.name);}" });
</source>

To attach events globally to the CKEditor object, use the <code>CKEditorEventHandler.Add</code> function.
<source lang="asp">
// Equivalent to CKEDITOR.on in JavaScript
CKEditor1.config.CKEditorEventHandler.Add(new object[] { "instanceReady"
, "function (evt) { alert('Events handler attached to CKEDITOR object.');}" });
</source>

== Additional Configuration Options ==
If you want to add the configuration properties that do not come directly from CKEditor, but are available in the plugins included in your installation, use the <code>ExtraOptions</code> hash table.
<source lang="asp">
CKEditor1.config.ExtraOptions["myConfigurationOption"] = "'sample value'";
</source>

@@ Line 155: / Line 155: @@
 == Event Support ==
-CKEditor for ASP.NET events can be added to both the global editor object and an editor instance.
+CKEditor for ASP.NET control events can be added to both the global editor object and an editor instance.
 To attach an event handler to an editor instance configure the <code>CKEditorInstanceEventHandler</code> property.

← Older revision		Revision as of 16:39, 4 March 2011
Line 1:		Line 1:
		+	__TOC__
	{{#CUSTOMTITLE:Setting CKEditor.NET Configuration}}		{{#CUSTOMTITLE:Setting CKEditor.NET Configuration}}
	CKEditor is a highly customizable tool and the full list of all configuration options is available in the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html JavaScript API]. The <code>config</code> configuration object of CKEditor.NET contains all configuration options of the standard CKEditor release, as available in the JavaScript API documentation.		CKEditor is a highly customizable tool and the full list of all configuration options is available in the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html JavaScript API]. The <code>config</code> configuration object of CKEditor.NET contains all configuration options of the standard CKEditor release, as available in the JavaScript API documentation.

@@ Line 1: / Line 1: @@
 __TOC__
-{{#CUSTOMTITLE:Setting CKEditor.NET Configuration}}
+{{#CUSTOMTITLE:Setting CKEditor for ASP.NET Configuration}}
-CKEditor is a highly customizable tool and the full list of all configuration options is available in the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html JavaScript API]. The <code>config</code> configuration object of CKEditor.NET contains all configuration options of the standard CKEditor release, as available in the JavaScript API documentation.
+CKEditor is a highly customizable tool and the full list of all configuration options is available in the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html JavaScript API]. The <code>config</code> configuration object of CKEditor for ASP.NET contains all configuration options of the standard CKEditor release, as available in the JavaScript API documentation.
-The CKEditor.NET Control also contains some of the frequently used and thus most useful configuration options in a form of CKEditor control '''properties'''. These properties can be set both in the source code and in Visual Studio visual designer, where they can be seen in the '''Properties''' window.
+The CKEditor for ASP.NET Control also contains some of the frequently used and thus most useful configuration options in a form of CKEditor control '''properties'''. These properties can be set both in the source code and in Visual Studio visual designer, where they can be seen in the '''Properties''' window.
-== CKEditor.NET Control Properties ==
+== CKEditor for ASP.NET Control Properties ==
-The names of the CKEditor.NET properties use the [http://msdn.microsoft.com/en-us/library/ms229043.aspx ASP.NET naming conventions] and are written in Pascal case. Check some of the comparisons between the JavaScript names and ASP.NET ones.
+The names of the CKEditor for ASP.NET properties use the [http://msdn.microsoft.com/en-us/library/ms229043.aspx ASP.NET naming conventions] and are written in Pascal case. Check some of the comparisons between the JavaScript names and ASP.NET ones.
 Orginal JavaScript name:
@@ Line 21: / Line 21: @@
 == Passing Configuration String Values ==
-Please note that CKEditor.NET settings that are represented by string objects when passed from ASP.NET to JavaScript do not require additional quote characters as they will be converted to the JSON format automatically.
+Please note that CKEditor for ASP.NET settings that are represented by string objects when passed from ASP.NET to JavaScript do not require additional quote characters as they will be converted to the JSON format automatically.
 <source lang="asp">
 CKEditor1.config.defaultLanguage = "en";
@@ Line 32: / Line 32: @@
 == Methods of Setting Configuration ==
-The configuration of the CKEditor.NET Control can be set in two different ways.
+The configuration of the CKEditor for ASP.NET Control can be set in two different ways.
 Firstly, you can define the configuration in the source file, inside the <code><script></code> element (either inline or in the external source file).
@@ Line 44: / Line 44: @@
 </source>
-Secondly, you can set the same property in the CKEditor.NET control tag on the <code>.aspx</code> page.
+Secondly, you can set the same property in the CKEditor for ASP.NET control tag on the <code>.aspx</code> page.
 <source lang="asp">
 <CKEditor:CKEditorControl ID="CKEditor1" runat="server" Toolbar="Basic">
@@ Line 50: / Line 50: @@
 </source>
-Do remember, though, that if you use both methods at the same time, the definition from the source code will prevail and override the one from the CKEditor.NET control tag.
+Do remember, though, that if you use both methods at the same time, the definition from the source code will prevail and override the one from the CKEditor for ASP.NET control tag.
 == Toolbar Definition ==
@@ Line 155: / Line 155: @@
 == Event Support ==
-CKEditor.NET events can be added to both the global editor object and an editor instance.
+CKEditor for ASP.NET events can be added to both the global editor object and an editor instance.
 To attach an event handler to an editor instance configure the <code>CKEditorInstanceEventHandler</code> property.