Tuesday, August 03, 2010ckEditor and ASP.Net
ckEditor is a quick-loading, feature-packed, and customizable HTML editor that works great as a WYSIWYG editor. However, in order for the control to work well with ASP.Net pages, you need to make some customizations.
It is fairly easy to implement on a website. Download the installation package from the ckEditor website. Copy the included files to your website base directory. Then include a script reference to jQuery and ckEditor.js on the page. Finally, add the following function to your page to create an instance of the ckEditor on all textboxes with a class of ckEditor:
-
<script type="text/javascript">
$("ckeditor").each(function() {
CKEDITOR.replace(this);
});
</script>
Validate Request
By default, ckEditor does not encode it’s html output. This can cause a problem on ASP.Net pages because the form controls are checked for HTML after it is submitted. If any HTML is found, the user is directed to an error page of “A potentially dangerous Request…”.
One way to solve this is to set ValidateRequest=”false”. However, this turns off validation for all controls on the page and is not the best solution.
The second and best solution is to configure ckEditor to encode the output so that it passes validation. This is done by adding one line to the configuration file for ckEditor (config.js by default):
-
config.htmlEncodeOutput = true;
Required Field Validation
If a RequiredFieldValidator control attempts to verify an instance of the ckEditor it will fail client script validation the first time, but submit successfully the second time. The solution for this is a little more complicated.
-
Setup a JavaScript function on the page underneath the call to create the editor that updates the textarea before validation is run:
function UpdateContent() {
for (instance in CKEDITOR.instances)
CKEDITOR.instances[instance].updateElement();
}
-
2) Add the function to run once the submit button is clicked:
OnClientClick="javascript:UpdateContent()"