CKEditor Integration with ALUI/Webcenter Portal
Basic Information:
- CKEditor is a text editor to be used inside web pages. It's a WYSIWYG editor, which means that the text being edited on it looks as similar as possible to the results users have when publishing it. It brings to the web common editing features found on desktop editing applications like Microsoft Word and OpenOffice.
o This framework is build using Javascript, where you need to mention the base path to the application, which will create a CKEditor instance.
o When you deploy remote application developed using ASP.Net on ALUI/Webcenter portal using .net accelerator, CKEditor does not work as mentioned in one of the demo (CKEditor in ASP.Net applications). Main reason for this is .net accelerator changes javascript call and gateway url.
Details:
- To overcome this limitation you need to use javascript running on individual page and create the CKEditor.
- On load of the page CKEditor can be created around textbox/textarea.
- When you create CKEditor instance using JS script it will not able the entered text in view state.
- To overcome this limitation on submit you need to call another javascript function and store entered text in to hidden variable.
CKEditor User Control Specification(RTE.ascx):
You need to download ckeditor latest source code. (download)
RTE.ascx:
<asp:HiddenField ID="hdnContent" runat="server" />
<asp:HiddenField ID="hdnControlID" runat="server" />
<asp:TextBox ID="txtRTEEditor" runat="server" TextMode="multiLine"></asp:TextBox>
RTE.ascx.cs
public partial class RTE : System.Web.UI.UserControl
{
public String RTEContent { get { return hdnContent.Value; } set { txtRTEEditor.Text = value; hdnContent.Value = value; } }
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
txtRTEEditor.Text = hdnContent.Value;
}
else
{
hdnControlID.Value = txtRTEEditor.ClientID + "|" + hdnContent.ClientID;
}
}
}
JS Specification on main page where you need CKEditor (Default.aspx):
Default.aspx
How to include user control:
<%@ register tagprefix="uc" tagname="RTE" src="~/UserControls/common/RTE.ascx" %>
<div class="NewAppDivClass" id="NewAppDiv" runat="server">
<uc:RTE ID="TopicRTE" runat="server" />
</div>
Include ckeditor js file.
<link type="text/css" href="css/editsite.css" rel="StyleSheet" lang="en" />
Following js function should be called on load of page load.
window.onload = LoadRTE$$PortletID$$();
· Since this function needs minimum time to create instance we should remove the pageload call using setTimeout function.(using 100 mili sec as timeout time)
setTimout(“LoadRTE$$PortletID$$()”,100)
//Js function called on load of the page.
function LoadRTE$$PortletID$$()
{
var pointer=0;
for(var i=0;i<document.form1_$$PortletID$$.elements.length;i++)
{
var idd = document.form1_$$PortletID$$.elements[i].id;
if (idd.indexOf("txtRTEEditor")>=0)
{
var instance = CKEDITOR.instances[idd];
if(instance)
{
CKEDITOR.remove(instance);
}
if (pointer==0)
CKEDITOR.replace(idd,
{
toolbar : [ ['Source','-', 'PasteFromWord','SpellChecker','Subscript','Superscript','SpecialChar'],],
on : {
instanceReady : function( ev )
{
this.focus();
}
}
}
);
else
CKEDITOR.replace(idd,
{
toolbar : [ ['Source','-','PasteFromWord','SpellChecker','Subscript','Superscript','SpecialChar'],]
}
);
pointer++;
}
}
}
//JS function called on submit to capture the CKEditor text value
function GetRTE$$PortletID$$()
{
for(var i=0;i<document.form1_$$PortletID$$.elements.length;i++)
{
if (document.form1_$$PortletID$$.elements[i].id.indexOf("hdnControlID")>=0)
{
if(document.form1_$$PortletID$$.elements[i].value != '') {
var temp = document.form1_$$PortletID$$.elements[i].value;
var ctl1_id=temp.substring(0,temp.indexOf("|"));
var ctl2_id=temp.substring(temp.indexOf("|")+1,temp.length);
document.getElementById(ctl2_id).value=CKEDITOR.instances[ctl1_id].getData();
}
}
}
}
Default.aspx.cs
I would advice to call div onload event from Defalut.aspx.cs file. Like:
NewAppDiv.Attributes.Add("onload", "javascript:LoadRTE"+getPortletID()+"();");
Response.Write("<script>setTimeout(\"LoadRTE" + getPortletID() + "()\",100)</script>");
