.net下的富文本编辑器FCKeditor的配置方法(图)原创
.net下的富文本編輯器FCKeditor的配置方法(圖)原創
FCKeditor是一款開源的富文本編輯器,幾乎支持所有流行的Web開發語言,版本穩定,用戶多,可配置性好。
以前做Java和php的時候就一直用FCKeditor,現在做.net了繼續用。呵呵。
我用在對文章的評論頁面,所以只需要少部分功能。先看看我做好的效果:
在看看官方完整功能:
?
?
第一步:軟件下載和安裝
下載地址:http://www.fckeditor.net/download
需要下載FCKeditor.Net和FCKeditor兩個文件,FCKeditor.Net本身其實只是在.net中配置FCKeditor用的,本身不包含實質內容。
我下載的是:FCKeditor.Net_2.6.3和FCKeditor_2.6.5兩文件。
1. 對于FCKeditor_2.6.5.zip文件
解壓縮后,將得到的fckeditor文件夾復制到網站的目錄下面。我是放在我的樣式Style下的JS目錄如圖:
2.對于FCKeditor.Net_2.6.3
解壓 FCKeditor.Net_2.6.3,該目錄中包括FCKeditor.Net_2.6.3的全部代碼,但是我們只要使用它編譯好的部分。
■找到其目錄下的\bin\Release目錄中的FredCK.FCKeditorV2.dll文件。把FredCK.FCKeditorV2.dll添加到bin目錄下。如圖:
■在VS2005/2008的工具箱上新建一個名叫FCKEditor的Tab,然后在里面點右鍵,選擇Choose Item,定位到解壓FCKEditor.Net后生成的\bin\Release\2.0目錄下的FredCK.FCKEditorV2.dll。該Tab下就會生成一個FCKEditor的.net組件。在vs的Design模式下把該組件拖放到界面上。
第二步:配置FCKeditor
進入FCKeditor文件夾,編輯 fckconfig.js 文件,如下:
1、指定編輯器應用的編程環境,修改
var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php
改為
var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | php
2、配置語言包。有英文、繁體中文等,這里我們使用簡體中文。
修改
FCKConfig.DefaultLanguage = 'en' ;
為
FCKConfig.DefaultLanguage = 'zh-cn' ;
3、配置皮膚。有default、office2003、silver風格等,這里我們可以使用默認。
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;
4、在編輯器域內可以使用Tab鍵。(1為是,0為否)
FCKConfig.TabSpaces = 0 ; 改為FCKConfig.TabSpaces = 1 ;
5、加上幾種我們常用的字體的方法
修改
FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
為
FCKConfig.FontNames = '宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'
6、定制工具欄
如果你的編輯器用在網站前臺的話,那就不得不考慮安全了,在前臺千萬不要使用Default的toolbar,要么自定義一下功能,要么就用系統已經定義好的Basic,也就是基本的toolbar,
修改
FCKConfig.ToolbarSets["Basic"] = [
??? ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
為
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Unlink','-','Style','FontSize','TextColor','BGColor','-','Smiley','SpecialChar','Replace','Preview']
] ;
7、配置WebConfig
在<appSettings>節點添加,如下所示:
如果你用的是默認的上傳功能,則
? <add key="FCKeditor:BasePath" value="~/fckeditor/"/>
? <add key="FCKeditor:UserFilesPath" value="/網站名稱/UploadFiles/"/>
8.如需使用上傳圖片功能還需配置
editor/filemanager/connectors/aspx/config.ascx修改CheckAuthentication()方法,返回true
注意看這里的注釋:意思是說不要簡單的修改為true,而應該在這里加一些權限Check的判斷。否則的話所有人都可以上傳圖片。
private bool CheckAuthentication()
{
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
//
//??????? return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
//
// ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
// user logs in your system.
??????? return true;
}
不過不修改的話,會彈出一個阻止框,顯示"this connector is disabled Please check the"editor/filemanager/connectors/aspx/config.aspx"
9. 其它次要配置(不影響使用)
* 可以把fckeditor目錄及其子目錄下所有下劃下開頭的范例、源文件刪掉。
* 可以在fckeditor目錄下只保留fckconfig.js、fckeditor.js和幾個xml文件,其余全部刪掉。
* fckeditor目錄下的editor目錄下有個filemanager目錄,把該目錄下的borswer\default\connectors目錄中除aspx目錄以外的全部目錄刪掉。
* 可以把editor\lang目錄下除zh-cn.js、en.js、zh.js之外的全部刪掉。
第三步:使用FCKeditor編輯器
注意看這里紅色的部分,是在使用Fckeditor增加的:
AutoEventWireup="true"是增加一些特殊事件的關聯。
validateRequest="false"是因為Fckeditor框內的提交的內容是HTML,所以要去掉驗證提交請求的功能。
<%@ Page Language="C#" AutoEventWireup="true"
? CodeFile="Default.aspx.cs" Inherits="_Default" validateRequest="false" %>
<!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>無標題頁</title>
</head>
<body>
??? <form id="form1" runat="server">
??? <div>
??????? <FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server">
??????? </FCKeditorV2:FCKeditor>
??????? </div>
??? </form>
</body>
</html>
后臺獲取編輯器內填寫的內容:讀取FCKeditor1控件的Value屬性值即可。
.net下的富文本編輯器FCKeditor的配置方法(圖)原創
轉載于:https://www.cnblogs.com/Mblog/archive/2009/12/18/1626966.html
總結
以上是生活随笔為你收集整理的.net下的富文本编辑器FCKeditor的配置方法(图)原创的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 滴滴多少钱一公里啊?
- 下一篇: windows xp远程桌面没有反应