vs2010 asp.net项目中集成ckeditor和ckfinder最简单图文教程

asp.net 使用ckeditor作为富文本编辑器，ckfinder作为文件上传工具的最简单实例

折腾了好久终于搞定，写下来做个笔记。

1.使用环境：vs2010，ckeditor_4.4.7_standard，ckfinder_aspnet_2.4.1

2.ckeditor下载地址：http://ckeditor.com/download

          

3.ckfinder下载地址：  http://cksource.com/ckfinder/download

            

第一步，创建 “asp.net空web应用程序”：

          

第二步，解压下载的两个压缩文件，得到两个文件夹，ckfinder和ckeditor，在项目中添加这两个文件夹，并将所有的文件拷贝到对应文件夹。

解决方案目录：

第三步：添加一个web窗体，并写入如下代码：（关键步骤）

在head中加入：

<script src="ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="ckfinder/ckfinder.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function () {
            // 创建编辑器
            var editor = CKEDITOR.replace('editor01');
            // 为编辑器绑定"上传控件"
            CKFinder.setupCKEditor(editor, '/ckfinder/');
        };
     </script>

在body中加入：

<textarea rows="30" cols="50" ID="editor01" runat="server">Hello World!</textarea>

        

第四步，运行这个页面：

        

第五步，修改配置，以下步骤都是必须的，不然，上传文件过程会出问题

a.打开ckfinder文件夹下的config.ascxconfig.ascx文件，将CheckAuthentication()函数的返回值改为true

b.为工程添加对CKFinder.dll引用，dll文件的路径为：ckfinder/bin/release/CKFinder.dll

c.修改一下web.config文件，添加两个节点，不添加可能会导致页面回发出错

<configuration>
    <system.web>
      <compilation debug="true" targetFramework="4.0" />
      <!--由于在.net中，
      Request时出现有HTML或Javascript等字符串时，系统会认为是危险性值。
      立马报出“从客户端中检测到有潜在危险的Request.Form值”这样的错误。 -->
      <httpRuntime requestValidationMode="2.0" ></httpRuntime>
      <pages validateRequest="false" />
    </system.web>
</configuration>

第六步，完善一下。

不知道什么原因，我们下载的ckeditor都是standard版本，要下载full版本，请使用以下链接：

http://download.cksource.com/CKEditor/CKEditor/CKEditor 4.4.6/ckeditor_4.4.6_full.zip

参考：http://bbs.youkuaiyun.com/topics/390951883

下载完后替换掉工程中的ckeditor目录，就可以得到具有完整工具栏的ckeditor编辑器

第七步，获取ckeditor中编辑的内容

a:前台通过javascript获取：

<script type="text/javascript">
         function getData() {
             //editor01就是那个被ckeditor替换掉的textarea的ID
             var str = CKEDITOR.instances.editor01.getData();
             var label = document.getElementById("Label1");
             label.innerText = str;  
         }
     </script>

b:后台通过c#代码获取

 protected void Button1_Click(object sender, EventArgs e)
        {
            //editor01就是那个被ckeditor替换掉的textarea的ID
            TextBox1.Text = editor01.Value;
        }

结论：

完整的vs2010工程下载链接：

http://download.youkuaiyun.com/detail/zhoushenghuang/8458227

注意，工程里用的是full版本的。