vue-quill-editor自定义工具栏，因为我的业务是自定义按钮默认是禁用状态的，只有当选中文字的时候才可以使用。
下面这个是自定义按钮的使用，没有禁用功能啥的
<quill-editor
ref="myQuillEditor"
v-model="baseForm.programStoryOutline"
:options="editorOption"
style="height: 102vh; overflow-y: hidden"
@change="onEditorChange($event)"
></quill-editor>
editorOption: {
// 占位配置
placeholder: '',
modules: {
toolbar:{
container: [
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
[{ header: 1 }, { header: 2 }], // 标题
[{ list: 'ordered' }, { list: 'bullet' }], // 列表
[{ indent: '-1' }, { indent: '+1' }], // 缩进
[{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
[{ align: [] }], // 对齐方式
['clean'], // 清除文本格式
['addMark'] // 自定义按钮名称
],
handlers: {
shadeBox: null,
quill: undefined,
addMark: this.addMark();
}
}
}
},
mounted() {
this.initButton(); // 初始化按钮
initButton() {
const sourceEditorButton = document.querySelector('.ql-addMark');
sourceEditorButton.style.cssText = "width:78px;";
sourceEditorButton.innerText="添加标注";
},
},
// 点击按钮执行的方法
addMark() {
alert('添加标注方法')
},
这个是基于业务需求写的，默认是禁用状态
<quill-editor
ref="myQuillEditor"
v-model="baseForm.programStoryOutline"
:options="editorOption"
style="height: 102vh; overflow-y: hidden"
@change="onEditorChange($event)"
></quill-editor>
isTextSelected: false, // 是否有文本被选中
editorOption: {
// 占位配置
placeholder: '',
modules: {
toolbar:{
container: [
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
[{ header: 1 }, { header: 2 }], // 标题
[{ list: 'ordered' }, { list: 'bullet' }], // 列表
[{ indent: '-1' }, { indent: '+1' }], // 缩进
[{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
[{ align: [] }], // 对齐方式
['clean'], // 清除文本格式
['addMark'] // 自定义按钮名称
],
handlers: {
shadeBox: null,
quill: undefined,
addMark: () => {
if (this.isTextSelected) {
// 这块是由于业务需要，是只有选中文本之后才能点击，所以就加了个判断 不需要的话，可以直接写 addMark: this.addMark();
this.addMark();
}
}
}
}
}
},
mounted() {
this.initButton(); // 初始化按钮
document.addEventListener('selectionchange', this.checkSelection); // 根据自己业务需求去写就行，如果不用去禁用按钮的话，可以不用写
},
//自定义按钮内容初始化
initButton() {
const sourceEditorButton = document.querySelector('.ql-addMark');
sourceEditorButton.style.cssText = "width:78px;cursor: not-allowed;";
sourceEditorButton.innerText="添加标注";
sourceEditorButton.classList.add('disabled-hover'); // 添加禁用悬停类名
sourceEditorButton.setAttribute('disabled', true); // 禁用按钮
this.checkSelection(); // 初始检查是否有文本被选中
},
checkSelection() {
const range = this.$refs.myQuillEditor.quill.getSelection();
this.isTextSelected = range && range.length > 0;
const sourceEditorButton = document.querySelector('.ql-addMark');
if (this.isTextSelected) {
sourceEditorButton.style.cursor = 'pointer';
sourceEditorButton.removeAttribute('disabled'); // 启用按钮
} else {
sourceEditorButton.style.cursor = 'not-allowed';
sourceEditorButton.setAttribute('disabled', true); // 禁用按钮
}
},
enableButton() {
const sourceEditorButton = document.querySelector('.ql-addMark');
sourceEditorButton.style.cursor = 'pointer';
sourceEditorButton.removeAttribute('disabled'); // 启用按钮
sourceEditorButton.classList.remove('disabled-hover'); // 移除禁用悬停类名
},
disableButton() {
const sourceEditorButton = document.querySelector('.ql-addMark');
sourceEditorButton.style.cursor = 'not-allowed';
sourceEditorButton.setAttribute('disabled', true); // 禁用按钮
sourceEditorButton.classList.add('disabled-hover'); // 添加禁用悬停类名
},
addMark() {
// 需要拿到选中的文字
const quill = this.$refs.myQuillEditor.quill;
let range = quill.getSelection()
let text = quill.getText(range.index, range.length); // 选中的文字
if (range && range.length > 0) {
console.log('添加标注按钮被点击，且已选中文本');
this.dialogVisible = true
this.markTitle = '新增标注'
this.markForm = {
keyword: '', // 关键词
suggest: '', // 建议词
problemDescription: '', // 问题描述
inPoint: '', // 关键词索引开始位置
outPoint: '' // 关键词的索引结束位置
}
console.log('选中数据', range, text)
this.markForm.keyword = text;
this.markForm.inPoint = range.index
this.markForm.outPoint = range.index + range.length
// 在这里实现添加标注的逻辑
} else {
this.initButton()
}
},
// 如果是需要用到禁用按钮的话，样式需要自己改一下，因为编辑器工具栏本身有hover的那个颜色，导致禁用的时候，也会有那个hover，
/* 禁用状态下的按钮样式 */
::v-deep(.ql-snow.ql-toolbar button[disabled],
.ql-snow .ql-toolbar button[disabled]) {
//pointer-events: none !important; /* 禁用鼠标事件 */
//opacity: 0.5 !important; /* 可选：降低按钮透明度以表示禁用状态 */
}
/* 覆盖 hover 和 focus 状态的样式 */
::v-deep(
.ql-snow.ql-toolbar button[disabled]:hover,
.ql-snow .ql-toolbar button[disabled]:hover,
.ql-snow.ql-toolbar button[disabled]:focus,
.ql-snow .ql-toolbar button[disabled]:focus
)
{
color: #c0c4cc !important; /* 保持原始颜色 */
background-color: transparent !important; /* 保持原始背景色 */
}
/* 覆盖 active 状态的样式 */
::v-deep(
.ql-snow.ql-toolbar button[disabled].ql-active,
.ql-snow .ql-toolbar button[disabled].ql-active
)
{
color: #c0c4cc !important; /* 保持原始颜色 */
}
/* 覆盖 picker label 和 item 的 hover 和 selected 状态的样式 */
::v-deep(
.ql-snow.ql-toolbar .ql-picker-label[disabled]:hover,
.ql-snow .ql-toolbar .ql-picker-label[disabled]:hover,
.ql-snow.ql-toolbar .ql-picker-label[disabled].ql-active,
.ql-snow .ql-toolbar .ql-picker-label[disabled].ql-active,
.ql-snow.ql-toolbar .ql-picker-item[disabled]:hover,
.ql-snow .ql-toolbar .ql-picker-item[disabled]:hover,
.ql-snow.ql-toolbar .ql-picker-item[disabled].ql-selected,
.ql-snow .ql-toolbar .ql-picker-item[disabled].ql-selected
)
{
color: #c0c4cc !important; /* 保持原始颜色 */
background-color: transparent !important; /* 保持原始背景色 */
}
