sharePoint2013 集成CKEditor+CKFinder

CKEditor是HTML页面的富文本编辑器,本身不带上传功能,如果使用上传功能,必须配置使用CKFinder。

本配置CKEditor使用的是ckeditor_aspnet_3.6.6.2(http://ckeditor.com/download),CKFinder使用ckfinder_aspnet_2.4.1(http://cksource.com/ckfinder/download

  1. 打开VS2013,新建可视化WEB部件解决方案。
  2. 为解决方案添加引用

          解压ckeditor_aspnet_3.6.6.2,将ckeditor_aspnet_3.6.6.2\_Samples\bin\CKEditor.NET.dll 文件考入项目Debug目录下,添加CKEditor.NET.dll引用。

          解压ckfinder_aspnet_2.4.1,将ckfinder_aspnet_2.4.1\ckfinder\bin\Debug\CKFinder.dll 文件考入项目Debug目录下,添加CKFinder.dll引用。

     3.  打开WEBPart页面

          注册标记 <%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

          放入控件<CKEditor:CKEditorControl ID="CKEditor1" runat="server" Height="200" BasePath="/_layouts/15/ckeditor/ckeditor"></CKEditor:CKEditorControl>

    4.  与CKFinder 关联

         为WEBPart后台Page_Load添加如下内容

    string dir = "/_layouts/15/ckeditor";            

    CKEditor1.config.language = "zh-cn";//en            

    CKEditor1.config.filebrowserBrowseUrl = dir + "/ckfinder/ckfinder.html"; //上传文件时浏览服务文件夹             

    CKEditor1.config.filebrowserImageBrowseUrl = dir + "/ckfinder/ckfinder.html?Type=Images"; //上传图片时浏览服务文件夹             

    CKEditor1.config.filebrowserFlashBrowseUrl = dir + "/ckfinder/ckfinder.html?Type=Flash";  //上传Flash时浏览服务文件夹             

    CKEditor1.config.filebrowserUploadUrl = dir + "/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files"; //上传文件按钮(标签)             

    CKEditor1.config.filebrowserImageUploadUrl = dir + "/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images"; //上传图片按钮(标签)             

    CKEditor1.config.filebrowserFlashUploadUrl = dir + "/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash"; //上传Flash按钮(标签)            

    CKEditor1.config.font_names="宋体 / 宋体; 黑体 / 黑体; 仿宋 / 仿宋_GB2312; 楷体 / 楷体_GB2312; 隶书 / 隶书; 幼圆 / 幼圆; 微软雅黑 / 微软雅黑";

    CKFinder.FileBrowser _FileBrowser = new CKFinder.FileBrowser();            

    _FileBrowser.BasePath = "/_layouts/15/ckeditor/ckfinder/";            

    _FileBrowser.SetupCKEditor(CKEditor1);

      5.为项目映射Layouts文件夹,并将ckeditor_aspnet_3.6.6.2\_Samples\ckeditor 目录拷入,将ckfinder_aspnet_2.4.1\ckfinder 目录拷入。

      6.点击解决方案“package.package”包文件,在“高级”里,将CKEditor.NET.dll与CKFinder.dll放入GAC

      7.部署解决方案。并在页面中添加此WEB部件。如下

     

   上传

     

注:如果打开图片上传页面,报 未能加载程序集 CKFinder.connector.connector

请在SharePoint Web.Config 中加入此节点

<compilation debug="true">
      <assemblies>
        <add assembly="CKFinder, Version=2.4.1.2663, Culture=neutral, PublicKeyToken=579E7ADC719A1423"/>
      </assemblies>
    </compilation>

使用此连接查看上传目录  根目录+/ckfinder/core/connector/aspx/connector.aspx?command=Init&type=Images     

posted @ 2014-10-17 14:56  1200  阅读(849)  评论(0编辑  收藏  举报