Vue实战笔记(三) 引入Quill Editor

news2024/11/26 8:50:28

大家好，我是半虹，这篇文章来讲如何在 Vue 中引入 Quill \text{Quill} Quill

1、背景介绍

在前端开发中，富文本编辑器是一个重要的功能组件，方便用户创建和编辑格式丰富的文本内容

目前在市面上有着很多富文本编辑器组件，其中 Quill \text{Quill} Quill 凭着易于上手、功能丰富逐渐地成为主流选择之一


最近做项目时遇到一个紧急的需求，那就是一天之内在原有项目当中，增加一个富文本编辑功能

经过调研之后最终还是选择 Quill \text{Quill} Quill ，并且在网上搜集了很多资料，踩了很多坑后才能够最终完成


这篇文章将会从零开始，介绍如何在 Vue2 和 Vue3 中引入 Quill \text{Quill} Quill ，并介绍 Quill \text{Quill} Quill 的最基本配置

这里之所以要从零开始，就是希望能最快速地带大家上手用 Quill \text{Quill} Quill ，以避免踩各种奇奇怪怪的坑


2、在 Vue2 中引入 Quill

在这部分，我们首先通过 Vue 脚手架 @vue/cli 新建 Vue2 项目 ，然后在该项目中引入 Quill \text{Quill} Quill

在此之前，先说一下环境 ：

  • Node：12.18.2
  • NPM：6.14.5
  • @vue/cli：4.5.12

准备就绪，下面正式开始：

  1. 创建项目

    我们可以在命令行中通过以下命令新创建一个 Vue2 项目

    > vue create vue2-quill-demo

    输入上述的命令后，会有三个选项，这里我们选择第一个，创建默认的 Vue2 项目

    ? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default ([Vue 3] babel, eslint)
  Manually select features

    执行上述的选择后，等待完成即可，新建的目录结构如下：

    + vue2-quill-demo
    + node_modules      // 外部模块目录
    + public            // 项目资源目录
    + src               // 源码目录
        + assets        // 组件资源目录
        + components    // 公共组件目录
        - App.vue       // 根组件
        - main.js       // 主入口
    - babel.config.js   // 编译配置文件
    - package-lock.json // 项目配置文件 (自动生成)
    - package.json      // 项目配置文件 (手动维护)
    - README.md         // 项目描述文件

  2. 安装模块

    我们既可以直接安装 quill ，也可以选择安装其在 Vue2 之上的封装 vue-quill-editor

    在这里我们选择后者，下面以 npm 的方式安装，安装后的模块存放在 node_modules 目录

    > npm install --save vue-quill-editor@3.0.6

  3. 注册模块

    使用组件之前要先进行注册，注册组件的方式有两种 ，分别是全局注册和局部注册

    全局注册：在主入口文件添加以下代码，即 main.js，之后可以在任意页面中使用

    import Vue from 'vue'
import App from './App.vue'

// 新增：导入组件
import VueQuillEditor from 'vue-quill-editor' // 导入 VueQuillEditor，不带 {}

// 新增：导入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 新增：注册组件
Vue.use(VueQuillEditor) // 这里用的是 use

new Vue({
  render: h => h(App),
}).$mount('#app')

    局部注册：在需要的页面添加以下代码，如 xxx.vue，之后只能在当前页面中使用

    <script>
// 新增：导入组件
import { quillEditor } from 'vue-quill-editor' // 导入 quillEditor，带有 {}

// 新增：导入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  // 新增：注册组件
  components : {
    quillEditor
  }
}
</script>

  4. 使用模块

    之后，在需要引入组件的页面，添加以下代码即可，为了演示方便，以下示例直接在 App.vue 中引入

    <template>
  <div id="app">
    <quill-editor
      ref="QuillEditor"
      v-model="content"
      v-bind:options="options"
    />
    <button v-on:click="print">Print Content In Console</button>
  </div>
</template>

<script>
// 默认已全局注册
// 如果是局部注册，则需要按照上述所说，在当前页面添加代码

export default {
  name: 'App',
  data() {
    return {
      content: "", // 内容
      options: {}, // 配置
    }
  },
  methods: {
    print: function() {
      console.log(this.content)
    }
  }
}
</script>

    最后，可通过以下命令在本地上运行项目

    > npm run serve

    此时，在浏览器中打开指定端口即可看到渲染效果如下

    渲染效果

3、在 Vue3 中引入 Quill

在这部分，我们还是通过 Vue 脚手架 @vue/cli 新建 Vue3 项目 ，然后在该项目中引入 Quill \text{Quill} Quill

与上类似，环境还是一样 ：

  • Node：12.18.2
  • NPM：6.14.5
  • @vue/cli：4.5.12

不仅如此，步骤也差不多：

  1. 创建项目

    我们还是在命令行中通过相同命令新创建一个 Vue3 项目

    > vue create vue3-quill-demo

    输入上述的命令后，会有三个选项，这里我们选择第二个，创建默认的 Vue3 项目

    ? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
> Default ([Vue 3] babel, eslint)
  Manually select features

    执行上述的选择后，等待完成即可，目录结构也是一样的

    + vue3-quill-demo
    + node_modules      // 外部模块目录
    + public            // 项目资源目录
    + src               // 源码目录
        + assets        // 组件资源目录
        + components    // 公共组件目录
        - App.vue       // 根组件
        - main.js       // 主入口
    - babel.config.js   // 编译配置文件
    - package-lock.json // 项目配置文件 (自动生成)
    - package.json      // 项目配置文件 (手动维护)
    - README.md         // 项目描述文件

  2. 安装模块

    我们既可以直接安装 quill，也可以选择安装其在 Vue3 之上的封装 @vueup/vue-quill

    同样的我们选择后者 ，但是要注意，其在 Vue2 和 Vue3 之上的封装是不同的，不要装错

    > npm install --save @vueup/vue-quill@1.2.0

  3. 注册模块

    使用组件之前要先进行注册，注册组件的方式有两种 ，分别是全局注册和局部注册

    全局注册：在主入口文件添加以下代码，即 main.js，之后可以在任意页面中使用

    import { createApp } from 'vue'
import App from './App.vue'

// 新增：导入组件
import { QuillEditor } from '@vueup/vue-quill' // 导入 QuillEditor，带有 {}

// 新增：导入样式
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import '@vueup/vue-quill/dist/vue-quill.bubble.css'

const app = createApp(App)

// 新增：注册组件
app.component('QuillEditor', QuillEditor) // 这里用的是 component

app.mount('#app')

    局部注册：在需要的页面添加以下代码，如 xxx.vue，之后只能在当前页面中使用

    <script>
// 新增：导入组件
import { QuillEditor } from '@vueup/vue-quill' // 导入 QuillEditor，带有 {}

// 新增：导入样式
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import '@vueup/vue-quill/dist/vue-quill.bubble.css'

export default {
  // 新增：注册组件
  components : {
    quillEditor
  }
}
</script>

  4. 使用模块

    之后，在需要引入组件的页面，添加以下代码即可，为了演示方便，以下示例直接在 App.vue 中引入

    <template>
  <div>
    <!-- 注意区别，content 和 contentType -->
    <quill-editor
      ref="QuillEditor"
      v-model:content="content"
      v-bind:options="options"
      contentType="html"
    />
    <button v-on:click="print">Print Content In Console</button>
  </div>
</template>

<script>
// 默认已全局注册
// 如果是局部注册，则需要按照上述所说，在当前页面添加代码

export default {
  name: 'App',
  data() {
    return {
      content: "", // 内容
      options: {}, // 配置
    }
  },
  methods: {
    print: function() {
      console.log(this.content)
    }
  }
}
</script>

    最后，可通过以下命令在本地上运行项目，并打开浏览器验证效果

    > npm run serve

    注意，你可能遇到下面的报错：

    Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.

    那么只要按照要求去升级就行：

    > npm install vue@3.2.26

4、进阶配置

好了，最后说一下 Quill \text{Quill} Quill 的一些基础配置，这里主要是说 Quill \text{Quill} Quill 绑定的 options 配置项

<script>

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"}],                         // 文字方向
  [{ "size": ["small", false, "large", "huge"] }], // 字体大小
  [{ "header": [1, 2, 3, 4, 5, 6, false] }],       // 标题大小
  [{ "color": [] }, { "background": [] }],         // 字体颜色、背景颜色
  [{ "font": [] }],                                // 字体种类
  [{ "align": [] }],                               // 对齐方式
  ["clean"],                                       // 清除格式
  ["link", "image", "video"],                      // 链接、图片、视频
]

export default {
  data() {
    return {
      content: "", // 内容
      options: {   // 配置
        placeholder: "please input here",
        theme: "snow",
        modules: {
          toolbar: {
            container: toolbarOptions, // 显示配置
            handlers: {                // 逻辑配置
              // "image": this.handleImageButton, // 自定义 image 按钮的处理函数
              // "clean": this.handleCleanButton, // 自定义 clean 按钮的处理函数
              // ...
            }
          }
        }
      }
    }
  }
}

</script>

好啦，本文到此结束，感谢您的阅读！

如果你觉得这篇文章有需要修改完善的地方，欢迎在评论区留下你宝贵的意见或者建议

如果你觉得这篇文章还不错的话，欢迎点赞、收藏、关注，你的支持是对我最大的鼓励 (/ω＼)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/534104.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

chatgpt赋能Python-30_days_of_python

chatgpt赋能Python-30_days_of_python

用20行Python写的入门级小游戏:“猜数字”游戏 如果你想了解Python编程语言并开始使用它&#xff0c;那么编写一个短小精简的小游戏是一个不错的起点。在这篇文章中&#xff0c;我们将介绍一个入门级小游戏&#xff1a;猜数字游戏。 该游戏旨在帮助你了解Python命令行输入输出…
阅读更多...
QRegion 限制 QPainter 的绘制区域

QRegion 限制 QPainter 的绘制区域

我有这样一个需求。 有一张图片&#xff0c;这张图片上面被我用不同的颜色画了不同的区域&#xff0c;然后我想选择这张图片中的某一种颜色&#xff0c;只在这种颜色所在的区域内进行绘制或者用橡皮擦擦除这种颜色&#xff0c;而不会影响其他颜色。 看着这个需求的时候&#…
阅读更多...
Java【网络原理2】TCP 协议的连接管理机制 : 三次握手和四次挥手到底是怎么回事?

Java【网络原理2】TCP 协议的连接管理机制 : 三次握手和四次挥手到底是怎么回事?

文章目录 前言一、三次握手二、四次挥手总结 前言 &#x1f4d5;各位读者好, 我是小陈, 这是我的个人主页 &#x1f4d7;小陈还在持续努力学习编程, 努力通过博客输出所学知识 &#x1f4d8;如果本篇对你有帮助, 烦请点赞关注支持一波, 感激不尽 &#x1f4d9; 希望我的专栏能够…
阅读更多...
让AI来预测一下2023年软考系统分析师案例分析的新技术考点

让AI来预测一下2023年软考系统分析师案例分析的新技术考点

预测 AI对考试的帮助可能没法雪中送炭&#xff0c;但是也许可以锦上添花。AI的预测新技术考点内容&#xff08;仅供参考&#xff09;如下&#xff1a; 由于我是一个AI模型&#xff0c;无法准确预测未来的技术内容。但是根据当前的发展趋势和历史变化&#xff0c;以下是可能出…
阅读更多...
将核心交换机配置为NTP服务器

将核心交换机配置为NTP服务器

AR配置外源NTP 1&#xff0e;配置ntp <XQ-R1220>sys [XQ-R1220]ntp-service unicast-server 120.25.115.20 #阿里云ntp [XQ-R1220]ntp-service unicast-server 203.107.6.88 #阿里云ntp 2&#xff0e;查看ntp状态 <XQ-R1220>display ntp status clock sta…
阅读更多...
什么是以太坊Layer2？

什么是以太坊Layer2？

目录 1. Plasma2. State Channels3. Sidechains4. Rollups5. Optimistic Rollups 以太坊&#xff08;Ethereum&#xff09;是一种基于区块链技术的分布式计算平台&#xff0c;提供了智能合约的支持&#xff0c;使得开发者可以构建基于以太坊的去中心化应用&#xff08;DApps&am…
阅读更多...
什么是【网络安全】?给你一步到位了解清楚

什么是【网络安全】?给你一步到位了解清楚

网络安全是什么&#xff1f; 在俺的私信里经常有人问&#xff1a; 网络安全技术是否就等同于”黑客”技术&#xff1f; 大漏特漏&#xff01;&#xff01;&#xff01; 所谓的「黑客」或「渗透」技术&#xff0c;仅仅是网络安全领域的分支&#xff0c;不能代表其全貌。 随着…
阅读更多...
Open Judge——动态规划练习

Open Judge——动态规划练习

目录 了解动态规划 2760:数字三角形 1、题目 2、代码 4120:硬币 1、题目 2、代码 了解动态规划 动态规划 是编程解题的一种重要手段。1951 年美国数学家 R.Bellman 等人&#xff0c;根据一类多阶段问题的特点&#xff0c;把多阶段决策问题变换为一系列互相联系的单阶段问…
阅读更多...
Centos7连接外网的相关配置与实现yum本地与网络配置（yum配置不使用wget）

Centos7连接外网的相关配置与实现yum本地与网络配置（yum配置不使用wget）

目录 一、背景 二、实现连接外网的相关配置 1&#xff09;查看物理机的IP相关信息 2&#xff09;配置物理机指定IP 3&#xff09;根据物理机配置虚拟机网卡 4&#xff09;进入虚拟机&#xff0c;配置网卡 三、yum配置 1&#xff09;切换到yum软件仓库配置文件目录中 2…
阅读更多...
队列的基本操作详细介绍 看了就会！！！

队列的基本操作详细介绍 看了就会！！！

文章目录 队列的介绍队列的概念队列的结构生活中队列的运用实例 队列的实现初始化队列队尾入队列队头出队列获取队列头部元素获取队列尾部元素判断队列是否为空获取队列中有效元素个数销毁队列 队列的介绍 队列的概念 队列&#xff1a;只允许在一端进行插入数据操作&#xff…
阅读更多...
React18.x + i18next + antd 国际化正确使用姿势及避坑指南

React18.x + i18next + antd 国际化正确使用姿势及避坑指南

如果你使用这个教程还不能够解决你的问题的话&#xff0c;直接私信我&#xff0c;免费一对一给你解决。 一、使用vite创建一个react项目 具体的创建方法大家参考vite官方文档&#xff0c;大概的操作如下&#xff0c;如果需要更详细的&#xff0c;大家去自行搜索即可 pnpm cr…
阅读更多...
【LeetCode】172. 阶乘后的零

【LeetCode】172. 阶乘后的零

172. 阶乘后的零&#xff08;中等&#xff09; 方法一 思路 当一个数乘以 10 &#xff0c;此时数字结尾会增加一个 0&#xff0c;因此我们可以计算 n! 能够得出多少个 10 &#xff0c;就说明能得到多少个 0 。 具体对于5!&#xff0c;也就是 5 * 4 * 3 * 2 * 1 120&#xf…
阅读更多...
CSS第一天总结

CSS第一天总结

css第一天总结 css简介 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容&#xff08;字体、大小、对齐方式等&#xff09;、图片的外形&#xff08;宽高、…
阅读更多...
【pyq文案】合理但有病の自拍文案

【pyq文案】合理但有病の自拍文案

1、丑一眼 2、强子&#xff0c;妈发自拍了 3、真是方向失了南北&#xff0c;美的有点东西 4、妈的看自己就烦&#xff0c;800块出了&#xff0c;完美无瑕 5、拍了拍自己 6、这张脸&#xff0c;全是这双手给的 7、糟糕&#xff0c;没有酷起来 8、制造美女我比女娲还牛 …
阅读更多...
ANR原理篇 - ANR原理总览

ANR原理篇 - ANR原理总览

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 文章目录 系列文章目录前言ANR流程概览ANR触发机制一、service超时机制二、broadcast超时机制三、provider超…
阅读更多...
支付系统设计四：支付核心设计01-总览

支付系统设计四：支付核心设计01-总览

文章目录 前言一、应用架构二、开发框架三、逻辑架构四、分层架构1. 松散分层架构2. 分层职责 总结 前言 在《支付系统设计一&#xff1a;支付系统产品化》文章中&#xff0c;我们知道支付核心对应于平台产品层&#xff0c;主要具有以下功能&#xff1a; 为公司各业务线提供丰…
阅读更多...
LangChain实现自主代理（Autonomous Agents）

LangChain实现自主代理（Autonomous Agents）

LangChain实现自主代理&#xff08;Autonomous Agents&#xff09; LangChain实现自主代理&#xff08;Autonomous Agents&#xff09;简介核心技术让 AI 使用工具的案例使用搜索引擎使用知识库 Here’s the table of contents: LangChain实现自主代理&#xff08;Autonomous …
阅读更多...
【A*算法——清晰解析 算法逻辑——算法可以应用到哪些题目】例题1.第K短路 例题2.

【A*算法——清晰解析 算法逻辑——算法可以应用到哪些题目】例题1.第K短路 例题2.

A*算法 A*算法是什么例题1. 第K短路题意解析 例题2. 八数码 欢迎观看我的博客&#xff0c;如有问题交流&#xff0c;欢迎评论区留言&#xff0c;一定尽快回复&#xff01;&#xff08;大家可以去看我的专栏&#xff0c;是所有文章的目录&#xff09; 　 文章字体风格&#xff1…
阅读更多...
初识Linux：第四篇

初识Linux：第四篇

初识Linux&#xff1a;第四篇 初识Linux&#xff1a;第四篇1.配置自己的公网ip2.时间相关的指令3.cal指令4.find指令5.grep指令6.zip/unzip指令7.tar指令8.bc命令9.uname -r指令10.一些其他热键11.关机12.shell命令以及运行原理 总结 初识Linux&#xff1a;第四篇 &#x1f449…
阅读更多...
华为OD机试真题 Java 实现【最佳对手】【2023Q1 200分】

华为OD机试真题 Java 实现【最佳对手】【2023Q1 200分】

一、题目描述 游戏里面&#xff0c;队伍通过匹配实力相近的对手进行对战。但是如果匹配的队伍实力相差太大&#xff0c;对于双方游戏体验都不会太好。 给定 n 个队伍的实力值&#xff0c;对其进行两两实力匹配&#xff0c;两支队伍实例差距在允许的最大差距 d内&#xff0c;则…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023