vue移动端富文本vue-quill-editor 自定义上传图片和样式

前言

最近要做个移动端富文本，但是需求比较简单，只需要能够上传图片和实现文字位置自定义
找了蛮多文章都建议使用quill。既然大伙儿都推荐它，想必它是有过人之处的。话不多说，开始代码。
先看下移动端效果图

参考链接

• vue-quill-editor在线使用
• quilljs官网快速开始

代码

• ImgText.vue

<template>
  <div class="example">
    <quill-editor
      class="editor"
      ref="myTextEditor"
      :value="content"
      :options="editorOption"
      @change="onEditorChange"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
    />
  </div>
</template>

<script>
  import dedent from 'dedent' // 能保持字符串的换行位置
  import debounce from 'lodash/debounce' // 防抖
  import {
    quillEditor } from 'vue-quill-editor'

  // import theme style
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'

  export default {
   
    name: 'quill-example-snow',
    components: {
   
      quillEditor
    },
    data() {
   
      return {
   
        editorOption: {
   
          modules: {
   
          	// 可以自定义配置，toolbar内的每个二级数组为一个小组模块
          	// 根据需求可以删除不需要的配置
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block'],
              [{
    'header': 1 }, {
    'header': 2 }],
              [{
    'list': 'ordered' }, {