文章目录
一、音频1、自定义内容2、引入使用
二、视频1、自定义内容2、引入使用
三、文本添加行内style样式（文本边框）1、不带有下拉框（1）自定义内容（2）引入使用
2、带有下拉框（1）自定义内容（2）引入使用
四、段落添加行内style样式（首行缩进）1、不带有下拉框（1）自定义内容（2）引入使用（见文本添加，类同）
2、带有下拉框（1）自定义内容（2）引入使用
一、音频
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(' 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 : '无' } 参考文章
您阅读本篇文章共花了：
发表评论