富文本编辑器vue-quill-editor

1.关于浏览器Chrome版插件
https://github.com/vuejs/vue-devtools
2.关于富文本编辑器
vue-quill-editor

效果图如下：

image.png

关于使用方法：
1）安装：npm install vue-quill-editor --save
2）修改自身图片上传的方法
这里后台会单独提供一个图片上传的接口
采用formData格式

image.png
3）引入编辑器组件
image.png

4）使用

image.png
5）采用这个插件的原因：一个是因为简单，可扩展性强，可以自定义想要的
image.png
代码如下：

<template>
  <div>
    <div v-show="!isShow" class="universityUpload">
      <el-button type="primary">上传图片</el-button>
      <input type="file" name="file" class="uplo-btn" @change="changeImg($event)">
    </div>
    <quillEditor ref="myQuillEditor" v-model="ruleForm.info" :options="editorOption"></quillEditor>
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
// eslint-disable-next-line import/no-extraneous-dependencies
import 'quill/dist/quill.core.css'
// eslint-disable-next-line import/no-extraneous-dependencies
import 'quill/dist/quill.snow.css'
// eslint-disable-next-line import/no-extraneous-dependencies
import 'quill/dist/quill.bubble.css'
import { uploadImgF } from '@/api/plant-mark'

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
  ['blockquote', 'code-block'], // 引用

  [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
  [{ list: 'ordered' }, { list: 'bullet' }], // 列表
  [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
  [{ indent: '-1' }, { indent: '+1' }], // 缩进
  [{ direction: 'rtl' }], // 文本方向

  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }], // 字体
  [{ align: [] }], // 对齐方式
  ['link', 'image', 'video'], // 上传图片、上传视频 链接
  ['clean'], // //清除字体样式
]
export default {
  components: {
    quillEditor,
  },
  props: {
    ruleForm: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      // 富文本框参数设置
      editorOption: {
        placeholder: '请输入...',
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image(value) {
                if (value) {
                  document.querySelector('.universityUpload .uplo-btn').click()
                } else {
                  this.quill.format('image', false);
                }
              },
            },
          },
        },
      },
      isShow: true,
    }
  },
  methods: {
    changeImg(e) {
      const { files } = e.target;
      const formData = new FormData();
      formData.append('multipartFile', files[0]);
      uploadImgF(formData).then((res) => {
        if (res) {
          const { quill } = this.$refs.myQuillEditor
          // 获取光标所在位置
          const length = quill.getSelection().index;
          // 插入图片，res为服务器返回的图片链接地址
          quill.insertEmbed(length, 'image', res.payload.pictureMedium)
          // 调整光标到最后
          quill.setSelection(length + 1)
        } else {
          this.$message({
            message: '图片插入失败',
            type: 'error',
          })
        }
      })
    },
  },
}

</script>
<style>
/* 汉化 */
.ql-editor{
  height:360px;
}
.ql-snow .ql-tooltip[data-mode='link']::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0;
  content: '保存';
  padding-right: 0;
}

.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: '等宽字体';
}
.ql-snow .ql-tooltip.ql-editing{
  left: 0 !important;
}
</style>