<template>
  <div id="vueEditor-container">
    <!--富文本编辑器-->
    <VueEditor v-model="content" :editorToolbar="editorToolbar" />
  </div>
</template>

<script>
import { VueEditor } from 'vue2-editor'
export default {
  name: 'vueEditor',
  components: { VueEditor },
  props: {
    value: {
      type: String
    }
  },
  model: {
    prop: 'value',
    event: 'event1'
  },
  watch: {
    value(o, v) {
      this.content = o
    },
    content(o) {
      this.$emit('event1', o)
    }
  },
  data() {
    return {
      content: this.value,
      editorToolbar: [
        [{ header: [false, 1, 2, 3, 4, 5, 6] }],
        ['bold', 'italic', 'underline', 'strike'], // toggled buttons
        [{ align: ['', 'center', 'right', 'justify'] }],
        ['blockquote'],
        [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
        [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
        [{ color: [] }, { background: [] }], // dropdown with defaults from theme
        ['clean','link', 'image']
      ]
    }
  },
  methods: {
    handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      let formData = new FormData()
      formData.append('file', file) //第一个file 后台接收的参数名
      uploadFileComponentForEditor(formData)
        .then(result => {
          let url = result.content.fileUrl // 返回给你的图片路径
          Editor.insertEmbed(cursorLocation, 'image', url)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped></style>
