CKEditor与CKFinder的配置（ASP.NET环境）

转载于 2016-02-18 16:17:25 发布 · 2.6k 阅读

文章标签：

#ckeditor

CKEditor 专栏收录该内容

2 篇文章

订阅专栏

（摘取自：http://www.cnblogs.com/rainman/p/3223242.html）

安装和部署

1. CKEditor

下载完成后解压，将整个“ckeditor”放在网站的任意目录下

2. CKFinder

下载好ASP.NET版本的CKFinder后并解压，将整个“CKFinder”放在网站的任意目录下

简单配置

CKEditor和CKFinder配置项比较多，也十分细。本文仅是简单的配置保证能够正常使用。

1. CKEditor

文件： /ckeditor/config.js

CKEDITOR.editorConfig = function( config ) {
    config.language = 'zh-cn';  // 中文
    config.tabSpaces = 4;       // 当用户键入TAB时，编辑器走过的空格数，当值为0时，焦点将移出编辑框
    config.toolbar = "Custom_RainMan";    // 工具条配置
    config.toolbar_Custom_RainMan = [
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord'],
        ['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'],
        ['Maximize', 'ShowBlocks','Templates','Source']
    ];
};

2. CKFinder

① 更改CheckAuthentication()的返回值

CheckAuthentication()返回True表示可以上传，返回False则表示不能上传，具体能否上传需要开发者自己判断，本文仅简单更改为True（允许上传）。

文件： ckfinder/config.ascx

/**
    * This function must check the user session to be sure that he/she is
    * authorized to upload and access files using CKFinder.
*/
public 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 on your system.

    return false;
}

② 更改License和存储目录

如果没有License则不用更改，CKFinder仍然可以正常使用，不过相关页面中有少部分广告。
CKFinder默认的文件存储目录为”/ckfinder/userfiles/”，可以根据项目需求设置不同存储目录。

文件： ckfinder/config.ascx

/**
    * All configuration settings must be defined here.
*/
public override void SetConfig()
{
    // Paste your license name and key here. If left blank, CKFinder will
    // be fully functional, in Demo Mode.
    LicenseName = "";
    LicenseKey = "";

    // The base URL used to reach files in CKFinder through the browser.
    BaseUrl = "/ckfinder/userfiles/";
    ...
}

③ 删除“/ckfinder/_samples”和“/ckfinder/_source”两个文件夹

删除“/ckfinder/_samples”和“/ckfinder/_source”两个文件夹，若不删除则会出现“重复的”AssemblyCompany”特性”的错误。

④ 添加CKFinder引用

将“/PlugIns/ckfinder/bin/Release/CKFinder.dll”添加到项目引用当中

示例

创建编辑也比较简单，引入两JS文件，并使用JavaScript实例化即可，具体如下。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>Editor</title>
  <script type="text/javascript" src="/PlugIns/ckeditor/ckeditor.js"></script>
  <script type="text/javascript" src="/PlugIns/ckfinder/ckfinder.js"></script>
</head>
<body>
  <textarea id ="post_content" name="post_content"><p>编辑器内容</p></textarea>
  <script type="text/javascript">
      var editor = CKEDITOR.replace('post_content');          // 创建编辑器
      CKFinder.setupCKEditor(editor, '/PlugIns/ckfinder/');   // 为编辑器绑定"上传控件"
  </script>
</body>
</html>