ckeditor富文本编辑器的使用和图片上传，复制粘贴图片上传

第二步：在html页面引入textarea标签；

<textarea name="Content_ch" rows="4" class="form-control ckeditor"></textarea>

第三步：在js中初始化富文本编辑器；

var content_ch = CKEDITOR.replace("Content_ch", { height: "300px" });

完成上面三个步骤就可以使用ckeditor富文本框编辑器了。但是如果需要支持上传图片以及直接复制黏贴图片，那么请继续往下看。

1.修改ckeditor配置文件config.js，在配置文件中添加如下信息：

    config.extraPlugins = "uploadimage";

    config.filebrowserImageUploadUrl ="/Common/CkUpLoadImg";//上传图片到服务器处理接口(返回成功结果必须如下格式：{“uploaded”:1,"fileName":"文件名","url":"文件路径"},错误格式为：{"uploaded":0,"error":{"message":"错误信息"}})

    config.imageUploadUrl = "/Common/CkUpLoadImg";//上传图片到服务器处理接口(返回成功结果必须如下格式：{“uploaded”:1,"fileName":"文件名","url":"文件路径"},错误格式为：{"uploaded":0,"error":{"message":"错误信息"}})

配置好上面信息，就可以直接使用富文本框自带上传工具进行上传并保存到服务器。但是单单这样还不能实现复制黏贴图片功能。请继续往下看：

2.在页面添加如下脚本处理：
    content_ch.on("change", function (e) {
        var a = e.editor.document;
        var b = a.find("img");
        var count = b.count();
        for (var i = 0; i < count; i++) {
            if (b.getItem(i).$.src.split("/")[0].indexOf("http")==-1) {
                upload(i, b, function (i, b, imgurl) {
                    b.getItem(i).$.src = imgurl;
                    var a = content_ch.document.$.getElementsByTagName("img")[i]; 
                    a.setAttribute("data-cke-saved-src", imgurl);//替换ckEditor的保存内容，必须要加上这一句，否则无法实现
                });
            }
        }
    });
    function upload(i, b, callback) {
        var dom = b.getItem(i).$
        var src = dom.src;//获取img的src
        src = src.substring(0, 10) == "data:image" ? dom.getAttribute("data-src") : src
        $.ajax({
            type: "post",
            url: "/Common/CkCopyImg",//服务器处理接口
            data: {
                imgUrl: src
            },
            success: function (data) {
                //根据返回地址数据自定义
                var imgurl = data.result.data; //获取回传的图片url
                //获取并更改到现有的图片标签src的值
                callback(i, b, imgurl)
            }
        });
    }

至此，就已完成复制黏贴图片到富文本框功能。但是这里面存在一个问题：就是每次富文本框内容发生改变后都会导致图片重新上传，会造成很多垃圾文件产生，可以考虑不使用chang事件，在保存整个表单内容的时候在统一处理富文本框里面包含img标签的内容，实现方法跟上面大体一致，这边就不做演示，亲们可以自己动手优化。

附上后台服务器处理接口：

         /// <summary>
        /// 富文本框上传图片处理
        /// </summary>
        /// <returns></returns>
        public ActionResult CkUpLoadImg()
        {
            var br = UpLoadProductImage();
            if (br.IsSuccessed)
            {
                var data = br.Data as Util.FileResultDto;
                var url=data.FilePath.Replace(""","/");
                System.Collections.Hashtable param = new System.Collections.Hashtable();
                param.Add("uploaded", 1);
                param.Add("fileName", data.FileName);
                param.Add("url",url);
                return ToJsonResult(param);
            }
            else
            {
                return Content("{"uploaded":0, "error":{"message":""+br.Message+""}}");
            }
        }

    /// <summary>
    /// 文件实体类
    /// </summary>
    public class FileResultDto
    {
        /// <summary>
        /// 原文件名
        /// </summary>
        public string OriginFileName { get; set; }
        /// <summary>
        /// 文件名称
        /// </summary>
        public string FileName { get; set; }
        /// <summary>
        /// 文件路径
        /// </summary>
        public string FilePath { get; set; }

        /// <summary>
        /// 文件类型
        /// </summary>
        public string FileType { get; set; }
    }