ck图片：.net中使用ckeditor4+ckfinder上传图片

2024-04-24 00:04:40 0 0

因设计一个线上考试系统，需要考生上传相关设计的图片，因此在网上查找了使用ckeditor+ckfinder技术上传图片的文章，网上相关文章很多，但大多都不能完全成功，通过不断的参考和大量的调试，总算成功地实现了图片的上传功能。

一、官方Download

1、CKEditor ：选择”Full Package”，单击“Download“按钮,下载文件：ckeditor_4.17.1_full.zip

2、CKFinder ：点击Asp.net标签下的“Download zip packape”按钮,下载文件：ckfinder_aspnet_2.6.3.zip

二、具体部署

1、分别解压下载下来的这2个文件，并把解压后的子目录ckeditor和ckfinder文件夹拷贝到你的项目中；

图1

2、CKEditor配置的修改

（1）设置CKEditor的工具栏

在win中双击ckeditor\samples\index.html:

图2

单击右上部的“TOOLBAR CONFIGURATOR”按钮，出现工具栏按钮选择界面：

图3

配置完成，单击“Get toolbar config”按钮，并将其中的配置代码拷贝到ckeditor\config.js文件中。

图4

将下面的代码添加到ckeditor\config.js的配置文件中

CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';

config.toolbarGroups = [
       { name: 'document', groups: ['mode', 'document', 'doctools'] },
       { name: 'clipboard', groups: ['clipboard', 'undo'] },
       { name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing'] },
       { name: 'forms', groups: ['forms'] },
       { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
       { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph'] },
       { name: 'links', groups: ['links'] },
       { name: 'insert', groups: ['insert'] },
       { name: 'styles', groups: ['styles'] },
       { name: 'colors', groups: ['colors'] },
       { name: 'tools', groups: ['tools'] },
       { name: 'others', groups: ['others'] },
       { name: 'about', groups: ['about'] }
   ];

config.removeButtons = 'Source,NewPage,Print,Templates,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Blockquote,CreateDiv,PageBreak,Iframe,Maximize,ShowBlocks,About,BidiLtr,BidiRtl,Language';
//上传图片窗口用到的接口
config.filebrowserImageUploadUrl = "Upload.ashx";
// 使上传图片弹窗出现对应的“上传”tab标签
config.removeDialogTabs = 'image:advanced;link:advanced';
//工具栏是否可以被收缩
//config.toolbarCanCollapse = true;
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
//config.filebrowserImageUploadUrl = ckfinderPath + 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
};

    其中的：
    config.filebrowserImageUploadUrl = "Upload.ashx";
    就是上传图片用到的接口（待会要上传的action）

（2）修改ckeditor\plugins\image\dialogs\image.js文件。搜索“browseServer”，将其中的label:d.lang.common.browseServer,hidden:!0 修改为hidden:0。搜索“image_previewText”，将||后“”中的一大段字符串删除。

3、ckfinder配置的修改

      修改ckfinder\config.ascx用户控件文件，更改其BaseUrl路径：
      BaseUrl = "~/uploader/";     //前提条件是根目录上必需存在用来存放上传文件的uploader文件夹。
      并且将CheckAuthentication()函数中的返回值从false修改为true，去掉去掉身份验证

public override bool CheckAuthentication()
{
return true;
}

至此，配置工作终于完成。

三、在页面中应用

1、添加dll引用

在“解决方案资源管理器”中右击项目，在弹出的快捷菜单中单击“添加引用”，在“浏览”选项卡中选择ckfinder\bin\Release\CKFinder.dll文件，将CKFinder.dll添加到当前工程中。

2、匹配上传图片数据格式

ckeditor4期望从后端返回的是一个Json格式数据，包含下面几个字段，数据格式外层不需要状态码200或者其他data套着，直接返回。

图5
当用户点击“上传到服务器”按钮会让路径自动处理并返回一个JSON格式的数据：

成功上传文件后，期望包含以下条目的JSON响应：
{
    "uploaded": 1,
    "fileName": "foo.jpg",
    "url": "/files/foo.jpg"
}

（1）因此，需要创建一个处理JSON格式数据的类Json.cs，代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
///Json 的摘要说明
/// </summary>
public class Json
{
  public Json()
  {
    //
    //TODO: 在此处添加构造函数逻辑
    //
  }

  public string uploaded { set; get; }
  public string fileName { get; set; }
  public string url { get; set; }
}

（2）添加“Newtonsoft.Json.dll”引用。将Newtonsoft.Json.dll添加到当前工程中。

3、设计图片上传接口Upload.ashx(上传的action)

<%@ WebHandler Language="C#" Class="Upload" %>
using System;
using System.Web;
using Newtonsoft.Json;
using System.IO;

public class Upload : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        HttpPostedFile uploads = context.Request.Files["upload"];
        string CKEditorFuncNum = context.Request["CKEditorFuncNum"];
        string file = System.IO.Path.GetFileName(uploads.FileName);
        // 图片上传到uploader\images\目录
        uploads.SaveAs(context.Server.MapPath("~\\uploader\\images\\") + file);
        string url = "uploader/images/" + file;

        Json Json1 = new Json();
        Json1.uploaded = "1";
        Json1.fileName = "ImageName";
        Json1.url = "uploader/images/" + file;
        string jsonstr = JsonConvert.SerializeObject(Json1);
        context.Response.Clear();
        context.Response.Write(jsonstr);
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

4、页面设计

(1) 在页面上添加一个textarea组件:

      <textarea name="editor1" id="editor1" rows="10" cols="80">
         This is my textarea to be replaced with CKEditor.
      </textarea>

(2) 在页面的head中添加:

      // 使用CKEditor替换 <textarea id="editor1">
      // 实例化，使用默认配置
      _window.onload = function () {
        // 创建编辑器
        var editor = CKEDITOR.replace('editor1');
        // 为编辑器绑定"上传控件"
        //CKFinder.setupCKEditor(editor, '/ckfinder/');
      };
    </script>

至此，大功告成。运行程序，就可实现文字的编辑和图片的上传。