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

因设计一个线上考试系统，需要考生上传相关设计的图片，因此在网上查找了使用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>

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

单击工具栏上“图像”图标，出现如图5所示的“图像属性”对话框。切换到“上传”选项卡，单击“选择文件”按钮，在弹出的“打开”窗口中选择一个图片文件：

选择图片后，单击“打开”，显示：

单击“上传服务器”按钮，系统调用图片上传接口Upload.ashx，将图片上传到指定位置，并将该图片显示在“图像信息”窗口：

调节宽度、高度等图像信息后，单击“确定”按钮，系统就将该图片插入CKEditor编辑窗口中：

.net中使用ckeditor4+ckfinder上传图片相关推荐

在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
前言之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...
MVC中使用jquery uploadify上传图片报302错误
使用jquery uploadify上传图片报302错误研究了半天,发现我上传的action中有根据session判断用户是否登录,如果没有登录就跳到登陆页,所以就出现了302跳转错误.原来更新了fl ...
上传身份证照片js_Asp.Net MVC 中JS通过ajaxfileupload上传图片获取身份证姓名、生日、家庭住址等详细信息...
客户要求用身份证图片上传获取身份证的详细信息就下来研究了一下(现在的客户真的懒身份证信息都懒得输入了哈哈...),经过慢慢研究,果然皇天不负有心人搞出来了.这个借助的是腾讯的一个SKD 腾讯优图云 ...
解决在安卓系统微信中打开网页无法上传图片的问题
在做微信网页开发时,需要在微信内置浏览器里打开.上传图片,刚开始这样写: 在测试中发现,安卓系统中无法成功上传图片.需要改成才可以. 之后,利用window.URL.createObjectURL( ...
.net中ckeditor，ckFinder的使用
一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="text/javascript" src= ...
Android中FTP上传图片
前言最近公司一个项目需要把图片上传到ftp服务器,以前没有写过这一方面的,只写过上传http的,当时也是很蒙,查了很多资料,幸好最后搞出来了,现在分享一下,希望对大家有一点帮助. 本篇博客的主要内容 ...
12.HTML编辑器（CKEditor、CKFinder集成）
CKEditor原名为FckEditor,是著名的HTML编辑器,可以在线编辑HTML内容. 配置参考文档:主要将ckeditor中的lang.plugins.skins.ckeditor.js.co ...
CkEditor 4.1.3 + CkFinder 2.4
CkEditor现在的最新版本是4.2,但我并不推荐使用,因为4.2不支持IE7和火狐3.6版本,所以我选择4.1.3版本. CkFinder是CkEditor的图片上传插件,一款非常好的图片管理插件 ...
五十二、微信小程序云开发中的云存储
@Author:Runsen 暑假很长,明年就是找工作的时候了.这个时候必须比之前还要拼命. 百翻无下,努力就是我的代言词.今天,正式进入云存储的学习.云存储这个概念在之前学习的时候没有注意到. 下面 ...
上传图片之上传前判断文件格式与大小
最近工作中需要做一个上传图片的功能,既然上传的是图片,那么就应该在上传之前对文件进行一下验证,看看要上传的是不是图片文件.所以在上传之前要对所选文件的格式进行验证.上传图片时因为服务器资源有限,经常会 ...

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

.net中使用ckeditor4+ckfinder上传图片相关推荐

最新文章

热门文章