PDA

View Full Version : FCKEditor with Coolite



methode
Mar 17, 2010, 5:32 AM
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





<%@ 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>

vs.mukesh
Mar 28, 2011, 10:55 AM
Hi

Really great post.. thanks for sharing your effort... i struggled with ext controls with fckeditor now i easily fixed my issue...

Regards

Mukesh Selvaraj

nirajrdave
Aug 18, 2011, 8:45 AM
Hi,

Your example running good for single FCK Editor per page but
in case if we have to put more than one FCK Editor and
it render on page dynamically then how it is possible?