【无标题】

最新推荐文章于 2024-07-12 09:36:48 发布

Mtao&

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量46

点赞数

分类专栏：富文本 vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_45186619/article/details/129405003

版权

vue 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

富文本

2 篇文章 0 订阅

订阅专栏

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
    <Editor style="height: 500px; overflow-y: hidden" v-model="html" :defaultConfig="editorConfig" @onChange="onChange"
      @onCreated="onCreated" />
  </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
  name: "WangEditor",
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: "",
      toolbarConfig: {
        /* 显示哪些菜单，如何排序、分组 */
        // toolbarKeys: []
        // excludeKeys: [ ], /* 隐藏哪些菜单 */ 
      },
      editorConfig: {
        placeholder: "请输入内容...",
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          // 图片上传
          uploadImage: {
            customUpload: this.uploaadImg
          },
        },
      },
    };
  },
  created() {
    this.html = ``;
  },
  onCreated(editor) {
    this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor);
      editor.showProgressBar(progress);
    },
    uploaadImg(file, insertFn) {
      const ymd = this.$moment(Date.parse(new Date())).format("YYYYMMDD");
      const ymdhmstime = this.$moment(Date.parse(new Date())).format(
        "YYYYMMDDHHmmss"
      );
      let name = file.name;
      const suffix = name.substr(name.indexOf("."));
      const key = `/ghelp/${ymd + "/" + ymdhmstime + suffix}`;
      file.key = key;
      this.$request
        .cosUpload(key, file)
        .then((res) => {
          this.fileList = [
            {
              uid: file.uid,
              name: file.name,
              status: "done",
              url: res,
            },
          ];
          console.log(res);
          insertFn(res,name)
          this.$emit("uploadImg", res)
        })
        .catch((err) => { });
      // this.$emit('uploadImg', file, insertFn)
    },
    onCreated(editor) {
      this.editor = Object.seal(editor);
    },
    onChange(editor) {
      console.log("editor", this.html);
      this.$emit('changeData', this.html)
    },
  },
};
</script>

<style scoped>
@import "@wangeditor/editor/dist/css/style.css";
</style>
``