富文本输入框，上传图片url地址

1、npm安装编辑器组件

npm install vue-quill-editor –save

2、完成以后在main.js引入

import  VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

3、 然后新建Editor.vue文件 ，代码粘贴上去就行

<template>
    <quill-editor class="editor"
            v-model="content" 
            ref="myQuillEditor" 
            :options="editorOption" 
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
 export default {
    name: "Editor",
    data() {
      return {
        content:null,
        editorOption:{}
        };
    },
    methods:{
        onEditorBlur(){
        },
        onEditorFocus(){//获得焦点事件
        },
        onEditorChange(){//内容改变事件
        }
    }
</script>
 
<style>
 
这里可以自定义样式以及安放的位置
 
</style>

4、在你的vue文件中使用详细代码

1、dom代码

 <el-form
          ref="markDownFrom"
          class="data-form"
          :model="searchFrom"
          label-position="left"
          label-width="110px"
          :rules="rules"
        >
          <div>
            <!-- 图片上传组件辅助-->
            <el-upload
              class="avatar-uploader"
              :action="serverUrl"
              :show-file-list="false"
              :on-success="uploadSuccess"
              :on-error="uploadError"
              :before-upload="beforeUpload"
            />
            <el-row v-loading="quillUpdateImg">
              <el-form-item label="具体要求" prop="requirement">
                <quillEditor
                  ref="detailQuillEditor"
                  v-model="searchFrom.requirement"
                  :options="editorOption"
                  class="editor"
                  :disabled="allDisabled"
                />
              </el-form-item>
            </el-row>
          </div>
        </el-form>

2、在data里面初始化变量和配置

quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
      serverUrl: 'http://10.13.100.19:1987/upload', // 这里写你要上传的图片服务器地址
      editorOption: {
        placeholder: '请输入',
        theme: 'snow', // or 'bubble'
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              'image': function(value) {
                if (value) {
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }, // 富文本编辑器配置

3、js实现

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // toggled buttons
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }], // custom button values
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],
  [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
  [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
  [{ 'direction': 'rtl' }], // text direction

  [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],
  ['link', 'image'],
  ['clean'] // remove formatting button
]
export default toolbarOptions



import { quillEditor } from 'vue-quill-editor'
  components: { quillEditor },
上传图片的处理方法
 beforeUpload() {
      this.quillUpdateImg = true
    },
    // 上传图片成功
    uploadSuccess(res, file) {
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      const quill = this.$refs.detailQuillEditor.quill
      // 如果上传成功
      // 获取光标所在位置
      const length = quill.getSelection().index
      // 插入图片  res.info为服务器返回的图片地址
      quill.insertEmbed(length, 'image', res.content.url)
      // 调整光标到最后
      quill.setSelection(length + 1)

      // loading动画消失
      this.quillUpdateImg = false
    },
    // 上传图片失败
    uploadError(res, file) {
      // loading动画消失
      this.quillUpdateImg = false
      this.quillRecoredUpdateImg = false
      this.$message.error('图片插入失败')
    },

参考文档
https://blog.csdn.net/qq_39530754/article/details/105603227
https://www.jianshu.com/p/bd2915058a11