I’ve written in a post a few months ago about a javascript-based lightweight WYSIWYG rich-text editor that can be used in web pages called FCKEditor. The developers have upgraded it and called it CKEditor. I tried to use it two days ago and up until now, I still cannot use it for my specific purpose. I am near the end of a project with this WYSIWYG editor as the second-to-the-last-module. I am convinced that I have encountered a bug and have yet to find a solution. I will blog about this for documentation purposes.
CKEditor + AJAX + UpdatePanel + Multiview = Problem
The bug I am encountering now appears only on when the conditions are right. I created a new AJAX-enabled website project in Visual Studio 2008 with C# as my code-behind. I downloaded the latest (as of time of writing) version of CKEditor 3.5.2 and CKEditor.Net 3.5.2 control from their website.
From Solution Explorer in VS2008, I added a BIN folder and placed the `CKEditor.NET.dll` (from CKEditor.Net 3.5.2) there. The ckeditor folder that contains the core files (from CKEditor 3.5.2) was also placed in the root of the website. I opened the Web.Config file and added the following line to the node:
<add tagPrefix="CKEditor" namespace="CKEditor.NET" assembly="CKEditor.NET" />
Then, I opened Default.aspx and add the following line:
<CKEditor:CKEditorControl runat="server" ID="tbContent1" />
So that the whole Default.aspx would look like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
</form>
</body>
</html>
If you try to view it by debugging it (hit CTRL+F5 while on VS2008), you should see the CKEditor.Net Control working as intended.
Now if we put the CKEditor.Net control inside an update panel, it would still work. If the update panel contains a multiview control with only one view panel and the CKEditor.Net control is inside the only view panel, it would still also work. But once the multiview control has two or more view panels and the CKEditor.Net control is on the second view panel (or any panel for that matter, as long as it is not on the default active view index of the multiview) that’s where things start to get ugly.
We can change the code of Default.aspx to:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
</form>
</body>
</html>
Notice the button on the first view panel. We’ll be using that to switch the active view index of the multiview control to the second view panel. We need to handle the OnClick event of that button so we do the whole code-behind (Default.aspx.cs) file like so:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btn_Click(object sender, EventArgs e)
{
//MultiView1.ActiveViewIndex = 1;
}
}
Once we debug it again (CTRL+F5 while on VS2008), we get a button on the initial page load since the multiview’s active view index property is set to zero (ActiveViewIndex=”0″). If we click on the button, the OnClick event of the button sets the multiview’s active view index to 1 (where the CKEditor.Net contol is at). This produces a javascript error and the CKEditor.Net control is rendered as a plain textbox.
Line: 5 Error: Sys.ScriptLoadFailedException: The script '/CKEditorMultiview/ckeditor/ckeditor.js?t=B1GG4Z6' could not be loaded.
It happens on Internet Explorer 8.0.7601.17514, Google Chrome 10.0.648.151, FireFox 3.6.13 (although the javascript error does not show on GC and FF – might be a in-browser error config thing – the CKEditor.Net being rendered as a plain textbox is present on all three major browsers).
As I’ve said at the start of this post, I have not yet found a solution to this problem. If you have any information on how to fix this particular problem, kindly drop me a line at the comments. Thanks!
andy.ph 