CKEditor和CKFinder在ASP.NET项目中安装，配置和使用详解

最新推荐文章于 2023-08-12 16:12:39 发布

zqkei

最新推荐文章于 2023-08-12 16:12:39 发布

阅读量2.4k

点赞数

分类专栏： ASP.NET 文章标签： asp.net ckeditor ckfinder 编辑器 plugins

本文链接：https://blog.csdn.net/zqkei/article/details/22868963

版权

本文详细介绍了如何在ASP.NET项目中安装、配置和使用CKEditor与CKFinder，这两个强大的在线编辑器和文件管理器。通过简单的步骤，包括下载、安装、添加引用和配置，使得在网页上实现所见即所得的文字编辑和文件管理。CKEditor的配置主要在config.js文件中，而CKFinder的配置主要涉及config.ascx文件。此外，文章还分享了一些实用的配置技巧和总结。

摘要由CSDN通过智能技术生成

一、概述

在CSDN潜水快两年了，之前都只是在上面寻找所需答案或者看一些相关的新闻。在这上面，的确可以找到很多你想要的东西，同是还可以学习和了解一些较新的软件使用文档和科技发展的一些新方向。一想到大学快毕业了，而自己却没有做出些什么贡献的事情来，心里不时的感觉有点懊悔之意。因此也想到在CSDN上写一些平时在学习和编程时的一些理解和总结，希望能够在这个平台上和广大的趣味相投的朋友一起共学习，共进步。有什么写得不好和不恰之处，还望各位读者指出纠正，我会倍加感谢。另外，除此之意，也有一些自己私人的想法，我也可以通过这种方式，记录我平时所学到的一些东西并通过文字保留下来，供以后查阅之用。好啦，接下来就是我要写的重点内容了

今天，我要介绍的是之前在项目中用到的一个很强大的在线网页编辑器————FCKEditor，既CKEditor。FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器，其名称中的“FCK”是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写。在09年发布更新到3.0后，改名为CKEditor，CK意指"Content and Knowledge"。CKEditor志于轻量化，不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。在此，我主要介绍他在ASP.NET的安装，配置及使用。

一般，CKEditor是和CKFinder一起使用，CKFinder是一个强大而易于使用的Web浏览器Ajax文件管理器。其界面简单直观，文件安全上传和快速反应受到广大网络编程者的青睐。我们先从CKEditor和CKFinder的官方网站下载文件压缩包。地址：
CKEditor：http://ckeditor.com/download
CKFinder:http://cksource.com/ckfinder/download
因为我今天讲的是这两个编辑器在ASP.NET的应用，因此只需下载用于ASP.NET的压缩包，我下载的版本分别是ckeditor_aspnet_3.6.4和ckfinder_aspnet_2.4。

二、安装步骤

1．将CKEditor和CKFinder减压出来，把ckeditor_aspnet_3.6.4/_Samples/ckeditor目录下的ckeditor文件夹拷在WEB的根目录下，同样，将ckfinder_aspnet_2.4目录下的ckfinder拷在WEB的根目录下。CKFinder目录里的_samples和_source文件夹可以删除，其主要是CKFinder的源代码和演示文档，项目中用不到。

2．把ckeditor_aspnet_3.6.4/bin/Release目录下的CKEditor.NET.dll和ckfinder_aspnet_2.4\ckfinder\bin\Release目录下的CKFinder.dll拷贝在项目下放DLL文件的文件夹里，一般是在bin目录下。然后右键点击“引用“，添加引用，在浏览选项卡下点击浏览，找到那两个DLL文件，将其添加进来。

3．在工具箱常规选项卡上右键，选择”选择项“，在.NET Framework选项卡中点击浏览，把CKEditor.NET.dll选择，确定，这样在常规选项卡里就可以看见多出个CKEditorControl控件。

4．在页面<head>中引入ckeditor核心文件ckeditor.js，并将CKEditorControl控件拖在页面中。这时就可以看到在浏览器中看到ckeditor编辑器。

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

三、配置编辑器

1．ckeditor的配置都集中在 ckeditor/config.js文件中，当然，你也可以直接在控件的属性栏中更改和配置相应的属性。下面是一些常用的配置参数：

 // 界面语言，默认为 'en'
    config.language = 'zh-cn';

　　// 设置宽高
    config.width = 400;
    config.height = 400;

　　// 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'
    config.skin = 'v2';

　　// 背景颜色
    config.uiColor = '#FFF';

　　//工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js
    config.toolbar = 'Basic';
    config.toolbar = 'Full';

    这将配合：
    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','I