网站 › 『编程语言讨论求助区』 › VUE+Quill富文本编辑器自定义工具栏

cqwcns 发表于 2023-1-7 14:33

VUE+Quill富文本编辑器自定义工具栏

最近在尝试写一个web应用，环境是VUE3（vite），需要用到富文本编辑器，网上查了一下，最终选择了vue-Quill（各位大佬如有更好的vue富文本库欢迎推荐）。
Quill官网：Quickstart - Quill Rich Text Editor (quilljs.com)


经过部署，基本使用上没有什么问题，但官方工具栏不够全面，我希望通过官方API，实现自定义工具栏。
例如要创建一个字号工具，实现选定编辑器中部分内容后，点对应字号来设置字号。


自己研究了一下，各种报错没有实现，各位大佬有时间的话帮忙看看，指教一下，感谢感谢。



我的代码：
<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::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::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::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::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::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::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::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: '标题1' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: '标题2' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: '标题3' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: '标题4' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: '标题5' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::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::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: '衬线字体' !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::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: '等宽字体' !important;
}

.ql-action::after {
content: '编辑' !important;
}

.ql-remove::before {
content: '移除' !important;
}

.ql-snow .ql-tooltip::before {
content: '访问链接：' !important;
}
</style>

cqwcns 发表于 2023-1-7 14:35

使用 <template #toolbar>的方式来自定义工具栏主要是为了添加el-tooltip。

下面的CSS主要是作用是汉化。

查看完整版本: VUE+Quill富文本编辑器自定义工具栏