vue 富文本组件封装之vue-quill-editor（基于element+nuxt）

最新推荐文章于 2024-08-05 17:24:04 发布

qq_37530404

最新推荐文章于 2024-08-05 17:24:04 发布

阅读量2.2k

点赞数

分类专栏：富文本 vue nuxt

本文链接：https://blog.csdn.net/qq_37530404/article/details/99718908

版权

本文档介绍了如何在Vue项目中，特别是基于Nuxt框架，封装和使用vue-quill-editor富文本组件。首先通过npm安装所需模块，然后详细说明了在Nuxt全局引入quill的步骤，包括创建quillEditor.js插件文件和在nuxt.config.js中的配置。最后展示了组件和页面的代码实现。

摘要由CSDN通过智能技术生成

一、准备工作：

1、npm install vue-quill-editor quill-image-drop-module quill-image-extend-module quill-image-resize-module

2、文档地址：https://bingkui.gitbooks.io/quill/content/documentation/api/selection.html

二、相关配置

1、nuxt全局引入quill

（1）在plugins文件夹中创建quillEditor.js

import Vue from 'vue'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
if (process.browser) {
// 加一个浏览器端判断，只在浏览器端才渲染就不会报错了
  const VueQuillEditor = require('vue-quill-editor/dist/ssr')
  Vue.use(VueQuillEditor)
}

（2）在nuxt.config.js中引入

plugins: [

    {
      src: '~/plugins/quillEditor', 
      ssr: false
    }

三、组件代码

<template>
  <div class="quill-container">
      <el-upload v-show='false'
        class="upload-image"
        ref="quillUpload"
        :action="action"
        :before-upload="beforeUploadMethod"
        :http-request="httpRequestMethod"
        accept='image/*'>
        <el-button  size="small" type="primary" class='quill-image-input'>点击上传</el-button>
      </el-upload>
      <div class="quill-editor" ref="myQuill"
         :content="content"
         @change="onEditorChange($event)"
         @blur="onEditorBlur($event)"
         @focus="onEditorFocus($event)"
         @ready="onEditorReady($event)"
         v-quill:myQuillEdito