ckeditor ——在图片上传中上传其他文件（word等）

最近项目中遇到需要用富文本编辑文档，最终以公告的形式在内网中展示，其中一个简单的要求就是要有附件。因为知道ckeditor是有图片的上传了，于是想是不是也可以上传如word，pdf等附件呢。这样内网展示的时候可以直接点击下载了。基于这个想法我做了一些尝试和测试，觉得还是可以实现的。虽然在简单实现后，因为需求的调整，这个方案没有最终使用，但是我还是觉得有必要记录下来。也许以后用的到，也许也有人有这个想法而没有思路呢~~

我的项目使用MVC模式，前端是基于bootstrap的、免费开源UI框架，ckeditor的版本是4.3.1~~~废话不多说，直接上代码吧！

以下是html的ckeditor显示代码：

<div class="form-group">
    <label for="" class="col-sm-2 control-label">内容</label>
    <div class="col-sm-10">
        @Html.EditorFor(m => m.MultMsgContent, new { htmlAttributes = new { @class = "form-control", placeholder = "内容" } })                    
        @Html.ValidationMessageFor(m => m.MultMsgContent, "", new { @class = "text-danger" })
    </div>
</div>

接着上面的html页面，可以在其中直接写入js，或者新建js文件进行引用，js的代码如下：

var editor = CKEDITOR.replace("MultMsgContent", { "toolbar": "Basic" }); //显示编辑器
    editor.on('change', function (event) {

        var data = this.getData(); //获取editor中的内容
        var jqueryData = $(data);
        var firstChild = jqueryData[jqueryData.length - 1].firstChild;
        if (firstChild) {
            var src = firstChild.src;
            if (src) {
                if(src.split('.')[1]!="img")
                {
                    var alt = firstChild.alt;
                    jqueryData[jqueryData.length - 1].firstChild.remove();
                    var apd ="<a href='"+src+"'>"+alt+"</a>";
                    jqueryData[jqueryData.length - 1].innerHTML = apd;
                    var msg = "";
                    for (var i = 0; i < jqueryData.length; i++) {
                        msg += jqueryData[i].outerHTML||'';
                    }
                    editor.setData(msg);
                }
            }
        }
        console.log( data.length)

    });

上面的代码的主要思路是：添加ckeidtor的change事件，获得最新的内容判断是否有IMG标签，如果不是则用A标签换掉IMG标签，最后重新写入到ckeidtor中。其js源代码我也看了，但是发现不会改，所以才想着曲线救国的~~

当然，为了实现上面的目的，需要在config.js中加入以下内容

//配置这个参数，图片上传才会出现
config.image_previewText = ' '; //预览区域显示内容
config.filebrowserImageUploadUrl = "Home/Upload";

下面给出后台的简单上传代码（此处只是实现上传，没有做任何的限制）：

public ActionResult Upload(HttpPostedFileBase upload)
{
    //获取图片文件名
    var fileName = System.IO.Path.GetFileName(upload.FileName);
    var folderName = DateTime.Today.ToString("yyyy-MM-dd");
    var filePhysicalPath = Server.MapPath(string.Format("~\\EditorUpload\\{0}", folderName));
    //我把它保存在网站根目录的 upload 文件夹，需要在项目中添加对应的文件夹
    if (Directory.Exists(filePhysicalPath) == false)
    {
         Directory.CreateDirectory(filePhysicalPath);
    }
    //上传图片到指定文件夹
    upload.SaveAs(Path.Combine(filePhysicalPath, fileName));  
    var url = string.Format("/EditorUpload/{0}/{1}", folderName, fileName);
    var CKEditorFuncNum = System.Web.HttpContext.Current.Request["CKEditorFuncNum"];
    //上传成功后，我们还需要通过以下的一个脚本把图片返回到第一个tab选项
    return Content("<script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + url + "\");</script>");
}

欢迎有更好的实现方式的朋友留言分享~~

PS：js中实现change的代码，只是一个初步的实现版本，不可能符合所有的需求。但是我测试过，word文件上传过可以在展示界面直接看到一个下载的连接，点击后可以下载上传的word文件。

ckeditor ——在图片上传中上传其他文件（word等）

猜你喜欢