Vue中Wangeditor富文本编辑器

<template>
  <div style="border: 1px solid #ccc; margin-top: 10px;z-index:999;width:800px;height: 400px;">
    <!-- 工具栏 -->
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
    <!-- 编辑器 -->
    <Editor style="height:400px; overflow-y: hidden;" :defaultConfig="editorConfig" v-model="content"
      @onChange="onChange" @onCreated="onCreated" />
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {

  data() {
    return {
      content:'',
      baseurl: 'baidu.com',
      editor: null,
      toolbarConfig: {
        /* 显示哪些菜单，如何排序、分组 */
        // toolbarKeys: [],
        /* 隐藏哪些菜单 */
        excludeKeys: [
          // '|',
          'blockquote',
          // 'fontSize',
          // 'fontFamily',
          'lineHeight',
          // 'bulletedList',
          // 'numberedList',
          'todo',
          'emotion',
          'group-video',
          'group-indent',
          // 'group-more-style',
          'insertTable',
          'codeBlock',],
      },
      editorConfig: {
        placeholder: '点击全屏介绍产品吧...',
        // autoFocus: false,
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          // 配置字号
          // fontSize: [... ],
          // 图片上传
          uploadImage: {
            server: `${this.$baseurl}/api/img/upload`,
            fieldName: 'file',
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedimgTypes: [],
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,
            // 跨域是否传递 cookie ，默认为 false
            withCredentials: false,
            // 超时时间，默认为 10 秒
            timeout: 10 * 1000, //10 秒
            // 上传前
            // 自定义插入图片
            onBeforeUpload(imgs) {
              console.log(imgs)
              return imgs;
            },
            // 自定义插入图片
            customInsert(res, insertFn) {
              // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
              //人家这句话都说了
              if (res.code === 200) {
                let url = 'http://192.168.4.150:8888' + res.data.filePath
                insertFn(url);
              } else {
                this.message({
                  type: '上传错误'
                })
              }
              // 从 res 中找到 url alt href ，然后插入图片

              // console.log(res, "res.data")
            },
            // 单个文件上传成功之后
            onSuccess(img, res) {
              // console.log(`${img.name} 上传成功`, res);
            },
            // 单个文件上传失败
            onFailed(img, res) {
              console.log(img, res)
            },
            // 上传进度的回调函数
            onProgress(progress) {
              // console.log('progress', progress);
              // progress 是 0-100 的数字
            },
            // 上传错误，或者触发 timeout 超时
            onError(img, err, res) {
              // console.log(`${img.name} 上传出错`, err, res);
            }
          },
        }
      },
    }
  },
  mounted() {
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
    },
    onChange(editor) {
      const text = editor.getHtml()
      console.log(text);
      this.$emit('DepartAdd', this.content)
      this.$emit('add', this.content,)
    },
    clearContent() {
      this.content = ''
    }
    //你整体就不对
    // 哪里不对了我给你找一下

  },

  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
  },
  components: { Editor, Toolbar },
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>