当前位置:澳门贵宾厅 > 澳门贵宾厅 > 我在已有的vue项目中(含有已安装的依赖,当我们需要为输入的文本添加格式时
我在已有的vue项目中(含有已安装的依赖,当我们需要为输入的文本添加格式时
2020-03-31

时间: 2019-12-21阅读: 72标签: 富文本quill 定制富文本编辑器

本文为大家记录了vue中安装使用Quill富文本编辑器的具体方法,供大家参考,具体内容如下

很多时候textarea并不能满足我们对文本输入的需求,当我们需要为输入的文本添加格式时,我们需要使用像 quill 这样的富文本编辑器来完成富文本的输入。

1、安装依赖

本文将会详细的讲解如何使用 quill 定制一个自己的富文本编辑器。

npm install vue-quill-editor --save

这里面定制了两个特殊的功能(添加卡片、添加图片墙),感兴趣的同学可以先看一下实现后的效果:富文本编辑器

注:我在已有的vue项目中(含有已安装的依赖,即node_modules文件夹)直接进行安装并不成功,报错,没有截图,但是我没记错的话是显示"项目名node_modulescliuinode_moduleswordwrap"这个没有。所以我把项目下的node_modules文件删除,然后直接安装quill依赖(执行npm install vue-quill-editor --save)。然后npm run dev 运行项目,不影响之前vue项目的使用和运行,quill的富文本编辑器也可以用了。

接下来将会讲解如何在 quill 的基础上实现定制化的富文本编辑器。

2、使用

quill 简介

在“项目名srcmain.js”引入

一个好的富文本编辑器的标志就是它能够支持多少种格式,而 quill 支持无限种类的格式。你可以在 quill 上定制任意种类的文本。并且,如果你不想自定义个任何功能,那么 quill 也是极易上手的

import Vue from 'vue'import VueQuillEditor from 'vue-quill-editor'

//一定要引入这三个css,不然文本编辑器会出现不规则黑白几何图形//这三个css可以在main.js中引入,也可以在具体使用的.vue文件中引入import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css' Vue.use
var quill = new Quill('#editor', { modules: { toolbar: true }, theme: 'snow'})

在具体vue文件中引用

如何在 Quill 上定制功能

import { quillEditor } from 'vue-quill-editor' export default { data:function(){ return{ content:'', editorOption:{} } }, methods:{ onEditorBlur{//失去焦点事件 }, onEditorFocus{//获得焦点事件 }, onEditorChange{//编辑器文本发生变化 //this.content可以实时获取到当前编辑器内的文本内容 console.log; } }} 

quill 提供了非常细粒度、定义良好的 API,我们可以在此基础之上定制化开发自己的富文本编辑器。(环境为 Vue + iview ,使用 iview 进行辅助样式开发)

v-model 可以不使用,并不是Quill编辑器自带的,是我项目中使用自己加的。

首先我们从最简单的 demo 入手

这样引入后可以得到一个这样的编辑器。

template div /div/templatescriptimport Quill from "quill";export default { mounted() { const quill = new Quill("#editor", { theme: "snow", placeholder: "请在此开始编辑..." }); }};/script

如果需要改变文本域部分的高度,如下:

这是一个默认参数条件下的一个富文本编辑器,我们首先对 Toolbar 进行替换,Toolbar 是 modules 的一部分。

 .quill-editor { height: 350px; }

我们需要在新建 quill 实例的时候覆盖原来的 toolbar,并使用的自己的 toolbar 元素。

Quill的自定义工具栏、字体等,请点击:vue中Quill富文本编辑器的使用

template div  div  Tooltip content="加粗" placement="bottom" button /button /Tooltip Tooltip content="倾斜" placement="bottom" button /button /Tooltip Tooltip content="下划线" placement="bottom" button /button /Tooltip Tooltip content="删除线" placement="bottom" button /button /Tooltip /div div /div /div/templatescriptimport Quill from "quill";export default { mounted() { const quill = new Quill("#editor", { theme: "snow", modules: { toolbar: "#toolbar" }, placeholder: "请在此开始编辑..." }); }};/scriptstyle lang="less" scoped/style

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

会将我们的 toolbar 的样式变成如下的样子。

quill 在初始化时会读取 #toolbar 元素,并获取其子节点的 classNames,对于ql-bold,quill 会截取ql-之后的部分,并且和已经注册的 handlers 做匹配,上面的bolditalicunderlinestrike存在注册好的 handler。当我们点击 toolbar 中的元素时便会调用 handler 对富文本内容进行格式化。

当我们需要添加一个本不存在的格式化效果时我们还需要在 modules 中补充它的 handler,下面添加一个可以添加卡片的按钮,并添加其对应的 handler。

template div  div  Tooltip content="添加卡片" placement="bottom" button  Icon type="md-card" / /button /Tooltip /div div /div /div/templatescriptimport Quill from "quill";export default { mounted() { const quill = new Quill("#editor", { theme: "snow", modules: { toolbar: { container: "#toolbar", handlers: { card: () = { // 属性名称要与 ql-xxx 对应 console.log(`点击了 card`); } } } }, placeholder: "请在此开始编辑..." }); }};/scriptstyle lang="less" scoped/style

接下来我们为这个按钮添加实际的效果。

在 Quill 中,使用 Blots 表示节点,我们可以认为 Blots 对应 Dom 中的 Node。当我们需要在 quill 中添加一自定义的 Blots 节点时,我们需要让其继承自 Blots 节点。

const BlockEmbed = Quill.import('blots/block/embed')function customCard(node) { // 在一个节点中插入自定义的 dom const leftDiv = document.createElement('div') leftDiv.className = 'media-container' const mediaDiv = document.createElement('div') mediaDiv.style['background-image'] = `url(${value.image})` mediaDiv.className = 'media' leftDiv.appendChild(mediaDiv) const rightDiv = document.createElement('div') rightDiv.className = 'content-container' const titleP = document.createElement('p') titleP.className = 'title' titleP.innerText = value.title const authorP = document.createElement('p') authorP.className = 'author' authorP.innerText = value.author const contentP = document.createElement('p') contentP.className = 'content' contentP.innerText = value.content rightDiv.appendChild(titleP) rightDiv.appendChild(authorP) rightDiv.appendChild(contentP) node.appendChild(leftDiv) node.appendChild(rightDiv)}// 自定义卡片节点class CardBlot extends BlockEmbed { static create(value) { const node = super.create() // 新建节点时传入的数据 node.dataset.title = value.title node.dataset.image = value.image node.dataset.content = value.content node.dataset.author = value.author customizeCard(node) node.setAttribute('contenteditable', false) // 设置该节点不可编辑 return node } static value(node) { // 这里需要返回 create 函数中传入的数据 return node.dataset }}CardBlot.blotName = 'card' // quill 中的标记名称CardBlot.tagName = 'div' // dom 节点名称CardBlot.className = 'card' // dom 中真实的 class 名称Quill.register(CardBlot)

同时我们还需要添加对应的 handler

const CARD_INFO = { title: 'Quill 编辑器', author: 'jhchen', content: 'Quill是一种现代的富文本编辑器,旨在实现兼容性和可扩展性。它由Jason Chen和Byron Milligan创建,并由Slab积极维护。 ', image: '-lib-static.test.upcdn.net/quill/resource/1576812308405-0.0544z7sqq9au-quill.png'}new Quill('#editor', { theme: 'snow', modules: { toolbar: { container: '#toolbar', handlers: { card: () = { const addRange = this.quill.getSelection() || 0 // 获取当前光标选中的位置 this.quill.insertEmbed( addRange, 'card', CARD_INFO, Quill.sources.USER ) // 插入 card blots this.$nextTick(() = { this.quill.setSelection(addRange + 1, Quill.sources.SILENT) }) // 插入完成后将光标向后移动一位 } } } }, placeholder: '请在此开始编辑...'})

至此我们就可以通过点击card图标来添加一个 card 了,但是这个 card 还没有添加样式,我们手动在显示 card 页面上添加样式就大功告成了。

通过这种方式,我们可以便可以在 quill 添加任意类型的内容。