ASP.NET CKEditor和CKFinder配置，ckeditorckfinder

ASP.NET CKEditor和CKFinder配置，ckeditorckfinder

第一次搞這個真的搞的頭大，好歹最後也學會了。下面分享一下步驟

第一步：

官網下載CKEditor最新的和CKFinder最新的 都是Net版本的

 

第二步：

解壓2個複製檔案到網站下面，最好平級

 

第三步，記得引用下ckfinder 下面的dll

 

第四步：

配置ckEdit的工具條

在ckedit 下面的config.js 裡面  我的是簡單的工具列

config.language = 'zh-cn';
    config.uiColor = '#DBEEF5';
    config.toolbar = 'Full';
    config.height = 400;
    config.resize_enabled = false;

config.toolbar_Full = [
        ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript', 'SpecialChar'],
        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],
        ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
        ['Format', 'FontSize'],
        ['TextColor', 'BGColor'],
        ['Image']
    ];

對應圖片

 

下面這是所有的工具列配置自己選

config.toolbar_Full = [
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor']
];

 

 

第五步與ckfinder整合 

還是在ckeditr裡面config裡面配置

    // 在 CKEditor 中整合 CKFinder，注意 ckfinder 的直接選取要正確。
    config.filebrowserBrowseUrl = location.hash + '/admin/ckfinder/ckfinder.html';
    config.filebrowserImageBrowseUrl = location.hash + '/admin/ckfinder/ckfinder.html?Type=Images';
    config.filebrowserUploadUrl = location.hash + '/admin/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
    config.filebrowserImageUploadUrl = location.hash + '/admin/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
    config.filebrowserWindowWidth = '800';
    config.filebrowserWindowHeight = '500';

config.removeDialogTabs = 'image:advanced;link:advanced';

 

 

然後配置ckfinder 在 裡面找到config.ascx 把這個方法返回為true 允許上傳

以及設定圖片上傳的路徑

 

最後使用

引用2個js

<script src="ckeditor/ckeditor.js" type="text/javascript"></script>
    <script src="ckfinder/ckfinder.js" type="text/javascript"></script>

控制項上加class="ckeditor 就OK了

<asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox>

ASPNET下配置最新的CKEditor與CKFinder

ckeditor 3.3.1配置 一.ckeditor 3.3.1精簡
1、刪除_samples和_source檔案夾,分別為樣本檔案和未壓縮來源程式
2、刪除lang檔案夾下除zh-cn.js,en.js下的所有語言檔案.根據需要刪除
3、刪除根目錄下的changes.html(更新列表),install.html(安裝指向),license.html(使用許可).
4、刪除skins目錄下不需要的皮膚.我一般用V2(簡單.樸素) //如果只保留V2則必須在config.js中指定皮膚
5、刪除根目錄下的ckeditor.asp、ckeditor.php、ckeditor_php4.php、ckeditor_php5.php(asp和php版的檔案).

二.ckeditor 3.3.1相關檔案配置路徑
1、/ckeditor.js 核心檔案,調用需載入
2、/config.js 設定檔,參數配置均在此完成

三.ckeditor應用(.net環境)
1、引用js指令碼
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
2、添加TextBox控制項，class設定為ckeditor
<asp:TextBox id="txtContent" class="ckeditor" TextMode="MultiLine" Text='' runat="server" />

四.ckeditor配置(config.js設定檔)
詳細api參數見: docs.cksource.com/ckeditor_api/,我的預設配置：
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';

// Define changes to default configuration here. For example:
config.language = 'zh-cn'; //配置語言
//config.uiColor = '#AADC6E'; //背景顏色
//config.width = 650; //寬度
config.height = 400; //高度
config.skin = &#3......餘下全文>>
 
ckeditor與ckfinder怎設定？aspnet設定我使用的vs2008，

ckeditor 裡的config.js 設定

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.language = 'zh-cn';
config.skin = 'v2';
config.filebrowserBrowseUrl = location.hash + '/admin/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = location.hash + '/admin/ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = location.hash + '/admin/ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = location.hash + '/admin/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = location.hash + '/admin/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = location.hash + '/admin/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
// config.filebrowserWindowWidth = '800';
// config.filebrowserWindowHeight = '500';

};