vue-quill-editor集成 插入图片 添加图片样式

官方的演示地址

官方demo.

官方文档

官方文档.
中文文档.

下载安装

npm install vue-quill-editor --save
# or
yarn add vue-quill-editor

全局安装

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

Vue.use(VueQuillEditor, /* { default global options } */ )

局部安装

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

import {
    quillEditor
} from 'vue-quill-editor'

export default {
    components: {
        quillEditor
    }
}

一个简单的例子

<template>
  <quill-editor
    ref="myQuillEditor"
    v-model="content"
    :options="editorOption"
    @change="onEditorChange"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
  />
</template>

<script>
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

import {
    quillEditor
} from 'vue-quill-editor'

export default {
  components: {
      quillEditor
  },
  data () {
    return {
      content: '',
      editorOption: {
        // Some Quill options...
      }
    }
  },
  methods: {
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
    }
  }
}
</script>

插入图片封装

准备一个 ImageBlot.js 文件

import {
    Quill
} from 'vue-quill-editor'

    let BlockEmbed = Quill.import('blots/block/embed');
    const Link = Quill.import('formats/link')
    class ImageBlot extends BlockEmbed {
        static create(value) {
            let node = super.create();
            node.setAttribute('style', value.style);
            node.setAttribute('src', value.url);
            return node;
        }
        static value(node) {
            return {
                alt: node.getAttribute('style'),
                url: node.getAttribute('src')
            };
        }
    }
    ImageBlot.blotName = 'image';
    ImageBlot.tagName = 'img';


export default ImageBlot

使用的时候

<script>
import { quillEditor, Quill } from 'vue-quill-editor'
import ImageBlot from './ImageBlot.js'

Quill.register(ImageBlot, true) // 插入图片

export default {
  components: {
    quillEditor
  },
  methods: {
  		setimg(url){
                const that = this
                // 当编辑器中没有输入文本时，这里获取到的 range 为 null
                var range = this.$refs.myQuillEditor.quill.getSelection();
                // 视频插入在富文本中的位置
                var index = 0;
                if (range == null) {
                    index = 0;
                } else {
                    index = range.index;
                }
                //插入图片
                this.$refs.myQuillEditor.quill.insertEmbed(index, 'image', {
                     style: 'width:.5rem;height:.5rem;',
                     url: url
                });
            },
  }
}
</script>