图片上传

效果

代码

vue

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
  <button @click="getcontent">提交</button>
</template>

<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

// 编辑器实例,必须用shallowRef包裹

const editorRef = shallowRef();

// 内容HTML

const valueHtml = ref("<p>hello</p>");

// 编辑器模式

const mode = ref("default"); // simple或者default;

// 模拟ajax异步获取数据内容

onMounted(() => {
  setTimeout(() => {
    valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
  }, 1500);
});

// 工具栏配置

const toolbarConfig = {};

// 编辑器配置

const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: { uploadImage: {} },
};

// 图片上传案例
editorConfig.MENU_CONF["uploadImage"] = {
  // 图标上传地址
  server: "https://newapidev.dianyuan.com/admin/system/Uploadimg/uploadImg",
  // 超时时间
  timeout: 5 * 1000, // 5s
  // form-data fieldName ，默认值 'wangeditor-uploaded-image'
  fieldName: `image`,
  meta: {
    module: "community",
  },
  headers: {
    "access-token":
      "1wuDp%2FyTmMf%2BWsYw4ymTit%2BxsmrOMzLqXYepM261jXgfVa9%2BCVhkjg1Mm%2B6wDmua",
  },
  metaWithUrl: true, // join params to url
  // 允许上传的最大文件大小
  maxFileSize: 10 * 1024 * 1024, // 10M
  base64LimitSize: 5 * 1024, // 小于5K，就不上传，使用 base64 格式保存
  // 最多可上传几个文件
  maxNumberOfFiles: 10,
  // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
  allowedFileTypes: ["image/png"],
  // 上传前准备
  onBeforeUpload(file: any) {
    console.log(file);
    const result: any = Object.values(file);
    console.log(result);
    if (result[0].extension !== "png") {
      alert("请上传png格式的图片");
      return false;
    } else {
      return file; // will upload this file
    }

    // return false // prevent upload
  },
  onProgress(progress: any) {
    console.log("onProgress", progress);
  },
  onSuccess(file: any, res: any) {
    console.log("onSuccess", file, res);
  },
  onFailed(file: any, res: any) {
    // alert(res.message);
    // console.log("onFailed", file, res);
    console.log(res);
  },
  onError(file: any, err: any, res: any) {
    alert(err.message);
    console.error("onError", file, err, res);
  },

  // 自定义插入图片
  customInsert(res: any, insertFn: any) {
    console.log("customInsert", res);
    const imgInfo = res.data || {};
    const { path, path_real } = imgInfo;
    if (!path_real) throw new Error(`Image url is empty`);
    insertFn(path_real);
    // insertFn(url, alt, href);
  },

  // customUpload(file, insertFn) {
  //   console.log('customUpload', file)

  //   return new Promise((resolve) => {
  //     // Simulate async insert image
  //     setTimeout(() => {
  //       const src = `https://www.baidu.com/img/flexible/logo/pc/result@2.png?r=${Math.random()}`
  //       insertFn(src, 'baidu logo', src)
  //       resolve('ok')
  //     }, 500)
  //   })
  // },

  // customBrowseAndUpload(insertFn) {
  //   alert('Custom browse and upload')

  //   // Simulate async insert image
  //   setTimeout(() => {
  //     const src = 'https://www.baidu.com/img/flexible/logo/pc/result@2.png'
  //     insertFn(src, 'baidu logo', src) // insert a image
  //   }, 500)
  // },
};

// 组件销毁的时候,也即时 销毁编辑器

onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

// 编辑器示例

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录editor实例
};

// 获取到编辑器内容

const getcontent = () => {
  window.alert(valueHtml.value);
};
</script>

<style scoped lang="scss"></style>

属性说明

注意

editorConfig.MENU_CONF["uploadImage"] 配置属性

// 编辑器配置

const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: { uploadImage: {} },
};

// 图片上传案例
editorConfig.MENU_CONF["uploadImage"] = {
  // 图标上传地址
  server: "https://newapidev.dianyuan.com/admin/system/Uploadimg/uploadImg",
  // 超时时间
  timeout: 5 * 1000, // 5s
  // form-data fieldName ，默认值 'wangeditor-uploaded-image'
  fieldName: `image`,
  // 请求头参数
  meta: {
    module: "community",
  },
  // heaers 头部参数
  headers: {
    "access-token":
      "1wuDp%2FyTmMf%2BWsYw4ymTit%2BxsmrOMzLqXYepM261jXgfVa9%2BCVhkjg1Mm%2B6wDmua",
  },
  metaWithUrl: true, // join params to url
  // 允许上传的最大文件大小
  maxFileSize: 10 * 1024 * 1024, // 10M
  base64LimitSize: 5 * 1024, // 小于5K，就不上传，使用 base64 格式保存
  // 最多可上传几个文件
  maxNumberOfFiles: 10,
  // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
  allowedFileTypes: ["image/png"],
  // 上传前准备
  onBeforeUpload(file: any) {
    console.log(file);
    const result: any = Object.values(file);
    console.log(result);
    if (result[0].extension !== "png") {
      alert("请上传png格式的图片");
      return false;
    } else {
      return file; // will upload this file
    }

    // return false // prevent upload
  },
  onProgress(progress: any) {
    console.log("onProgress", progress);
  },
  onSuccess(file: any, res: any) {
    console.log("onSuccess", file, res);
  },
  onFailed(file: any, res: any) {
    // alert(res.message);
    // console.log("onFailed", file, res);
    console.log(res);
  },
  onError(file: any, err: any, res: any) {
    alert(err.message);
    console.error("onError", file, err, res);
  },

  // 自定义插入图片
  customInsert(res: any, insertFn: any) {
    console.log("customInsert", res);
    const imgInfo = res.data || {};
    const { path, path_real } = imgInfo;
    if (!path_real) throw new Error(`Image url is empty`);
    insertFn(path_real);
    // insertFn(url, alt, href);
  },

  // customUpload(file, insertFn) {
  //   console.log('customUpload', file)

  //   return new Promise((resolve) => {
  //     // Simulate async insert image
  //     setTimeout(() => {
  //       const src = `https://www.baidu.com/img/flexible/logo/pc/result@2.png?r=${Math.random()}`
  //       insertFn(src, 'baidu logo', src)
  //       resolve('ok')
  //     }, 500)
  //   })
  // },

  // customBrowseAndUpload(insertFn) {
  //   alert('Custom browse and upload')

  //   // Simulate async insert image
  //   setTimeout(() => {
  //     const src = 'https://www.baidu.com/img/flexible/logo/pc/result@2.png'
  //     insertFn(src, 'baidu logo', src) // insert a image
  //   }, 500)
  // },
};

图片上传 ​

效果 ​

代码 ​

属性说明 ​

图片上传

效果

代码

属性说明