guns-separation/_web/src/components/quillEditorComponent.vue

<template>
  <div class="quillEditorComponent">
    <quill-editor
      class="editor"
      ref="myTextEditor"
      v-model="currentcontent"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      @change="onEditorChange"
    ></quill-editor>
    <!-- 文件上传input 将它隐藏-->
    <a-upload
      style="display:none"
      :action="UploadUrl()"
      :show-file-list="false"
      :before-upload="newEditorbeforeupload"
      :customRequest="fileUpload"
      ref="uniqueId"
    >
    </a-upload>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import homeApi from '@/api/homeApi'
import { setArticleContent, imgUrlDel, setImgUrl } from '@/utils/img'

export default {
  name: 'QuillEditorComponent',
  components: {
    quillEditor
  },
  props: [],
  data () {
    return {
      content: '',
      currentcontent: '',
      editorOption: {
        theme: 'snow',
        boundary: document.body,
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [
              {
                header: 1
              },
              {
                header: 2
              }
            ],
            [
              {
                list: 'ordered'
              },
              {
                list: 'bullet'
              }
            ],
            [
              {
                script: 'sub'
              },
              {
                script: 'super'
              }
            ],
            [
              {
                indent: '-1'
              },
              {
                indent: '+1'
              }
            ],
            [
              {
                direction: 'rtl'
              }
            ],
            [
              {
                size: ['small', false, 'large', 'huge']
              }
            ],
            [
              {
                header: [1, 2, 3, 4, 5, 6, false]
              }
            ],
            [
              {
                color: []
              },
              {
                background: []
              }
            ],
            [
              {
                font: []
              }
            ],
            [
              {
                align: []
              }
            ],
            ['clean'],
            ['link', 'image', 'video']
          ]
        },
        placeholder: '请在这里开始输入...',
        readOnly: false
      }
    }
  },
  mounted () {
    var vm = this
    var imgHandler = async function (state) {
      if (state) {
        var fileInput = vm.$refs.uniqueId.$el.querySelector('input') // 隐藏的file元素
        fileInput.click() // 触发事件
      }
    }
    this.$refs.myTextEditor.quill.getModule('toolbar').addHandler('image', imgHandler)
  },
  computed: {
    editor () {
      return this.$refs.myTextEditor.quillEditor
    }
  },
  methods: {
    onEditorBlur (editor) {
      console.log('editor blur!', editor)
    },
    onEditorFocus (editor) {
      console.log('editor focus!', editor)
    },
    onEditorReady (editor) {
      // this.currentcontent=this.content
      console.log('editor ready!', editor)
    },
    initEditorContent (content) {
      this.content = setArticleContent(content)
      this.currentcontent = this.content
    },
    onEditorChange ({ editor, html, text }) {
      // console.log('editor change!', editor, html, text)
      this.currentcontent = html
      this.$emit('contentGet', html)
    },
    newEditorbeforeupload (file) {
      var $uptypes = ['image/jpg', 'image/png', 'image/jpeg']
      const isJPG = $uptypes.indexOf(file.type) > -1
      const isLt1M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt1M
    },
    UploadUrl () {
      return (
         process.env.VUE_APP_API_BASE_URL + '/zjxl/banner/file'
      )
    },
    fileUpload (file) {
      const formData = new FormData()
      formData.append('file', file.file)
      homeApi.fileUpload(formData).then(res => {
        if (res.status === 10000) {
          var picUrl = setImgUrl(res.result.fullUri)
          var addImgRange = this.$refs.myTextEditor.quill.getSelection()
          this.$refs.myTextEditor.quill.insertEmbed(addImgRange != null ? addImgRange.index : 0, 'image', picUrl, res.result.fileName)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    imgUrlDel () {
      var content = imgUrlDel(this.currentcontent)
      return content
    }
  }
}
</script>

<style lang="less">
.quillEditorComponent {
  .editor {
    line-height: normal !important;
    height: 300px;
    width: 100%;
  }
  .ql-container {
    height: 70%;
  }
  .ql-toolbar.ql-snow {
    border: 1px solid #e1e1e1;
  }
  .ql-container.ql-snow {
    border: 1px solid #e1e1e1;
  }
  .ql-snow .ql-tooltip[data-mode='link']::before {
    content: '请输入链接地址:';
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
  }

  .ql-snow .ql-tooltip[data-mode='video']::before {
    content: '请输入视频地址:';
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
    content: '10px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
    content: '18px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
    content: '32px';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
    content: '标题1';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
    content: '标题2';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
    content: '标题3';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
    content: '标题4';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
    content: '标题5';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
    content: '标题6';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
    content: '衬线字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
    content: '等宽字体';
  }
}
</style>