如何将龙插入到编辑器中?
DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸
、灵活
、至简
的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB
的工具类产品
,DevUI 将是一个很不错的选择!
引言
之前在掘金看到一篇文章
正好前段时间在公司的HWEB大前端分享会上给大家分享了富文本编辑器的一些实践,于是想:
能否把这条龙插入到富文本编辑器中呢?
在富文本编辑器中插入自定义内容
在之前的文章中,给大家分享了如何在Quill中插入自定义的内容,我们一起来回顾下:
- 第一步:自定义工具栏按钮
- 第二步:自定义Blot内容
- 第三步:在Quill注册自定义Blot
- 第四步:调用Quill的API插入自定义内容
我们试着按照这个步骤来将龙插入到编辑器中。
第一步:自定义工具栏按钮
这个非常简单:
const TOOLBAR_CONFIG = [
[{ header: ['1', '2', '3', false] }],
['bold', 'italic', 'underline', 'link'],
[{ list: 'ordered' }, { list: 'bullet' }],
['clean'],
['card', 'divider', 'emoji', 'file', 'tag'],
['dragon'], // 新增的
];
自定义工具栏按钮图标:
const dragonIcon = `<svg>...</svg>`;
const icons = Quill.import('ui/icons');
icons.dragon = dragonIcon;
增加工具栏按钮事件:
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: {
container: TOOLBAR_CONFIG,
handlers: {
...
// 增加一个空的事件
dragon(value): void {
console.log('dragon~~');
},
},
}
},
});
第二步:自定义Blot内容(核心)
之前的分享提到:
Quill中的Blot就是一个普通的ES6 Class
因此我们需要编写一个类。
dragon.ts
import Quill from 'quill';
const BlockEmbed = Quill.import('blots/block/embed');
class DragonBlot extends BlockEmbed {
static blotName = 'dragon';
static tagName = 'canvas';
static create(value): any {
const node = super.create(value);
const { id, width, height } = value;
node.setAttribute('id', id || DragonBlot.blotName);
if (width !== undefined) {
node.setAttribute('width', width);
}
if (height !== undefined) {
node.setAttribute('height', height);
}
// 绘制龙的逻辑,参考大帅老师的文章:https://juejin.cn/post/6963476650356916254
new Dragon(node);
return node;
}
}
export default DragonBlot;
绘制龙
绘制龙的逻辑参考大帅老师的文章,这里就不贴代码了,大帅老师的文章里有源码,直接拿来用就可以:
需要注意的是大帅老师文章里的龙图片背景不是纯黑的,需要换一张纯黑的图片。
第三步:在Quill注册自定义Blot
有了 DragonBlot,还需要将其注册到 Quill 中才能使用:
import DragonBlot from './formats/dragon';
Quill.register('formats/dragon', DragonBlot);
第四步:调用Quill的API插入自定义内容
最后一步,见证奇迹的时刻到了!
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: {
container: TOOLBAR_CONFIG,
handlers: {
...
dragon(value): void {
console.log('dragon~~');
const index = this.quill.getSelection().index;
// 插入自定义内容
this.quill.insertEmbed(index, 'dragon', {
id: 'canvas-dragon',
});
},
},
}
},
});
效果图:
欢迎加DevUI小助手微信:devui-official,一起讨论富文本编辑器技术和前端技术。
欢迎关注我们DevUI组件库,点亮我们的小星星🌟:
https://github.com/devcloudfe/ng-devui
也欢迎使用DevUI新发布的DevUI Admin系统,开箱即用,10分钟搭建一个美观大气的后台管理系统!
加入我们
我们是DevUI团队,欢迎来这里和我们一起打造优雅高效的人机设计/研发体系。招聘邮箱:muyang2@huawei.com。
文/DevUI Kagol
往期文章推荐
- 点赞
- 收藏
- 关注作者
评论(0)