const BlockEmbed = Quill.import('blots/block/embed');
// 定义新的blot类型
class StockEmbed extends BlockEmbed {
static create(value) {
const node = super.create(value);
node.setAttribute('contenteditable', 'false');
node.setAttribute('width', '100%');
// 设置自定义html
node.innerHTML = value;
return node;
// 去除字符串模板(``)语法中存在的空格
static transformValue(value) {
let handleArr = value.split('\n');
handleArr = handleArr.map((e) => e.replace(/^[\s]+/, '').replace(/[\s]+$/, ''));
return handleArr.join('');
// 返回节点自身的value值 用于撤销操作
static value(node) {
return node.innerHTML;
StockEmbed.blotName = 'StockEmbed';
StockEmbed.className = 'embed-innerApp';
StockEmbed.tagName = 'div';
Quill.register(StockEmbed, true);
// 调用
created() {
// 打开页面时注册blot
this.stockBlot();
watch: {
// 插入自定义内容, 在watch还是methods调用都是看你项目需要
innerStockBlot(newVal) {
const positionIndex = this.quill.selection.savedRange.index;
if (this.quill && newVal) {
this.quill.insertEmbed(
positionIndex,
'StockEmbed',
<p>我是标题</p>
<a href="">我是链接</a>
<img src="" alt="我是图片" />
参考来源: Quill编辑器插入自定义HTML记录的示例详解
你是否还在为富文本编辑器中光标位置不受控制而抓狂？当需要实现自动插入模板文本、自定义格式转换或内容校验时，光标总是跳到意外位置？本文将系统讲解vue-quill-editor中光标（插入点）控制的核心原理与实战技巧，帮助你彻底掌握文本编辑的精准操控。
读完本文你将掌握：
- 光标位置的精准获取与设置方法
- 文本插入、替换与删除的原子级操作
- 复杂编辑场景下的光标状态管理策略
- 5个企业级实...
转眼已经2020年，饥渴的人类不再满足于简单的文本，于是有了花里胡哨的携带各种样式的文本，然而有文本还不够，我们还需要让用户在编辑的时候，能够插入各种自定义消息类型，让我们发出去的软文更加好看，因此有了这篇文章。
由于Quill编辑器自带的富文本过滤（大部分主流编辑器都会对富文本进行过滤处理），导致开发者想要配置自定义HTML模板时，遇到了不少麻烦。
一、Quill渲染逻辑分析
为了自定义Quill中的HTML块内容，首先需要了解Quill内部的渲染流程，这里有几个关键的概念需要了解：
1、Delta
Delta是Quill内部定义的一个数据格式，用于表示文档内容以及文档修改操作，易读且
escapeString
HTML (str
) {
str = str.replace
(/</g, '<'
)
str = str.replace
(/>/g, '>'
)
console.log
(str
)
return str
在Vue项目使用quill-editor带样式编辑器（更改插入图片和视频）
https://www.cnblogs.com/zhengweijie/p/7305903.html
vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片比较大的话，富文本的内容就会很大。
插入视频是直接弹框输入URL地址，某些需求下我们需要让用户去本地选择自己...
1.
vue-quill-editor 请参考github 文档，
一、
图片上传base64改用url返回 ①：可以结合element
-ui组件，具体参考
地址 ，亲测可用
②：使用扩展model组件，
quill-image
-extend
-module
二、添加扩展组件，拖拽以及可编辑...
