zoukankan      html  css  js  c++  java
  • 百度编辑器添加实现添加图片功能

    我总结了百度编辑器八步走,按照这八步就可是实现图片简单的小视频上传

    第一步:在html页面中写入

    <!--百度编辑器-->
                    <div class="bd">
                        <script id="editor" type="text/plain" style="100%; height:230px;overflow:auto">
                        </script>
                    </div>

    百度编辑器的宽度高度简单样式可以自己设置

    第二步:根据所需在网上下载百度ueditor(搜一下名字就可以找到)下载下来后引用关于ueditor的js,

        <script src="~/lib/ueditor/ueditor.config.js"></script>
        <script src="~/lib/ueditor/ueditor.all.min.js"></script>
        <script src="~/lib/ueditor/lang/zh-cn/zh-cn.js"></script>

    第三步:在编写javascript创建百度编辑器

    //创建编辑器
            function createEditor() {
                UE.getEditor('editor');
                UE.getEditor('editor').addListener('ready', function (editor) {
                    //加载内容
                });
            }

    第四步:这是前台完成的操作,在NuGet中下载

    第五步:在后台statup的ConfigureServices方法中注入

     services.AddUEditorService()
                   .Add("test", context =>
                   {
                       context.Response.WriteAsync("from test action");
                   })
                   .Add("test2", context =>
                   {
                       context.Response.WriteAsync("from test2 action");
                   }
                   );
                services.AddMvc();

    简单的百度编辑添加数据已经可以实现了。

    第六步:添加图片需要改变ueditor.config.js中的服务器统一请求端口路径

    serverUrl: URL + "net/controller.ashx"

    改为

    serverUrl: "/api/UEditor"

    第七步:然后在创建UEditorControllers.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc;
    using UEditorNetCore;
    
    // For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
    
    namespace ProductReleaseSystem.Controllers
    {
        [Route("api/[controller]")]
        public class UEditorController : Controller
        {
            private UEditorService ue;
            // GET: /<controller>/
            public UEditorController(UEditorService ue)
            {
                this.ue = ue;
            }
            public void Do()
            {
                ue.DoAction(HttpContext);
            }
        }
    }

    第八步:最后再添加一个config.json文件就可以实现上传文件,其实写到了这里你也可以看到也可以上传一些小型的视频,可以在config.json中设置上传的大小。

    /* 前后端通信相关的配置,注释只允许使用多行方式 */
    {
      /* 上传图片配置项 */
      "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
      "imageFieldName": "upfile", /* 提交的图片表单名称 */
      "imageMaxSize": 20480000, /* 上传大小限制,单位B */
      "imageAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp" ], /* 上传图片格式显示 */
      "imageCompressEnable": true, /* 是否压缩图片,默认是true */
      "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
      "imageInsertAlign": "none", /* 插入的图片浮动方式 */
      "imageUrlPrefix": "/", /* 图片访问路径前缀 */
      "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
      /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
      /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
      /* {time} 会替换成时间戳 */
      /* {yyyy} 会替换成四位年份 */
      /* {yy} 会替换成两位年份 */
      /* {mm} 会替换成两位月份 */
      /* {dd} 会替换成两位日期 */
      /* {hh} 会替换成两位小时 */
      /* {ii} 会替换成两位分钟 */
      /* {ss} 会替换成两位秒 */
      /* 非法字符  : * ? " < > | */
      /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
    
      /* 涂鸦图片上传配置项 */
      "scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */
      "scrawlFieldName": "upfile", /* 提交的图片表单名称 */
      "scrawlPathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
      "scrawlMaxSize": 2048000, /* 上传大小限制,单位B */
      "scrawlUrlPrefix": "/", /* 图片访问路径前缀 */
      "scrawlInsertAlign": "none",
    
      /* 截图工具上传 */
      "snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */
      "snapscreenPathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
      "snapscreenUrlPrefix": "/", /* 图片访问路径前缀 */
      "snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */
    
      /* 抓取远程图片配置 */
      "catcherLocalDomain": [ "127.0.0.1", "localhost", "img.baidu.com" ],
      "catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */
      "catcherFieldName": "source", /* 提交的图片列表表单名称 */
      "catcherPathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
      "catcherUrlPrefix": "/", /* 图片访问路径前缀 */
      "catcherMaxSize": 2048000, /* 上传大小限制,单位B */
      "catcherAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp" ], /* 抓取图片格式显示 */
    
      /* 上传视频配置 */
      "videoActionName": "uploadvideo", /* 执行上传视频的action名称 */
      "videoFieldName": "upfile", /* 提交的视频表单名称 */
      "videoPathFormat": "upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
      "videoUrlPrefix": "/", /* 视频访问路径前缀 */
      "videoMaxSize": 102400000, /* 上传大小限制,单位B,默认100MB */
      "videoAllowFiles": [
        ".flv",
        ".swf",
        ".mkv",
        ".avi",
        ".rm",
        ".rmvb",
        ".mpeg",
        ".mpg",
        ".ogg",
        ".ogv",
        ".mov",
        ".wmv",
        ".mp4",
        ".webm",
        ".mp3",
        ".wav",
        ".mid"
      ], /* 上传视频格式显示 */
    
      /* 上传文件配置 */
      "fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
      "fileFieldName": "upfile", /* 提交的文件表单名称 */
      "filePathFormat": "upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
      "fileUrlPrefix": "/", /* 文件访问路径前缀 */
      "fileMaxSize": 51200000, /* 上传大小限制,单位B,默认50MB */
      "fileAllowFiles": [
        ".png",
        ".jpg",
        ".jpeg",
        ".gif",
        ".bmp",
        ".flv",
        ".swf",
        ".mkv",
        ".avi",
        ".rm",
        ".rmvb",
        ".mpeg",
        ".mpg",
        ".ogg",
        ".ogv",
        ".mov",
        ".wmv",
        ".mp4",
        ".webm",
        ".mp3",
        ".wav",
        ".mid",
        ".rar",
        ".zip",
        ".tar",
        ".gz",
        ".7z",
        ".bz2",
        ".cab",
        ".iso",
        ".doc",
        ".docx",
        ".xls",
        ".xlsx",
        ".ppt",
        ".pptx",
        ".pdf",
        ".txt",
        ".md",
        ".xml"
      ], /* 上传文件格式显示 */
    
      /* 列出指定目录下的图片 */
      "imageManagerActionName": "listimage", /* 执行图片管理的action名称 */
      "imageManagerListPath": "upload/image", /* 指定要列出图片的目录 */
      "imageManagerListSize": 20, /* 每次列出文件数量 */
      "imageManagerUrlPrefix": "/", /* 图片访问路径前缀 */
      "imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */
      "imageManagerAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp" ], /* 列出的文件类型 */
    
      /* 列出指定目录下的文件 */
      "fileManagerActionName": "listfile", /* 执行文件管理的action名称 */
      "fileManagerListPath": "upload/file", /* 指定要列出文件的目录 */
      "fileManagerUrlPrefix": "/", /* 文件访问路径前缀 */
      "fileManagerListSize": 20, /* 每次列出文件数量 */
      "fileManagerAllowFiles": [
        ".png",
        ".jpg",
        ".jpeg",
        ".gif",
        ".bmp",
        ".flv",
        ".swf",
        ".mkv",
        ".avi",
        ".rm",
        ".rmvb",
        ".mpeg",
        ".mpg",
        ".ogg",
        ".ogv",
        ".mov",
        ".wmv",
        ".mp4",
        ".webm",
        ".mp3",
        ".wav",
        ".mid",
        ".rar",
        ".zip",
        ".tar",
        ".gz",
        ".7z",
        ".bz2",
        ".cab",
        ".iso",
        ".doc",
        ".docx",
        ".xls",
        ".xlsx",
        ".ppt",
        ".pptx",
        ".pdf",
        ".txt",
        ".md",
        ".xml"
      ] /* 列出的文件类型 */
    
    }
  • 相关阅读:
    Java构造和解析Json数据的两种方法详解一
    使用json-lib进行Java和JSON之间的转换
    java 读取文件转换成字符串
    Jackson 框架,轻易转换JSON
    (转载)最黑的黑客米特尼克:多次耍FBI 终被高手擒
    (转载)Linux下IPTABLES防火墙的设定
    (转载)Linux下IPTABLES配置详解
    (转载)Linux上iptables防火墙的基本应用教程
    (转载)更好的重启nginx 服务器
    (转载)JavaScript中的Window窗口对象
  • 原文地址:https://www.cnblogs.com/ljknlb/p/7494507.html
Copyright © 2011-2022 走看看