定制富文本编辑器
web前端开发
共 4341字,需浏览 9分钟
· 2020-11-08
定制富文本编辑器
简介
var quill = new Quill('#editor', {
modules: { toolbar: true },
theme: 'snow'
})
如何在Quill上定制功能
quill提供了非常细粒度,定义良好的API,我们可以在此基础之上进行定制化开发自己的富文本编辑器。(环境为vue + iview,使用iview进行辅助样式开发)
首先我们从最简单的demo入手。
<template>
<div id="editor" class="editor">div>
template>
<script>
import Quill from "quill";
export default {
mounted() {
const quill = new Quill("#editor", {
theme: "snow",
placeholder: "请在此开始编辑..."
});
}
};
script>
这是一个替代参数条件下的一个富文本编辑器,我们首先对Toolbar进行替换,Toolbar是modules的一部分。
我们需要在新建quill实例的时候覆盖原来的工具栏,并使用自己的工具栏元素。
<template>
<div class="container">
<div id="toolbar">
<Tooltip content="加粗" placement="bottom">
<button class="ql-bold">button>
Tooltip>
<Tooltip content="倾斜" placement="bottom">
<button class="ql-italic">button>
Tooltip>
<Tooltip content="下划线" placement="bottom">
<button class="ql-underline">button>
Tooltip>
<Tooltip content="删除线" placement="bottom">
<button class="ql-strike">button>
Tooltip>
div>
<div id="editor" class="editor">div>
div>
template>
<script>
import Quill from "quill";
export default {
mounted() {
const quill = new Quill("#editor", {
theme: "snow",
modules: {
toolbar: "#toolbar"
},
placeholder: "请在此开始编辑..."
});
}
};
script>
<style lang="less" scoped>style>
<template>
<div class="”container“">
<div id="toolbar">
<Tooltip content="添加卡片" placement="bottom">
<button class="ql-card">
<Icon type="md-card" />
button>
Tooltip>
div>
<div id="editor" class="editor">div>
div>
template>
<script>
import 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: "请在此开始编辑..."
});
}
};
script>
<style lang="less" scoped>style>
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)
const CARD_INFO = {
title: 'Quill 编辑器',
author: 'jhchen',
content:
'Quill是一种现代的富文本编辑器,旨在实现兼容性和可扩展性。它由Jason Chen和Byron Milligan创建,并由Slab积极维护。 ',
image:
'http://neau-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: '请在此开始编辑...'
})
本文完~
评论
推荐 | 文本分析库cntext2.x使用手册
Tips: 公众号推送后内容只能更改一次,且只能改20字符。 如果内容出问题,或者想更新内容, 只能重复推送。 为了更好的阅读体验,建议阅读本文博客版, 链接地址https://textdata.cn/blog/2024-04-27-cntext2x-usage-tutorial/cntext是大邓
大邓和他的Python
1
文本嵌入、文本分类和语义搜索
在实践中使用大型语言模型(LLM)中,RAG 的一个关键部分是使用文本嵌入从知识库中自动检索相关信息。在这里,我将更深入地讨论文本嵌入,并分享两个简单(但功能强大)的应用:文本分类和语义搜索。ChatGPT 吸引了全世界对人工智能及其潜力的想象。ChatGPT 的聊天界面是这一影响的关键因素,它使人
大邓和他的Python
0
代码 | 使用 MD&A文本测量「企业不确定性感知FEPU」
Tips: 为了更好的阅读体验,建议阅读本文博客版, 链接地址https://textdata.cn/blog/2024-04-25-firm-economic-policy-uncertainty/本文使用的缩写EPU 经济政策不确定性(Economic Policy Uncerta
大邓和他的Python
0
chatgpt实现NLP基本任务(实体识别、关系抽取、属性抽取、事件抽取、文本分类)
向AI转型的程序员都关注了这个号👇👇👇基础函数一、实体识别抽取文本:驻港部队从1993年初开始组建,1996年1月28日组建完毕,1997年7月1日0时进驻香港,取代驻港英军接管香港防务,驻港军费均由中央人民政府负担。《中华人民共和国香港特别行政区驻军法》规定了驻香港部队的职责为防备和抵抗侵略,保卫
机器学习AI算法工程
10
Linux 新变革已经开始,文本三剑客地位不保!
众所周知,在 Linux 系统中,awk、grep、sed 这三个命令,因其功能强大,日常使用频繁,在 Linux 系统下处理文本是个非常不错的神器,grep 用于查找,sed 用于取行和替换,awk 用于运算。因此,这三个命令一直都有着文本三剑客的称号!但是,随着这个命令的出现,怕是三剑客的地位要
良许Linux
0
5.7K Star,一个插件化、定制化、无广告免费音乐播放器
导语IT 界著名的尼古拉斯·大龙曾说:现在做 Android 开发,已经是大好时机,网上有很多成熟的框架,我们应充分利用好这些,所谓前人种树后人好乘凉,很多时候压根不需要了解太多原理,只需站在巨人的丁丁上即可。今天推荐个一个插件化、定制化、无广告免费完整的音乐播放器,目前只支持 Android 和
吴小龙同学
10
Python实证指标构建与文本分析
概览为何要学Python?在科学研究中,数据的获取及分析是最重要的也是最棘手的两个环节!在前大数据时代,一般使用实验法、调查问卷、访谈或者二手数据等方式,将数据整理为结构化的表格数据,之后再使用各种计量分析方法,对这些表格数据进行分析。但大数据时代,网络数据成为各方学者亟待挖掘的潜在宝藏,大量商业信
大邓和他的Python
457
LIST | 文本分析代码列表
个人感觉 textdata.cn 文本分析代码案例都集中在这里了,我将内容按大类分成- Python语法- 数据采集- 数据处理&Pandas- 文本分析- 数据标注&机器学习- 可视化- R语言-&nb
大邓和他的Python
254