这应该是我做的quill自定义功能的最后一个了，我想要用到的功能就这3个。
做这个原因是因为quill默认插入视频是让用户直接输入对应的iframe地址，而我看了几个视频网站的分享都是人家配置好的iframe代码，你只用复制就行。所以如果是这样的话，我们就很难受了，每次都要手动从代码中把视频地址拿出来，烦。
<template>
<div ref="editor"></div>
</template>
<script>
export default {
name: "editor",
props: ['content'],
data() {
return {
_content: '',
videoIframe: ''
}
},
watch: {
// 监听父组件传递的content值，变化后更新富文本内容
content(newVal, oldVal) {
if (this.quill) {
if (newVal && newVal !== this._content) {
this._content = newVal;
this.quill.clipboard.dangerouslyPasteHTML(newVal);
} else if(!newVal) {
this.quill.setText('');
}
}
}
},
mounted() {
// 初始化quill
this.quill = new Quill(this.$refs.editor, {
theme: 'snow',
modules: {
history: {
userOnly: true
},
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'align': [] }],
['clean'],
['link', 'image', 'video']
],
syntax: true
}
});
// 自定义插入视频
toolbar.addHandler('video', () => {
this.$Modal.confirm({
render: (h) => {
return h('Input', {
props: {
value: this.videoIframe,
autofocus: true,
placeholder: '复制视频插入代码'
},
on: {
input: (val) => {
this.videoIframe = val;
}
}
})
},
okText: '插入视频',
onOk: () => {
this.quill.focus();
if( !/^<iframe.+<\/iframe>$/.test(this.videoIframe) ) {
this.videoIframe = '';
return;
}
var range = this.quill.getSelection();
if (range) {
// 在当前光标位置插入图片
toolbar.quill.clipboard.dangerouslyPasteHTML(range.index, this.videoIframe);
// 将光标移动到图片后面
toolbar.quill.setSelection(range.index + 1);
}
this.videoIframe = '';
},
onCancel: () => {
this.videoIframe = '';
}
})
});
// 监听富文本变化，更新父组件数据
this.quill.on('text-change', () => {
let html = this.$refs.editor.children[0].innerHTML;
if (html === '<p><br></p>') html = '';
this._content = html;
this.$emit('edit', this._content);
});
}
}
</script>
<style>
.ql-snow .ql-editor pre.ql-syntax {
background-color: #282c34;
color: #abb2bf;
}
</style>
我用的ivew，所以这里顺便把插入视频的弹层换了。
我对插入的内容没有做过多处理，只做了一个iframe标签的匹配。
确实是懒，想做其他限制的朋友可以自己做。
