富文本编辑器ckedtor使用教程

ckedtor压缩包

链接: ckedtor.zip.

基本使用流程

将js插件包粘贴到项目中，并在调用页面加引用，如下：

<script src="~/Content/js/ckeditor/ckeditor.js"></script>
<script>
    $(function () {
        var data;
        CKEDITOR.replace(document.querySelector('#content'), {
            ckfinder: {
                uploadUrl: '/zzk/CKEditor5/ImportExcel'
            }
        }
        ).then(editor => {
            window.editor = editor;
            data = editor.getData();
            console.log(data);
        })
            .catch(error => {
                console.log(error);
            });
    });
</script>
<style>
    #cke_1_contents {
        min-height: 800px;
    }
</style>

style中是编辑器的高度，uploadUrl是后台接收方法，返回"{“uploaded”:1,“url”:"…/upload/ima.png"}",uploaded等于1是上传成功，url是路径
我后台写了一个简单的接收方法，如下：

public string ImportExcel()
        {
            HttpPostedFileBase file = null;
            string cs = "";
            if (Request.Files.Count > 0)
            {
                //传过来的图片
                file = Request.Files[0];
                //保存到本地或服务器

            }
            if (file.ContentLength > 0)
            {
                string extName = Path.GetExtension(file.FileName).ToLower();
                string newFileName = System.Guid.NewGuid().ToString();
                string path = Server.MapPath("~/Upload/jcsjpt/");
                string sj = DateTime.Now.ToString("yyyy-MM-dd") + "/";
                if (System.IO.Directory.Exists(Server.MapPath("~/Upload/jcsjpt/" + sj)) == false)//如果不存在就创建file文件夹
                {
                    System.IO.Directory.CreateDirectory(Server.MapPath("~/Upload/jcsjpt/" + sj));
                }
                file.SaveAs(path + sj + newFileName + extName);
                cs = "../../Upload/jcsjpt/" + sj + newFileName + extName;
            }
            return "{\"uploaded\":1,\"url\":\""+cs+"\"}";

        }

纯手打，转载请注明