Mar 17, 2010, 5:32 AM
FCKEditor with Coolite
Hi all,
I posted a simple example for those interested in using FCKEditor as alternative to Editor control.
I used FCKEditor 2.6.6. You need the 'fckeditor' folder under the root of your project.
Tested with V1.0 only.
Note: ValidateRequest is set to false in order not to get Security Exception.
Link: http://ckeditor.com/
License: http://ckeditor.com/license
Matteo
I posted a simple example for those interested in using FCKEditor as alternative to Editor control.
I used FCKEditor 2.6.6. You need the 'fckeditor' folder under the root of your project.
Tested with V1.0 only.
Note: ValidateRequest is set to false in order not to get Security Exception.
Link: http://ckeditor.com/
License: http://ckeditor.com/license
Matteo
<%@ Page Language="C#" ValidateRequest="false" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button1_Click(object sender, DirectEventArgs e)
{
this.lbName.Text = this.TE_Name.Text;
this.lbName.AddScript("highlightResult(lbName);");
this.lbSurname.Text = this.TE_Surname.Text;
this.lbSurname.AddScript("highlightResult(lbSurname);");
this.lbEditor.Text = e.ExtraParams["fckParameter"].ToString();
this.lbEditor.AddScript("highlightResult(lbEditor);");
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
//FCKEditor Js API
var getFckText = function() {
var oEditor = FCKeditorAPI.GetInstance('fckHtmlEditor');
return oEditor.GetHTML(true);
}
function highlightResult(elm) {
elm.getEl().highlight("FFF36F", {
attr: "background-color",
endColor: "ffffff",
easing: 'easeIn',
duration: 1
});
}
</script>
<style type="text/css"> .cssContent{padding:5px;} </style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
<Listeners>
<DocumentReady Handler="var oFCKeditor = new FCKeditor('fckHtmlEditor');
oFCKeditor.BasePath = '/fckeditor/';
oFCKeditor.Width = '685px';
oFCKeditor.Skin = 'office2003';
oFCKeditor.Height = '330px';
oFCKeditor.ReplaceTextarea();" />
</Listeners>
</ext:ResourceManager>
<h2>Result</h2>
<ext:Label ID="lbName" Text="name..." runat="server">
</ext:Label><br />
<ext:Label ID="lbSurname" Text="surname..." runat="server">
</ext:Label><br />
<ext:Label ID="lbEditor" Text="editor..." runat="server">
</ext:Label>
<ext:Panel ID="MyPanel" Width="700px" runat="server" Collapsible="false" Height="450" Icon="PageEdit"
Title="Edit Content" BodyCssClass="cssContent">
<Content>
<ext:FormLayout runat="server" ID="frmLayout1">
<Anchors>
<ext:Anchor>
<ext:TextField ID="TE_Name" runat="server" FieldLabel="Name"></ext:TextField>
</ext:Anchor>
<ext:Anchor>
<ext:TextField ID="TE_Surname" runat="server" FieldLabel="Surname"></ext:TextField>
</ext:Anchor>
</Anchors>
</ext:FormLayout>
<ext:TextArea ID="fckHtmlEditor" Name="fckHtmlEditor" runat="server">
</ext:TextArea>
</Content>
<BottomBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Icon="Disk" Text="SUBMIT FORM">
<DirectEvents>
<Click OnEvent="Button1_Click">
<ExtraParams>
<ext:Parameter Name="fckParameter" Mode="Raw" Value="getFckText()" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:ToolbarSeparator />
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</form>
</body>
</html>
