zoukankan      html  css  js  c++  java
  • 第一次使用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 = "" });
            }

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

  • 相关阅读:
    开源高性能网络库Libevent的简介
    网络IO之阻塞、非阻塞、同步、异步总结【转】
    C语言20150620
    EF那点事
    SSO单点登录的实现原理是怎样的
    SQL索引器
    基础数学知识
    hibernate优化笔记(随时更新)
    JAVA中保留小数的多种方法
    Hibernate的session缓存和对象的四种状态
  • 原文地址:https://www.cnblogs.com/wu-xin/p/12201976.html
Copyright © 2011-2022 走看看