index.vue 3.79 KB
Newer Older
qd01's avatar
qd01 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160
<template>
  <div>
    <el-upload
      :show-file-list="false"
      :action="uploadUrl"
      style="display: none"
      ref="uploadimg"
      name="file"
      :on-success="handleAvatarSuccess"
      :headers="headers"
    >
    </el-upload>
  <div style="border:1px solid #ccc">
    <Toolbar
      :defaultConfig="Editors.toolbarConfig"
      :editor="Editors.editor"
      style="border-bottom: 1px solid #ccc"
    />
    <!-- 编辑器 -->
    <Editor
      ref="editor"
      v-model="Editors.html"
      :defaultConfig="Editors.editorConfig"
      style="height: 520px; overflow-y: hidden"
      @onChange="onChange"
      @onCreated="onCreated"
    />
  </div>

  </div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getToken } from "@/utils/auth";

export default {
  name: "Editors",
  components: { Editor, Toolbar },
  props: {
    /* 编辑器的内容 */
    value: {
      default: "",
    },
    /* 高度 */
    height: {
      type: Number,
      default: null,
    },
    /* 最小高度 */
    minHeight: {
      type: Number,
      default: null,
    },
    /* 只读 */
    readOnly: {
      type: Boolean,
      default: false,
    },
    // 上传文件大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
    /* 类型(base64格式、url格式) */
    type: {
      type: String,
      default: "url",
    }
  },
  data() {
    return {
      // 图片上传
      uploadImg: {
        urls: this.$urls,
        uploadUrl: this.$urls + '/common/upload',
        dialogVisible: false
      },
      // 富文本内容
      Editors: {
        editor: null,
        html: 'hellow',
        toolbarConfig: {},
        editorConfig: { placeholder: '请输入内容...', MENU_CONF: {} },
        mode: 'default' // or 'simple'},
      },

      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken()
      },
    };
  },
  computed: {

  },
  watch: {
    value: {
      handler(val) {
        if (val !== this.Editors.html) {
          this.Editors.html = val === null ? "" : val;

        }
      },
      immediate: true,
    },

  },
  mounted() {

  },
  created() {
    var that=this
    this.Editors.editorConfig.MENU_CONF["uploadImage"] = {
      customBrowseAndUpload(insertFn) {
        // console.log(1)// JS 语法
        that.$refs.uploadimg.$children[0].$refs.input.click();
      }
    }
  },
  beforeDestroy() {
    const editor = this.Editors.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时,及时销毁编辑器
  },
  methods: {
    // 图片上传成功
    handleAvatarSuccess(res, file) {
      // console.log(res,555)
      // this.uploadImg.dialogImageUrl = URL.createObjectURL(file.raw)
      // this.uploadImg.img = res.fileName
      // console.log(1)
      console.log( this.Editors.editor)
      let imgurl=process.env.VUE_APP_BASE_API+res.fileName

      console.log(imgurl,1)
      this.Editors.editor.dangerouslyInsertHtml(`<image src=${imgurl} />`)
    },
    // 接收富文本内容改变
    onCreated(editor) {
      console.log(editor)
      this.Editors.editor = Object.seal(editor) // 一定要用 Object.seal() ,否则会报错
    },
    onChange(editor) {
      this.$emit('onChange',editor.getHtml())
      // console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
    },
    getEditorText() {
      const editor = this.Editors.editor
      if (editor == null) return
      // console.log(editor.getText()) // 执行 editor API
    },
    printEditorHtml() {
      const editor = this.Editors.editor
      if (editor == null) return
      // console.log(editor.getHtml()) // 执行 editor API
    },
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>