第一次使用TinyMCE

网页部分参考的 tiny中文文档  文件上传部分是从网上找的代码

从官网上下载好压缩包 https://www.tiny.cloud/get-tiny/self-hosted/ 

 

 选这个

解压后将文件复制到项目中去，

页面上引入js

    <script src="~/Content/tinymce/js/tinymce/tinymce.min.js"></script>

如果要支持多文件上传的话还有从tiny中文文档这个网站下载多文件上传的插件http://tinymce.ax-z.cn/more-plugins/axupimgs.php

使用方法可以看链接里面写的

我再写一遍简单版：

下载后，将解压得到的文件夹，放到TinyMCE主目录下的plugins文件夹内。

然后就是tinymce的初始化配置，

我直接把我的配置放上来

 tinymce.init({
                selector: '#projectContext',
                language: 'zh_CN',
                height: 650,
                min_height: 500,
                plugins: ' preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave   autoresize  axupimgs',
                toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
                                 styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
                                 table image media charmap emoticons hr pagebreak insertdatetime  preview | fullscreen |  axupimgs',
                images_upload_handler: function (blobInfo, succFun, failFun) {
                    var xhr, formData;
                    var file = blobInfo.blob();//转化为易于理解的file对象
                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    xhr.open('POST', '/Home/Upload');
                    xhr.onload = function () {
                        var json;
                        if (xhr.status != 200) {
                            console.log('HTTP Error: ' + xhr.status);
                            return;
                        }
                        json = JSON.parse(xhr.responseText);
                        //if (!json || typeof json.location != 'string') {
                        //    console.log('Invalid JSON: ' + xhr.responseText);
                        //    return;
                        //}
                        if (json.status == false) {
                            console.log('Invalid JSON: ' + xhr.responseText);
                            return;
                        }
                        succFun(json.url);
                    };
                    formData = new FormData();
                    formData.append('file', file, file.name);
                    xhr.send(formData);
                }
            });

一开始我是照着tinymce中文文档的demo抄的，但是有几个插件我感觉用不到就删了

文件上传的部分也做了一点改变  

images_upload_handler 这个配置项我做了点改变，因为返回的属性和原本的内容不同，我就做了一下改变

下面放我后台的代码

 public JsonResult Upload()
        {
            if(!Directory.Exists(Path.Combine(Server.MapPath("~/"), "UploadFile", "Projects")))
            {
                Directory.CreateDirectory(Path.Combine(Server.MapPath("~/"), "UploadFile", "Projects"));
            }
            if (Request.Files.Count > 0)
            {
                if (Request.Files.Count == 1)
                {
                    HttpPostedFileBase file = Request.Files[0];
                    if (file.ContentLength > 0)
                    {
                        string title = DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + Path.GetFileName(file.FileName);
                        string path = Path.Combine(Server.MapPath("~/"), "UploadFile", "Projects", title);
                        string location = "../UploadFile/Projects/" + title;
                        file.SaveAs(path);
                        return Json(new { status = true, url = location });
                    }
                }
                else
                {
                    string[] urllist = new string[Request.Files.Count];
                    for (int i = 0; i < Request.Files.Count; i++)
                    {
                        HttpPostedFileBase file = Request.Files[i];
                        if (file.ContentLength > 0)
                        {
                            string title = DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + Path.GetFileName(file.FileName);
                            string path = Path.Combine(Server.MapPath("~/"), "UploadFile", "Projects", title);
                            string location = "../UploadFile/Projects/" + title;
                            file.SaveAs(path);
                            urllist[i] = location;
                        }
                    }
                    return Json(new { status = true, url = urllist });
                }

            }
            else
            {
                return Json(new { status = false, url = "", msg = "没有文件" });
            }



            return Json(new { status = false, url = "", msg = "" });
        }

一个很常见的文件上传代码，虽然我不会，但是并不影响我抄代码用