Quill是一个很流行的富文本编辑器,github上star大约21k:
github地址
官网地址
安装quill(这里是在vue项目中使用的)
npm install -S quill-image-paste-module quill-image-resize-module vue-quill-editor
如何在项目中使用请看官网,这里主要记录一下如何使用自定义标签,很多时候,我们需要在标签中增加自定义属性,或者新增quill原生不带有的标签,比如video,audio
新增blot文件
import { Quill } from 'vue-quill-editor';
const BlockEmbed = Quill.import('blots/block/embed');
class VideoBlot extends BlockEmbed {
private static create(value: any) {
const node = super.create();
node.setAttribute('src', value.url);
node.setAttribute('controls', value.controls);
node.setAttribute('width', '100%');
node.setAttribute('height', 'auto');
node.setAttribute('webkit-playsinline', true);
node.setAttribute('playsinline', true);
node.setAttribute('x5-playsinline', true);
node.setAttribute('contentid', value.contentid);
node.setAttribute('poster', value.poster);
return node;
private static value(node: any) {
return {
url: node.getAttribute('src'),
controls: node.getAttribute('controls'),
width: node.getAttribute('width'),
height: node.getAttribute('height'),
contentid: node.getAttribute('contentid'),
poster: node.getAttribute('poster'),
VideoBlot.blotName = 'simple_video';
VideoBlot.tagName = 'video';
export default VideoBlot;
img标签的修改和audio标签类似
在项目中引用
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { Quill as _Quill } from 'vue-quill-editor';
import VideoBlot from './blot/video';
_Quill.register(VideoBlot);
@Component({
name: 'quill',
components: {
export default class Quill extends Vue {
public get editor() {
return (this.$refs.textEditor as any).quill;
public mounted {
this.editor.insertEmbed(length, 'simple_video', {
url: '视频地址',
controls: 'controls',
width: '100%',
height: 'auto',
poster: '视频首帧',
contentid: ‘112313121323’,
});
在项目中需求在文本框中添加一个链接,链接的a标签要带有href、id、data-value等自定义属性,但是通过富文本定义的链接只能添加href绑定在a标签上。之前在百度上面找到类似的文章但是都出现一些小问题,目前都处理ok。在此留个笔记,提提神哈参考文章:引路文章之vue-quill-editor 如何用insertEmbed插入一个a标签代码实现如下://引入富文本编辑器import { qu...
< script src =" ./quill-image-paste-module/image-paste.min.js " > </ script >
var quill = new Quill ( editor , {
// ...
modules : {
// ...
imagePaste : {
// options
} ) ;
传递一个空对象,将图像粘贴为base64
var quill = new Quill ( editor , {
// ...
modules : {
// ...
imagePaste : { }
} ) ;
您还可以使用addImageBlob选项将图像上传到服务器
问题描述:
在使用 vue-quill-editor 富文本编辑器过程中,加载已有的富文本数据到编辑器,经常会出现编辑器中莫名其妙多出一段换行内容 <p><br></p>(一般出现在段落与其他内容之间,例如标题,引用,列表),每次重新编辑之前的内容时都必须手动删除这些空行,否则这些换行就会越积越多。这让...
element ui中quill-editor富文本编辑器的使用,可以上传图片视频等文件,可以对图片拖拽居中等操作,可以直接使用。对于视频的回显,需要改写video.js文件,把ifram标签改为video标签。
let BlockEmbed = Quill.import('blots/block/embed');
class CustomImgBlot extends BlockEmbed {
// 声明内部对象
static obj = {};
static get ATTRIBUTES() {
// 声明元素属性值
vue-quill 上传图片,自定义大小
使用 `@vueup/vue-quill` ,是因为使用 `vue-quill-editor` 老是有一堆报错
`imports of undefined`,`undefined (reading 'register')`之类的
逻辑大概是这样的,后台编辑文章的时候定义一个自定义的’商品标签’,标签里包含商品信息:图片,名称,价格,前端拿到文章富文本后,对’商品标签’进行特殊处理,并加上样式进行显示。本文只对后台操作进行解释,前端不作解释。
ueditor示例
由于我们后台使用的是ueditor,这里以uedit