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 = "" });
            }

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

  • 相关阅读:
    CPP流类库与输入输出
    STL学习之mismatch();
    谷歌浏览器现在点击任何文本都会出现光标
    jQuery删除元素remove和和empty的区别
    jQuery中的鼠标离开事件mouseout和mouseleave区别
    java类中的布尔(boolean&Boolean)类型字段要注意get方法和字段的命名
    Navicat_Premium_v15 激活
    navicat注册过期修改方法
    ClassNotFoundException找不到类异常的原因package 路径eclipse自动给我在路径前面加了一个java变成了java.com.XXX
    我保存一份博客园样式代码
  • 原文地址:https://www.cnblogs.com/wu-xin/p/12201976.html
Copyright © 2011-2022 走看看