vue-quill-editor富文本编辑器

最新推荐文章于 2024-05-22 10:42:15 发布
转载最新推荐文章于 2024-05-22 10:42:15 发布 · 155 阅读
0 ·
CC 4.0 BY-SA版权
原文链接：https://segmentfault.com/a/1190000012936434
文章标签：
#javascript #ViewUI
本文介绍了一个基于Vue的富文本编辑器组件实现，该组件使用了vue-quill-editor库，并实现了自定义工具栏和图片上传功能。文章详细展示了如何通过自定义组件的方式增强编辑器的功能，包括字体样式调整、图片上传及缩放等。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
vue-quill-editor 富文本编辑器自定义组件

<template>
  <div>
    <quill-editor v-model="content"
                  ref="myTextEditor"
                  :options="editorOption"
                  @change="onChange"
    >
      <div id="toolbar" slot="toolbar">
        <span class="ql-formats"><button type="button" class="ql-bold" title="加粗"></button></span>
        <span class="ql-formats"><button type="button" class="ql-italic" title="斜体"></button></span>
        <span class="ql-formats"><button type="button" class="ql-underline" title="下划线"></button></span>
        <span class="ql-formats"><button type="button" class="ql-strike" title="删除线"></button></span>
        <span class="ql-formats"><button type="button" class="ql-blockquote" title="引用"></button></span>
        <span class="ql-formats"><button type="button" class="ql-code-block" title="代码"></button></span>
        <span class="ql-formats"><button type="button" class="ql-header" value="1" title="标题1"></button></span>
        <span class="ql-formats"><button type="button" class="ql-header" value="2" title="标题2"></button></span>
        <span class="ql-formats"><button type="button" class="ql-list" value="ordered" title="有序列表"></button></span>
        <span class="ql-formats"><button type="button" class="ql-list" value="bullet" title="无序列表"></button></span>
        <span class="ql-formats"><button type="button" class="ql-script" value="sub" title="下标"></button></span>
        <span class="ql-formats"><button type="button" class="ql-script" value="super" title="上标"></button></span>
        <span class="ql-formats"><button type="button" class="ql-indent" value="-1" title="减少缩进"></button></span>
        <span class="ql-formats"><button type="button" class="ql-indent" value="+1" title="增加缩进"></button></span>
        <span class="ql-formats"><button type="button" class="ql-direction" value="rtl" title="输入方向"></button></span>

        <span class="ql-formats" title="字体大小"><select class="ql-size">
        <option value="small"></option>
        <option selected></option>
        <option value="large"></option>
        <option value="huge"></option>
      </select></span>
        <span class="ql-formats" title="段落格式"><select class="ql-header">
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
        <option value="6"></option>
        <option selected="selected"></option>
      </select></span>
        <span class="ql-formats" title="字体颜色"><select class="ql-color">
        <option selected="selected"></option>
        <option value="#e60000"></option>
        <option value="#ff9900"></option>
        <option value="#ffff00"></option>
        <option value="#008a00"></option>
        <option value="#0066cc"></option>
        <option value="#9933ff"></option>
        <option value="#ffffff"></option>
        <option value="#facccc"></option>
        <option value="#ffebcc"></option>
        <option value="#ffffcc"></option>
        <option value="#cce8cc"></option>
        <option value="#cce0f5"></option>
        <option value="#ebd6ff"></option>
        <option value="#bbbbbb"></option>
        <option value="#f06666"></option>
        <option value="#ffc266"></option>
        <option value="#ffff66"></option>
        <option value="#66b966"></option>
        <option value="#66a3e0"></option>
        <option value="#c285ff"></option>
        <option value="#888888"></option>
        <option value="#a10000"></option>
        <option value="#b26b00"></option>
        <option value="#b2b200"></option>
        <option value="#006100"></option>
        <option value="#0047b2"></option>
        <option value="#6b24b2"></option>
        <option value="#444444"></option>
        <option value="#5c0000"></option>
        <option value="#663d00"></option>
        <option value="#666600"></option>
        <option value="#003700"></option>
        <option value="#002966"></option>
        <option value="#3d1466"></option>
      </select></span>
        <span class="ql-formats" title="背景色"> <select class="ql-background">
        <option value="#000000"></option>
        <option value="#e60000"></option>
        <option value="#ff9900"></option>
        <option value="#ffff00"></option>
        <option value="#008a00"></option>
        <option value="#0066cc"></option>
        <option value="#9933ff"></option>
        <option selected="selected"></option>
        <option value="#facccc"></option>
        <option value="#ffebcc"></option>
        <option value="#ffffcc"></option>
        <option value="#cce8cc"></option>
        <option value="#cce0f5"></option>
        <option value="#ebd6ff"></option>
        <option value="#bbbbbb"></option>
        <option value="#f06666"></option>
        <option value="#ffc266"></option>
        <option value="#ffff66"></option>
        <option value="#66b966"></option>
        <option value="#66a3e0"></option>
        <option value="#c285ff"></option>
        <option value="#888888"></option>
        <option value="#a10000"></option>
        <option value="#b26b00"></option>
        <option value="#b2b200"></option>
        <option value="#006100"></option>
        <option value="#0047b2"></option>
        <option value="#6b24b2"></option>
        <option value="#444444"></option>
        <option value="#5c0000"></option>
        <option value="#663d00"></option>
        <option value="#666600"></option>
        <option value="#003700"></option>
        <option value="#002966"></option>
        <option value="#3d1466"></option>
      </select></span>
        <span class="ql-formats" title="字体"><select class="ql-font">
        <option selected="selected"></option>
        <option value="serif"></option>
        <option value="monospace"></option>
      </select></span>
        <span class="ql-formats" title="对齐">
        <select class="ql-align">
        <option selected="selected"></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
      </span>
        <span class="ql-formats" title="还原">
          <button type="button" class="ql-clean"></button>
      </span>
        <span class="ql-formats" title="超链接" v-if="showMultimedia">
          <button type="button" class="ql-link"></button>
      </span>
        <span class="ql-formats" title="图片" v-if="showMultimedia">
          <button type="button" style="position: relative;">
            <uploadImages
              :width="width"
              :height="height"
              ref="uploadImage"
              propsEleId="propsEleIdCon"
              :uploadTpye="false"
              propsImageUrl="1"
              @emitUploadImgUrl="onUploadSuccess"
            ></uploadImages>
            <svg viewBox="0 0 18 18">
                <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect>
                <circle class="ql-fill" cx="6" cy="7" r="1"></circle>
                <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline>
            </svg>
          </button>
      </span>
        <!--<span class="ql-formats" title="视频" v-if="showMultimedia">
           <button type="button" class="ql-video"></button>
       </span>-->
      </div>
    </quill-editor>
  </div>
</template>
<script>
  import uploadImages from './uploadImages.vue'
  import { Quill } from 'vue-quill-editor'
  import { ImageDrop } from 'quill-image-drop-module'
  import ImageResize from 'quill-image-resize-module'
  Quill.register('modules/imageDrop', ImageDrop)
  Quill.register('modules/imageResize', ImageResize)

  export default {
    props: {
      value: {  // 编辑器的内容
        type: String
      },
      uploadUrl: {  // 上传图片的url
        type: String
      },
      width: {
        type: Number,
        default: 20
      },
      height: {
        type: Number,
        default: 20
      },
      showMultimedia: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        content: '',
        editorOption: {
          modules: {
            toolbar: '#toolbar',
            history: {
              delay: 1000,
              maxStack: 50,
              userOnly: false
            },
            imageDrop: true,
            imageResize: {
              displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white'
              },
              modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
            }
          }
        }
      }
    },
    methods: {
      onChange () {
        this.$emit('input', this.content)
      },
      // 图片上传成功返回url
      onUploadSuccess: function (res) {
        this.editor.focus()
        this.editor.insertEmbed(this.editor.getSelection().index, 'image', res)
      }
    },
    computed: {
      editor () {
        return this.$refs.myTextEditor.quill
      }
    },
    components: {
      uploadImages
    },
    mounted () {
      this.content = this.value
    },
    watch: {
      'value' (newVal, oldVal) {
        if (this.editor) {
          if (newVal !== this.content) {
            this.content = newVal
          }
        }
      }
    }
  }
</script>

<style lang="scss">
  .quill-editor {
    .ql-toolbar.ql-snow {
      z-index: 2222;
    }
    .ql-tooltip  + div{
      border: 0!important;
    }
    .uploadboxImg {
      position: absolute;
      z-index: 2222;
      .label {
        border: 0;
        opacity: 0;
      }
    }
  }
</style>
1.支持自定义上传图片
2.支持图片缩放