zoukankan      html  css  js  c++  java
  • Asp.Net Core 网站使用TinyMCE实现上传图片

    1、下载TinyMCE

    https://www.tiny.cloud/get-tiny/self-hosted/

    解压缩后放在网站wwwroot目录

    2、下载中文语言包

    https://www.tiny.cloud/get-tiny/language-packages/

    解压缩后放在langs目录

    3、添加Razor页面

    指定images_upload_url参数,实现图片文件的上传功能。此路径指向的地址为步骤4中创建Controller
    指定
    language,语言使用中文简体。
    @page
    @model CourseAssistant.Pages.TinyMCE.IndexModel
    @{
    }
    <script src="~/js/tinymce/tinymce.min.js"></script>
    <script>
        tinymce.init({
            height: 550,
            menubar: false,
            language: 'zh_CN',
            selector: 'textarea',
            images_upload_url: '/TinyMCE/Upload',
            plugins: [
                'advlist autolink lists link image imagetools charmap print preview anchor textcolor',
                'searchreplace visualblocks code fullscreen ',
                'insertdatetime media table contextmenu paste code help wordcount'
            ],
            toolbar: 'preview link code insertdatetime  charmap | media  image | undo redo |  formatselect | bold italic backcolor  | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent  | removeformat | help',
        });
    </script>
    
    
    <textarea>
    </textarea>

    4、添加UploadController.cs

    using Microsoft.AspNetCore.Mvc;
    using System.IO;
    using Microsoft.AspNetCore.Hosting;
    
    namespace CourseAssistant.Pages.TinyMCE
    {
        [Route("TinyMCE/[controller]")]
        public class UploadController : Controller
        {
            IHostingEnvironment hostingEnvironment;
            public UploadController(IHostingEnvironment hostingEnvironment)
            {
                this.hostingEnvironment = hostingEnvironment;
            }
            [HttpPost]
            public string Post()
            {
                var files = Request.Form.Files;
                if (files.Count==0)
                {
                    return "No File";
                }
                var file = files[0];
                var path = hostingEnvironment.WebRootPath;
                var UploadDir = "UploadFiles";
                var fulldir = Path.Combine(path, UploadDir);
                if (!Directory.Exists(fulldir)) Directory.CreateDirectory(fulldir);
                var filename = file.FileName;
                var fullpath = Path.Combine(path, UploadDir, filename);
                using (var fs=new FileStream(fullpath, FileMode.Create, FileAccess.Write))
                {
                    file.CopyTo(fs);
                    fs.Close();
                }
                var url = $"/{UploadDir}/{filename}";
                var fi = new fileinfo() { location = url };
                var s = fi.ToString();
                return s;
            }
        }
        public class fileinfo:JsonObject<fileinfo>
        {
            public string location { get; set; }
        }
    }
  • 相关阅读:
    Linux 3.2中回写机制的变革
    Linux字符设备与块设备的区别与比较
    分布式文件系统:原理、问题与方法
    为什么说B+-tree比B 树更适合实际应用中操作系统的文件索引和数据库索引?
    Linux IO barrier
    磁盘IO:缓存IO与直接IO
    【珍藏】高性能IO模型浅析
    souretree+上面提交代码和gerrit上面出现Cannot+merge的时候的解决方法
    vscode快速生成自定义HTML模板
    在jq里面设置样式的高度height、设置隐藏和显示的小功能
  • 原文地址:https://www.cnblogs.com/tianjiuyi/p/10215646.html
Copyright © 2011-2022 走看看