vue使用富文本编辑器Vue-Quill-Editor（上传图片后小程序展示）_vue-quill-editor 小程序

1、首先下载Vue-Quill-Editor

npm install vue-quill-editor --save
1

2、然后还得下载quill(Vue-Quill-Editor需要依赖)

npm install quill --save
1

3、这里因为需要的配置文件过多，我们不在main.js里全局声明，直接封装一个vue组件，存在components下

我这里使用的上传图片为ant design的图片上传

<template>
  <div :class="prefixCls">
  <!--files 为后端接收参数一样  -->
    <a-upload
      name="files"
      listType="picture-card"
      class="image-uploader"
      :showUploadList="false"
      :action="uploadUrl"
      :beforeUpload="beforeUpload"
      @change="handleUpload"
    >
    </a-upload>
    <a-spin tip="上传中..." :spinning="spinning">
      <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
        @change="onEditorChange($event)">
      </quill-editor>
    </a-spin>
  </div>
</template>

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

import { quillEditor } from 'vue-quill-editor'
import { uploadUrl } from '@/utils/request'

// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{ 'header': 1 }, { 'header': 2 }],
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],
  [{ 'script': 'sub' }, { 'script': 'super' }],
  [{ 'indent': '-1' }, { 'indent': '+1' }],
  [{ 'direction': 'rtl' }],
  [{ 'color': [] }, { 'background': [] }],
  [{ 'align': [] }],
  ['link', 'image', 'video'],
  ['clean']
]

export default {
  name: 'QuillEditor',
  components: {
    quillEditor
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-editor-quill'
    },
    // 表单校验用字段
    // eslint-disable-next-line
    value: {
      type: String
    }
  },
  data () {
    return {
      content: null,
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions,  //富文本的toolbar内容
            handlers: {  //用于监听图片上传，绑定图片
              'image': function (value) {
                if (value) {
                  document.querySelector('.image-uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      },
      uploadUrl: uploadUrl,
      spinning: false
    }
  },
  methods: {
    //验证图片
    beforeUpload (file) {
      const isImg = file.type === 'image/jpeg' || file.type === 'image/gif' || file.type === 'image/png' || file.type === 'image/bmp'
      if (!isImg) {
        this.$message.error('只能上传图片文件!')
        return false
      }
      const isLt3M = file.size / 1024 / 1024 < 3
      if (!isLt3M) {
        this.$message.error('上传图片必须小于3MB!')
        return false
      }
      this.spinning = true
      return true
    },
    //上传图片的回调函数
    handleUpload (callback) {
      const response = callback.file.response
      if (response) {
        this.spinning = false
        const quill = this.$refs.myQuillEditor.quill
        if (response.status === 10000) {
          this.imageUrl = response.data[0]
          // 获取光标所在位置
          const length = quill.getSelection().index
          // 插入图片  res.info为服务器返回的图片地址
          quill.insertEmbed(length, 'image', this.imageUrl)
          // 调整光标到最后
          quill.setSelection(length + 1)
        } else {
          this.$notification.error({
            message: '上传失败',
            description: response.message
          })
        }
      }
    },
    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)
      this.$emit('change', html)
    }
  },
  //监听文本变化
  watch: {
    value (val) {
      this.content = val
    }
  }
}
</script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

4、其他组件简单使用

<template>
     <div>
          <vue-quill-editor
            :value="articleContent"
            ref="quillEditor"
            @change="onEditorChange"
            style="height: 400px"
          ></vue-quill-editor>
   </div>
</template>
<script>

import VueQuillEditor from '@/components/QuillEditor'

export default {
  components: {  VueQuillEditor },
  data() {
    return {      
      articleContent: '',
    }
  },
 
  methods: {
    onEditorChange(html) {
      this.articleContent = html
    },
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

5、拓展

如果上传存在图片链接需要在移动端展示，比如（uniapp实现的微信小程序需要展示图片过宽），咱们可以这样简单的对图片进行处理；

//对文本文件中的图片进行处理，然后再进行模板编译（v-html）
articleContent= articleContent.replace(/<img/g,"<img style='max-width:100%;height:auto;'")

1
2
3