一、音頻
1、自定義內(nèi)容
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獲取當(dāng)前的audio元素。拿到audio元素的屬性。
static value(domNode) {
const value = {
url: '',
name: '',
};
// 這里要加判斷。不然會(huì)顯示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(標(biāo)簽類(lèi)型), value: any(參數(shù)，將傳入到create的方法中去), source: String = 'api')
quill.insertEmbed(this.curCursor, 'audio', { url: this.currentMaterial });
二、視頻
1、自定義內(nèi)容
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); //設(shè)置audio的src屬性
node.setAttribute('controls', true); //設(shè)置audio的controls，否則他將不會(huì)顯示
node.setAttribute('controlsList', 'nodownload'); //設(shè)置audio的下載功能為不能下載
node.setAttribute('id', 'videoAuto'); //設(shè)置一個(gè)id
node.setAttribute('style', 'width:100%'); //設(shè)置一個(gè)id
//外層套入div （不套入會(huì)產(chǎn)生無(wú)法刪除亂起八糟的問(wèn)題??）
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獲取當(dāng)前的audio元素。拿到audio元素的屬性。
static value(domNode) {
const value = {
url: '',
name: '',
};
// 這里要加判斷。不然會(huì)顯示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(標(biāo)簽類(lèi)型), value: any(參數(shù)，將傳入到create的方法中去), source: String = 'api')
quill.insertEmbed(this.curCursor, 'video', { url: this.currentMaterial });
三、文本添加行內(nèi)style樣式（文本邊框）
1、不帶有下拉框
- 優(yōu)點(diǎn)：點(diǎn)擊一下添加樣式，點(diǎn)擊一下取消樣式
- 缺點(diǎn)：樣式比較單一，沒(méi)有更多可選項(xiàng)
（1）自定義內(nèi)容
// 自定義字符邊框
const inline = Quill.import('blots/inline')
class WordBox extends inline {
static create(value) {
const node = super.create(value);
//設(shè)置需要的樣式
node.setAttribute('style', 'border:1px solid #000000');
return node;
}
}
WordBox.blotName = 'wordBox'; //工具欄中的名字與此名字需保持一致
WordBox.tagName = 'wordBox'; //需要添加的標(biāo)簽名
export default { WordBox };
（2）引入使用
引入
import blotsInfo from '../utils/audio-blot'
Quill.register(blotsInfo.WordBox, true);
往工具欄中添加操作按鈕（點(diǎn)擊操作按鈕即可取消或添加樣式）
//工具欄
const container = [
['wordBox',]
]
js修改操作按鈕樣式
// 工具欄附件按鈕
const wordBox = document.querySelector(".ql-wordBox");
wordBox.className = "ql-wordBox";
wordBox.innerHTML = "框";
2、帶有下拉框
- 優(yōu)點(diǎn)：可設(shè)置多種樣式，可選項(xiàng)多
-
缺點(diǎn)：白名單中還需設(shè)置
‘none’用于清除樣式，否則無(wú)法清除
（1）自定義內(nèi)容
// 自定義字符邊框
var Parchment = Quill.import('parchment');
let config = {
scope: Parchment.Scope.INLINE,
// 會(huì)有下拉框列表
whitelist: ['none','1px solid #000000','1px solid #f53309']
//可設(shè)置成沒(méi)有下拉框的，但會(huì)導(dǎo)致無(wú)法清除樣式
// 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]
//添加默認(rèn)顯示內(nèi)容
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('#')) : '無(wú)'
}
顯示效果
四、段落添加行內(nèi)style樣式（首行縮進(jìn)）
注意：由于與文本添加的幾乎相同，所以只寫(xiě)部分代碼
1、不帶有下拉框
（1）自定義內(nèi)容
// 自定義首行縮進(jìn)
const Block = Quill.import('blots/block')
class WordBox extends Block{
static create(value) {
const node = super.create(value);
//設(shè)置需要的樣式
node.setAttribute('style', 'text-indent: 2em;');
return node;
}
}
WordBox.blotName = 'wordBox'; //工具欄中的名字與此名字需保持一致
WordBox.tagName = 'div'; //需要添加的標(biāo)簽名,p標(biāo)簽的話無(wú)法取消樣式
export default { WordBox };
（2）引入使用（見(jiàn)文本添加，類(lèi)同）
2、帶有下拉框
- 優(yōu)點(diǎn)：可設(shè)置多種樣式，可選項(xiàng)多
-
缺點(diǎn)：白名單中還需設(shè)置
‘none’用于清除樣式，否則無(wú)法清除
（1）自定義內(nèi)容
// 自定義字符邊框
var Parchment = Quill.import('parchment');
let config = {
scope: Parchment.Scope.BLOCK,
// 會(huì)有下拉框列表
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]
//添加默認(rèn)顯示內(nèi)容
let stit = document.createElement('span')
stit.innerHTML = '首行縮進(jìn)';
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 : '無(wú)'
}
