Vue3项目引入 vue-quill 编辑器组件并封装使用

简介: 本文介绍了如何在Vue3项目中引入并封装使用`vue-quill`富文本编辑器组件,包括安装配置、父页面实现、子组件设计以及使用方法和效果展示。

这是一款支持Vue3的富文本编辑器
GitHub地址:https://github.com/vueup/vue-quill/
VueQuill官网:https://vueup.github.io/vue-quill/

// 查看 @vueup/vue-quill 版本
npm view @vueup/vue-quill versions --json

// 导入 @vueup/vue-quill 依赖包
npm i @vueup/vue-quill@1.0.0

一、首先实现父页面【index.vue】

<template>
  <div style="padding: 100px;">
     <QuillEditor ref="quillEditorRef" style="width: 100%; height: 250px;"/>

     <p style="text-align: center; margin-top: 10px;">
        <el-button type="primary" plain @click="handleSetContentClick($event)">设置内容</el-button>
        &nbsp;&nbsp;
        <el-button type="success" plain @click="handleGetContentClick($event)">获取内容</el-button>
    </p>

    <p>
      {
   
   {
   
    editorContent }}
    </p>
  </div>
</template>

<script>
import QuillEditor from './components/quillEditor'

export default {
   
   
  name: 'QuillEditorComponent',
  components: {
   
   
    QuillEditor
  },
  data () {
   
   
    return {
   
   
      // 编辑器内容
      editorContent: ''
    }
  },
  methods: {
   
   
    /**
     * 设置编辑器内容
     */
    async handleSetContentClick(evt) {
   
   
      this.$elementUtil.handleElButtonBlur(evt)

      const refs = await this.$refs.quillEditorRef;
      const status = await refs.handleSetHtml('<h1>你好世界!</h1>')
      console.log('handleSetContentClick =>', status)
    },

    /**
     * 获取编辑器内容
     */
    async handleGetContentClick(evt) {
   
   
      this.$elementUtil.handleElButtonBlur(evt)

      const refs = await this.$refs.quillEditorRef;
      this.editorContent = await refs.handleGetHtml();
      console.log('handleGetContentClick =>', this.editorContent)
    },
  }
}
</script>

二、然后设计子组件【quillEditor.vue】

<template>
  <QuillEditor
    ref="quill"
    toolbar="full"
    theme="snow"
    content-type="html"
    :disabled="true"
    :content="content"
    :options="options"
  />
</template>

<script>
import {
   
    QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

export default {
   
   
  components: {
   
   
    QuillEditor
  },
  data () {
   
   
    return {
   
   
      // 编辑器内容
      content: '',

      // 编辑器选项
      options: {
   
   
        debug: 'info',
        modules: {
   
   
          toolbar: ['bold', 'italic', 'underline']
        },
        placeholder: '请输入内容~',
        readOnly: false,
        theme: 'snow'
      }
    }
  },
  methods: {
   
   
    /**
     * 设置编辑器 Text 内容
     */
    async handleSetText(content) {
   
   
      const refs = await this.$refs
      refs.quill.setText(content)
      return 'OK'
    },

    /**
     * 获取编辑器 Text 内容
     */
    async handleGetText() {
   
   
      const refs = await this.$refs
      return refs.quill.getText();
    },

    /**
     * 设置编辑器 Html 代码
     */
    async handleSetHtml(content) {
   
   
      const refs = await this.$refs
      refs.quill.setHTML(content)
      return 'OK'
    },

    /**
     * 获取编辑器 Html 代码
     */
    async handleGetHtml() {
   
   
      const refs = await this.$refs
      return refs.quill.getHTML();
    }
  }
}
</script>

三、效果如下 ~

目录
相关文章
|
开发框架 JavaScript 前端开发
百度富文本编辑器配置(vue3)
百度富文本编辑器配置(vue3)
|
5月前
|
存储 人工智能 数据库
Codel:AI代理工具,支持在终端、浏览器、编辑器执行复杂任务和项目
Codel是一款全自主AI代理工具,支持在终端、浏览器和编辑器中执行复杂任务和项目。它运行在沙盒化的Docker环境中,具备自主操作能力,内置浏览器和文本编辑器,所有操作记录存储于PostgreSQL数据库。Codel能够自动完成复杂任务,如创建项目结构、进行网络搜索等,适用于自动化编程、研究与开发、教育与培训以及数据科学与分析等多个领域。
181 11
Codel:AI代理工具,支持在终端、浏览器、编辑器执行复杂任务和项目
|
6月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
381 9
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
8月前
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
9月前
|
JavaScript
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用,支持单个或多个图片点击、粘贴、拖拽上传,Vue3.X项目也可直接使用
这篇文章介绍了如何在Vue 2.X项目中封装和使用WangEditor 5富文本编辑器,支持图片的点击、粘贴和拖拽上传,同时提到封装的组件也适用于Vue 3.X项目,并提供了详细的使用示例和后端配置。
848 1
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用,支持单个或多个图片点击、粘贴、拖拽上传,Vue3.X项目也可直接使用
|
9月前
|
存储 JavaScript 前端开发
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程,包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
|
10月前
|
JSON JavaScript 数据格式
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
|
9月前
|
前端开发 算法
ProFlow 流程编辑器框架问题之FlowView 组件中添加节点和边缘数据如何解决
ProFlow 流程编辑器框架问题之FlowView 组件中添加节点和边缘数据如何解决
107 0
|
10月前
|
前端开发 JavaScript Java
文本----简单编写文章的方法(中),后端接口的编写,自己编写好页面就上传到自己的服务器上,使用富文本编辑器进行编辑,想写好一个项目,先分析一下需求,再理一下实现思路,再搞几层,配好参数校验,lomb
文本----简单编写文章的方法(中),后端接口的编写,自己编写好页面就上传到自己的服务器上,使用富文本编辑器进行编辑,想写好一个项目,先分析一下需求,再理一下实现思路,再搞几层,配好参数校验,lomb
文本---富文本编辑器------Vue3使用富文本编辑器,Quill,全局样式和组件和样式的写法
文本---富文本编辑器------Vue3使用富文本编辑器,Quill,全局样式和组件和样式的写法