Mr.G&Z.W

图片上传功能做好啦，用了Vditor，挺好用哒

就用这漂亮的东钱湖打个样吧，看看老婆啥时候能发现，以后是不是应该加个微信提醒功能，今天老婆睡好早哦。

趁今天午休时间，补充一下vditor配置过程吧。

首先，前端页面引入vditor文件

<link href="/PATH/TO/VDITOR/index.min.css" rel="stylesheet">

<script src="/PATH/TO/VDITOR/index.min.js"></script>

然后合适的地方放入下面代码

<div id="vditor" class="vditor"></div>
<script>
// 初始化 Vditor
const vditor = new Vditor('vditor', {
    mode:"wysiwyg", // 所见即所得模式
    customWysiwygToolbar: ()=>{}, // 消除错误提示
    value : "可以输入自己要的内容，比如加载获取的文章",
    height: window.height, // 设置编辑器高度
    toolbar: [ // 自行设置工具栏
        "headings","bold","italic","|",
        "list","ordered-list","check","outdent","indent","|",
        "quote","line","code","inline-code","insert-before","insert-after","|",
        "link","upload","|",
        "undo","redo","|",
        "fullscreen","edit-mode","preview"
    ],
    upload: {
    url: '/PATH/TO/YOUR/UPLOAD', // 上传处理api
    accept: 'image/*', // 支持的文件类型
    multiple: false, // 是否支持批量上传
    max: 20*1024*1024, // 文件最大值
    fieldName: 'files', // 上传字段名称
    filename (name) { // 文件名安全处理
      // 此处加入文件名安全处理代码
    },
    validate(files) {
        // 此处加入前台校验代码，提前过滤不符合要求的文件
    },
  },
    theme: 'classic', // 主题，可选 classic 或 dark
    cache: { enable: false }, // 禁用缓存
    preview: {
        theme: { current: 'light' } // 预览主题
    }
});
</script>

然后就是正常的提交请求，后台操作流程了，有空再铺开写。

  评论区

  Z.W

  8月6日 12:49