vue-quill-editor富文本使用_quill-esitor-CSDN博客

本文介绍了如何在Vue项目中安装和配置vue-quill-editor富文本编辑器，特别是详细讲解了如何使用quill-image-resize-module来实现图片大小调整功能。同时，针对可能出现的imports错误，提供了在webpack配置中解决的方法，并提及了quill-image-extend-module用于图片上传的组件。

1.npm 安装 vue-quill-editor

npm install vue-quill-editor --save

2.对应的组件中引入详细配置请点击查看

<template>
  <div style="height: 600px">
    <quill-editor
     v-model="content"
     :options="editorOption"
     style="height: 540px;"
    ></quill-editor>
  </div>
</template>


 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
 import { quillEditor, Quill } from 'vue-quill-editor'
 # 引入对应的组件
 export default {
     data () {
		    content： '',
     		editorOption: {}     # 各种配置内容 
     },
	 components: {
	   	quillEditor
	 }
 }

quill-image-resize-module的使用（改变富文本内部图片的大小）
1.安装对应的包

npm install quill-image-resize-module --save
//   注意：安装时如果报错，请先检查对应的node版本,本人只有在node 8.6版本下才安装成功

2.对应的组件引入

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor, Quill } from 'vue-quill-editor'
import ImageResize from 'quill-image-resize-module'
// 注册
Quill.register('modules/imageResize', ImageResize)

如果运行时报 imports 错误，请在webpack的配置里添加：

  plugins: [
　　new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js'
      // 'Quill': 'quill/dist/quill.js'
　　　})
  ]

其他组件
quill-image-extend-module // 图片的服务器上传

主要文件代码：

<template>
  <div style="height: 600px">
    <quill-editor
     v-model="content"
     :options="editorOption"
     @change="onEditorChange"
     style="height: 540px;"
    ></quill-editor>
  </div>
</template>

<script>
  import config from '@/config/index'
  import Fetch from '@/apis/fetch/fetch'
  import 'quill/dist/quill