How to use fckeditor in asp.net
1. Download Fckeditor source code from the following link:
2. Create new/ Open existing web project/ website:
3. Copy Fckeditor source code folder and paste it to website root directory:
4. Copy Fckeditor FredCK.FCKeditorV2.dll file from source code and paste it to website Bin folder:
5. You have to register FCKEditor to use it in your page. There are two ways to register it.
a) Manual: The following script will register it. You have add this script in every page where you want to use FCKEditor.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="FCKEditorDemo._Default" %>
<%@ Register TagPrefix="FCKeditorV2" Namespace="FredCK.FCKeditorV2"
Assembly="FredCK.FCKeditorV2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>FCKEditor Demo : Amit Shah</title>
</head>
<body>
<form id="form1" runat="server">
<div align="center" width="70%">
<hr />
<h1>
FCKEditor Demo : By Amit Shah</h1>
<hr />
</div>
<div>
<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server"
BasePath="~/fckeditor/" Height="300px"
Width="70%">
</FCKeditorV2:FCKeditor>
</div>
</div>
</form>
</body>
</html>
b) From Toolbar: You can otherwise, you can browse FCKEditor by right clicking on Toolbar >> Choose Items. A dialog box will appear as shown in the following image. Select .NET Framework Components >> Click on Browse button located at right hand bottom. Choose the .dll of FCKEditor from the bin directory of your application. An item called FCKEditor will be added to your Toolbar. Now you are ready to drag and drop editor in your page. If you place editor in your page, it will also add same code in your web page as we have done in the manual method.
6. Run website, you can see the FCKEditor in your browser with default theme and default English language.
How to Apply Theme?
FCKEditor has a great theming feature. User can apply the theme in two ways. One way is dynamically and another statically. The site of FCKEditor provides 3 themes to be downloaded. There are many third party open source themes available to download. I have shared few themes with this article, which you can find in the demo project attached with this article.
Now, how can we assign default theme and apply dynamic theme?
The answer is here: First of all, you can set default theme from fckconfig.js placed in FCKEditor folder, look at the below code:
The answer is here: First of all, you can set default theme from fckconfig.js placed in FCKEditor folder, look at the below code:
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/Default/';
//FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/';
//FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/SilverNarrow/';
//FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;
//FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2007/';
//FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/ChroomDeluxe/';
//FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/Aluminum/';
//FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/Obi-D_V1/';
//FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/Office2003Blue/';
You can also set the language from .aspx /html /php page where you have declared Fckeditor.
Just set the
Just set the
SkinPath Property.
Now run the application. You can view the office2003 theme in Fckeditor as you have set in the above page.
How to Apply Language?
Fckeditor provides a great multiple language support feature. User is able to change the language dynamically or set default language as per website language.
Fckeditor provides 56 languages that you can use as per your requirement.
Fckeditor provides 56 languages that you can use as per your requirement.
Now, how can we assign default language or apply dynamic language?
The answer is here:
First of all, you can set default language from fckconfig.js, look at the below code:
The answer is here:
First of all, you can set default language from fckconfig.js, look at the below code:
FCKConfig.AutoDetectLanguage = false ;
FCKConfig.DefaultLanguage = 'en' ;
FCKConfig.ContentLangDirection = 'ltr' ;
You can also set the language from .aspx /.html /.php page where you have declare Fckeditor.
Just set the
Just set the
DefaultLanguage Property.
Now run the application. You can view the Arabic language in Fckeditor as you have set in the above page.
No comments:
Post a Comment