Asp.net CKeditor+CKfinder(html編輯器)

来源：互联网发布：儿童编程入门pdf 编辑：程序博客网时间：2024/05/16 11:17

一、下載元件

FCKeditor 從 3.0版開始就改名為CKeditor

也把上傳元件分開成為 CKfinder

現在要介紹的版本是 CKeditor 3.5.3 for Asp.net 跟 CKfinder 2.0.2.1 (目前是DEMO版)

都可以到官網下載 http://ckeditor.com/

下載完後

二、配置元件

1、添加對應的文件

右擊網站，加入參考。依次添加兩個文件夾中“\bin\Debug” 中的dll文件——CKEditor.NET.dll、CKFinder.dll

2、將文件夾“ckeditor” 和文件夾"ckfinder"，添加到網站的根目錄下

3、修改配置文件

CKEditor配置：打開“ckeditor\config.js”文件，根據需要添加配置信息

CKEDITOR.editorConfig = function(config)
{

config.skin = 'v2'; //選擇面版，源文件在“ckeditor\skins\”中
config.resize_enabled = false; //取消拖曳大小
// 基礎工具欄
// config.toolbar = "Basic";
// 全能工具欄
// config.toolbar = "Full";
// 自定義工具欄
config.toolbar =
[
['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'ShowBlocks'], '/',
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], '/',
['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', '-', 'About']
];

//在CKEditor中使用CKFinder，注意對應文件的路徑

config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; //不要寫成"~/ckfinder/..."或者"/ckfinder/..."config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';config.filebrowserWindowWidth = '800' ;  //“瀏覽服務器”彈出框的size設置config.filebrowserWindowHeight = '500' ; }config.htmlEncodeOutput = true;

CKFinder的配置：

打開“ckfinder\”下的用戶控件config.ascx，更改其BaseUrl路徑：

BaseUrl = "~/ckfinder/userfiles/" ; //or BaseUrl = "ckfinder/userfiles/";

BaseDir = "";

BaseUrl使用完整網域路徑；BaseDir使用完整實體路徑；

並且更改：

public override bool CheckAuthentication() {        //return false;       return true ;

這樣配置就算完成了

三、在頁面應用CKEditor控件

1、在開頭宣告：

<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

2、然後，在<body>中需要放置該控件的位置加入如下代碼：

<CKEditor:CKEditorControl ID="CKEditor1" runat="server" Height="350" Width="600">  </CKEditor:CKEditorControl>

去掉CKfinder demo提示

在ckfinder目錄下，找到ckfinder.js ，修改

1、右下角提示：

找到 if(!t)this.dV().aC(0).appendHtml(p); 删除

2、文件列表上方提示：

查到 if(N.files.length)N.fa=G;Q=1; 删除