From an ASP.Net perspective, the CKEditor 3.x does not include a serverside(.dll) library but just clientside executables. Hence, an ASP.Net multiline textbox control can become a rich text editor in the client side by using CKEditor. We can also make a P tag or DIV tag as a rich text editor using the new CKEditor.
Moving forward, we will see how the new CKEditor can be used in an ASP.Net website.
Steps
1. Open Visual Studio 2008, Click File >Website and choose ASP.Net Website. Choose the language of your choice.
2. Download the latest CKEditor files. The current version is 3.1.
3. Unzip the zip file. Copy the ckeditor folder into your visual studio solution. Refer below,
4. Drag an ASP.Net textbox control into your aspx page. Set its TextMode property to MultiLine.
5. To use the CKEditor features with the MultiLine textbox, we need to include ckeditor.js file into our webpage. Refer below,
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
6. Next, we need to call the ckeditor javascript API to replace the multiline text box to an editor.
CKEDITOR.replace('TextBox1');
The above function can be called from window.onload event.
<script type="text/javascript">
window.onload=function()
{
CKEDITOR.replace('TextBox1');
}
</script>
OR
Call the above method after your multiline textbox tag.
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" TextMode="MultiLine" runat="server"></asp:TextBox>
<script type="text/javascript">
CKEDITOR.replace('TextBox1');
</script>
The HTML elements (P or DIV or textarea) will be replaced by an editor instance when the above code executed. The content of the editor will be posted back to HTML element(textarea or P or DIV) when the page is submitted and it can be retrieved using element's ID on the server side, TextBox1.Text in our case. Multiple ckeditors can be added by passing its ID to replace function.
7. That's it! Execute the page and you can see the Ckeditor in action.
The final code will look like,
<head runat="server">
<title></title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" TextMode="MultiLine" runat="server"></asp:TextBox>
<script type="text/javascript">
//CKEDITOR.replace('TextBox1');
</script>
</div>
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
</form>
</body>
</html>
With this knowledge, we will move forward and do some basic customization on the CKEditor.
Customizing CKEditor
By default, the CKEditor includes large number of editor options. See the image above. Most of the time, we will not require all the above options to do our styling. We can customize the CKEditor like we do in previous versions.
1. Customizing the editor inline in the webpage through replace function
By default, the editor includes 2 toolbar sets, Full and Basic. To set Basic toolbar,
<script type="text/javascript">
CKEDITOR.replace('TextBox1', {toolbar:'Basic'});
</script>
Or, you can set your own toolbar set inline like below,
<script type="text/javascript">
var config = {
toolbar:
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],
['UIColor'], '/',
['Styles', 'Format', 'Font', 'FontSize']
]
};
CKEDITOR.replace('TextBox1', config);
</script>
2. Customizing the editor through config.js.
Browse to the config.js file in ckeditor folder. You can set some default setting here. Refer below,
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
};
To include your own toolbarset, add your own customized toolbar definition here. Refer below,
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.toolbar_CodeDigestTool =
[
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
'/',
['Styles', 'Format', 'Font', 'FontSize'],
['TextColor', 'BGColor'],
['Maximize', 'ShowBlocks', '-', 'About']
];
};
In the above code, your new toolbar name will be "CodeDigestTool"(The word after "_")
<script type="text/javascript">
CKEDITOR.replace('TextBox1', {toolbar:'CodeDigestTool'});
</script>
Refer here to know all the config options.
Editing config.js means you are changing the default ckeditor files. To prevent this, we can customize the ckeditor using an external config file and keep the default ckeditor files intact. To apply the external config file,
CKEDITOR.replace( ' TextBox1',
{
customConfig : '/Custom/CodeDigest_config.js'
});
CodeDigest_config.js can have your custom config settings.
Refer here to know about all available editor options.
Fetching the Text from CKEditor
Since, it is an ASP.Net textbox control it can be accessed by regular Text property. By default, ASP.Net will not allow HTML inputs to be posted to server in order to prevent the cross site scripting attach. You will get the following error,
A potentially dangerous Request.Form value was detected from the client (TextBox1="").
You need to set ValidateRequest="false" in the Page directive to prevent this error.
To fetch the text from javascript,
function GetText() {
alert(CKEDITOR.instances.TextBox1.getData());
}
OR
function GetText() {
alert(CKEDITOR.instances["TextBox1"].getData());
}
Refer here to know more above editor instance.
Working with Events
By default, CKEditor exposes number of events that can be hooked from the clientside. Refer the events section here.
Syntax
CKEDITOR.instances["TextBox1"].on("eventname", event method);
Example
CKEDITOR.instances["TextBox1"].on("instanceReady", InstanceReadyEvent);
function InstanceReadyEvent() {
this.document.on("keyup", function() {
// var editor = CKEDITOR.instances.TextBox1;
var editor = CKEDITOR.instances["TextBox1"];
//Your code Goes here
var tex = editor.getData();
});
}
The above event attaches an onkeyup event on the editor.
source: http://www.codedigest.com/Articles/ASPNET/315_Using_CKEditor_3x[aka_FCKeditor]_in_ASPNet.aspx
