最近在尝试写一个web应用，环境是VUE3（vite），需要用到富文本编辑器，网上查了一下，最终选择了vue-Quill（各位大佬如有更好的vue富文本库欢迎推荐）。
Quill官网：Quickstart - Quill Rich Text Editor (quilljs.com)
经过部署，基本使用上没有什么问题，但官方工具栏不够全面，我希望通过官方API，实现自定义工具栏。
例如要创建一个字号工具，实现选定编辑器中部分内容后，点对应字号来设置字号。
自己研究了一下，各种报错没有实现，各位大佬有时间的话帮忙看看，指教一下，感谢感谢。
我的代码：
[JavaScript] 纯文本查看 复制代码 <template>
<div class="w-full h-full">
<el-page-header title="返回" content="创建通知" @back="toBack" class="pt-1 pb-4 border-b">
</el-page-header>
<div>
<QuillEditor ref="myQuillEditor" theme="snow" toolbar="#my-toolbar">
<template #toolbar>
<div id="my-toolbar">
<!-- Add buttons as you would before -->
<span class="ql-formats">
<el-tooltip content="粗体">
<button class="ql-bold"></button>
</el-tooltip>
<el-tooltip content="斜体">
<button class="ql-italic"></button>
</el-tooltip>
<el-tooltip content="下横线">
<button class="ql-underline"></button>
</el-tooltip>
<el-tooltip content="删除线">
<button class="ql-strike"></button>
</el-tooltip>
</span>
<span class="ql-formats">
<el-tooltip content="标题1">
<button class="ql-header" value="1"></button>
</el-tooltip>
<el-tooltip content="标题2">
<button class="ql-header" value="2"></button>
</el-tooltip>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<el-tooltip content="引用">
<button class="ql-blockquote"></button>
</el-tooltip>
<el-tooltip content="代码">
<button class="ql-code-block"></button>
</el-tooltip>
</span>
<span class="ql-formats">
<el-tooltip content="有序列表">
<button class="ql-list" value="ordered"></button>
</el-tooltip>
<el-tooltip content="无序列表">
<button class="ql-list" value="bullet"></button>
</el-tooltip>
<el-tooltip content="减少缩进">
<button class="ql-indent" value="-1"></button>
</el-tooltip>
<el-tooltip content="增加缩进">
<button class="ql-indent" value="+1"></button>
</el-tooltip>
</span>
<span class="ql-formats">
<select class="ql-align"></select>
<el-tooltip content="字体方向">
<button class="ql-direction" value="rtl"></button>
</el-tooltip>
</span>
<span class="ql-formats">
<el-tooltip content="下标">
<button class="ql-script" value="sub"></button>
</el-tooltip>
<el-tooltip content="上标">
<button class="ql-script" value="super"></button>
</el-tooltip>
</span>
<br />
<span class="ql-formats">
<select class="ql-header">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
<option value="6"></option>
<option selected="selected"></option>
</select>
<select class="ql-font"></select>
<select class="ql-size"></select>
</span>
<span class="ql-formats">
<el-tooltip content="插入链接">
<button class="ql-link"></button>
</el-tooltip>
<el-tooltip content="插入图片">
<button class="ql-image"></button>
</el-tooltip>
<el-tooltip content="插入视频">
<button class="ql-video"></button>
</el-tooltip>
</span>
<span class="ql-formats">
<el-tooltip content="清除格式">
<button class="ql-clean"></button>
</el-tooltip>
</span>
<!-- But you can also add your own -->
<span class="ql-formats">
<el-dropdown @command="myToolBtn">
<span>
字号
<el-icon>
<arrow-down />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="12px">12px</el-dropdown-item>
<el-dropdown-item command="16px">16px</el-dropdown-item>
<el-dropdown-item command="18px">18px</el-dropdown-item>
<el-dropdown-item command="22px">22px</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</span>
</div>
</template>
</QuillEditor>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
const router = useRouter();
const myQuillEditor = ref(null);
const toBack = () => router.back();
const myToolBtn = (e) => {
console.log(e);
// 编辑器实例
console.log(myQuillEditor);
}
</script>
<style>
.el-popper {
padding: 3px 6px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
content: "请输入链接地址:" !important;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px !important;
content: '保存' !important;
padding-right: 0px !important;
}
.ql-snow .ql-tooltip[data-mode=video]::before {
content: "请输入视频地址:" !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: '小' !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
content: '标准' !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
content: '大' !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
content: '特大' !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: '常规' !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: '标题1' !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: '标题2' !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: '标题3' !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: '标题4' !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: '标题5' !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: '标题6' !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: '标准字体' !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
content: '衬线字体' !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
content: '等宽字体' !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
content: '等宽字体' !important;
}
.ql-action::after {
content: '编辑' !important;
}
.ql-remove::before {
content: '移除' !important;
}
.ql-snow .ql-tooltip::before {
content: '访问链接：' !important;
}
</style> | 
发表于 2023-1-7 14:33
