文章目录
一、音频
1、自定义内容
import { Quill } from 'vue-quill-editor';
const BlockEmbed = Quill.import('blots/block/embed');
// 音频
class AudioBlot extends BlockEmbed {
static create(value) {
console.log(value)
const node = super.create(value);
node.setAttribute('src', value.url);
node.setAttribute('controls', true);
node.setAttribute('name', value.name);
node.setAttribute('controlsList', 'nodownload');
return node;
}
// 添加value获取当前的audio元素。拿到audio元素的属性。
static value(domNode) {
const value = {
url: '',
name: '',
};
// 这里要加判断。不然会显示undefined
if (domNode.getAttribute('src')) {
value.url = domNode.getAttribute('src');
value.name = domNode.getAttribute('name');
}
console.log(value)
return value;
}
}
AudioBlot.blotName = 'audio';
AudioBlot.tagName = 'audio';
export default { AudioBlot};
2、引入使用
引入
import blotsInfo from '../utils/audio-blot'
Quill.register(blotsInfo.AudioBlot);
将选择好的文件地址插入到编辑器中
const quill = this.$refs.myQuillEditor.quill;
// insertEmbed(index: Number(插入的位置), type: String(标签类型), value: any(参数，将传入到create的方法中去), source: String = 'api')
quill.insertEmbed(this.curCursor, 'audio', { url: this.currentMaterial });
二、视频
1、自定义内容
import { Quill } from 'vue-quill-editor';
const BlockEmbed = Quill.import('blots/block/embed');
// 视频
class VideoBlot extends BlockEmbed {
static create(value) {
let node = super.create(value);
node.setAttribute('src', value.url || value); //设置audio的src属性
node.setAttribute('controls', true); //设置audio的controls，否则他将不会显示
node.setAttribute('controlsList', 'nodownload'); //设置audio的下载功能为不能下载
node.setAttribute('id', 'videoAuto'); //设置一个id
node.setAttribute('style', 'width:100%'); //设置一个id
//外层套入div （不套入会产生无法删除乱起八糟的问题😀）
let divNode = document.createElement("span");
divNode.appendChild(node)
if (!value.url) {
divNode.innerHTML = divNode.innerHTML.replace('<video', '<iframe class="ql-video" frameborder="0" allowfullscreen="true"').replace('<video', '</iframe')
divNode.getElementsByTagName('iframe')[0].style = 'width:auto'
}
return divNode;
}
// 添加value获取当前的audio元素。拿到audio元素的属性。
static value(domNode) {
const value = {
url: '',
name: '',
};
// 这里要加判断。不然会显示undefined
if (domNode.getAttribute('src')) {
value.url = domNode.getAttribute('src');
value.name = domNode.getAttribute('name');
}
return value;
}
}
VideoBlot.blotName = 'video';
VideoBlot.tagName = 'video';
export default { VideoBlot};
2、引入使用
引入
import blotsInfo from '../utils/audio-blot'
Quill.register(blotsInfo.VideoBlot);
将选择好的文件地址插入到编辑器中
const quill = this.$refs.myQuillEditor.quill;
// insertEmbed(index: Number(插入的位置), type: String(标签类型), value: any(参数，将传入到create的方法中去), source: String = 'api')
quill.insertEmbed(this.curCursor, 'video', { url: this.currentMaterial });
三、文本添加行内style样式（文本边框）
1、不带有下拉框
- 优点：点击一下添加样式，点击一下取消样式
- 缺点：样式比较单一，没有更多可选项
（1）自定义内容
// 自定义字符边框
const inline = Quill.import('blots/inline')
class WordBox extends inline {
static create(value) {
const node = super.create(value);
//设置需要的样式
node.setAttribute('style', 'border:1px solid #000000');
return node;
}
}
WordBox.blotName = 'wordBox'; //工具栏中的名字与此名字需保持一致
WordBox.tagName = 'wordBox'; //需要添加的标签名
export default { WordBox };
（2）引入使用
引入
import blotsInfo from '../utils/audio-blot'
Quill.register(blotsInfo.WordBox, true);
往工具栏中添加操作按钮（点击操作按钮即可取消或添加样式）
//工具栏
const container = [
['wordBox',]
]
js修改操作按钮样式
// 工具栏附件按钮
const wordBox = document.querySelector(".ql-wordBox");
wordBox.className = "ql-wordBox";
wordBox.innerHTML = "框";
2、带有下拉框
- 优点：可设置多种样式，可选项多
- 缺点：白名单中还需设置
‘none’用于清除样式，否则无法清除
（1）自定义内容
// 自定义字符边框
var Parchment = Quill.import('parchment');
let config = {
scope: Parchment.Scope.INLINE,
// 会有下拉框列表
whitelist: ['none','1px solid #000000','1px solid #f53309']
//可设置成没有下拉框的，但会导致无法清除样式
// whitelist: ['1px solid #000000']
};
let WordBox = new Parchment.Attributor.Style('wordBox', 'border', config);
export default { WordBox };
（2）引入使用
引入
import blotsInfo from '../utils/audio-blot'
Quill.register(blotsInfo.WordBox, true);
往工具栏中添加操作按钮
//工具栏
const container = [
[{wordBox: [false,'1px solid #000000','1px solid #f53309']},]
]
js修改操作按钮样式
// 工具栏附件按钮
let a = document.querySelectorAll(".ql-wordBox")[0]
let b = document.querySelectorAll(".ql-wordBox")[1]
//添加默认显示内容
let stit = document.createElement('span')
stit.innerHTML = '文本框';
stit.setAttribute('style', 'margin-right:20px;line-height: 24px;')
a.children[0].insertBefore(stit, a.children[0].children[0])
// 遍历下拉框列表添加值
let i = a.children[1].children.length
while (i) {
i--;
let item = a.children[1].children[i]
item.innerHTML = item.dataset.value ? item.dataset.value.slice(item.dataset.value.indexOf('#')) : '无'
}
显示效果
四、段落添加行内style样式（首行缩进）
注意：由于与文本添加的几乎相同，所以只写部分代码
1、不带有下拉框
（1）自定义内容
// 自定义首行缩进
const Block = Quill.import('blots/block')
class WordBox extends Block{
static create(value) {
const node = super.create(value);
//设置需要的样式
node.setAttribute('style', 'text-indent: 2em;');
return node;
}
}
WordBox.blotName = 'wordBox'; //工具栏中的名字与此名字需保持一致
WordBox.tagName = 'div'; //需要添加的标签名,p标签的话无法取消样式
export default { WordBox };
（2）引入使用（见文本添加，类同）
2、带有下拉框
- 优点：可设置多种样式，可选项多
- 缺点：白名单中还需设置
‘none’用于清除样式，否则无法清除
（1）自定义内容
// 自定义字符边框
var Parchment = Quill.import('parchment');
let config = {
scope: Parchment.Scope.BLOCK,
// 会有下拉框列表
whitelist: ['none','2em','3em']
};
let WordBox = new Parchment.Attributor.Style('wordBox', 'text-indent', config);
export default { WordBox };
（2）引入使用
往工具栏中添加操作按钮
//工具栏
const container = [
[{wordBox: [false,'2em','3em']},]
]
js修改操作按钮样式
// 工具栏附件按钮
let a = document.querySelectorAll(".ql-wordBox")[0]
let b = document.querySelectorAll(".ql-wordBox")[1]
//添加默认显示内容
let stit = document.createElement('span')
stit.innerHTML = '首行缩进';
stit.setAttribute('style', 'margin-right:20px;line-height: 24px;')
a.children[0].insertBefore(stit, a.children[0].children[0])
// 遍历下拉框列表添加值
let i = a.children[1].children.length
while (i) {
i--;
let item = a.children[1].children[i]
item.innerHTML = item.dataset.value ? item.dataset.value : '无'
}