supervision-vue/src/components/quill-editor.vue

<template>
    <QuillEditor
        ref="quillRef"
        v-model:content="content"
        :options="options"
        contentType="html"
        @update:content="setValue()"
    />
</template>
<script setup>
import { QuillEditor, Quill } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";

const props = defineProps({
    modelValue: {
        type: String
    }
});

const emit = defineEmits(["update:modelValue"]);

const content = ref(props.modelValue);
const quillRef = ref(null);

const toolbarOptions = [
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    ["bold", "italic", "underline", "strike"], // toggled buttons
    [{ list: "ordered" }, { list: "bullet" }],
    ["blockquote", "code-block"],
    [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
    [{ color: [] }, { background: [] }], // dropdown with defaults from theme
    [{ align: [] }],
];

const options = reactive({
    modules: {
        toolbar: toolbarOptions,
    },
    placeholder: "请输入",
});

const setValue = () => {
    //用于设置双向绑定值
    const text = toRaw(quillRef.value).getHTML();
    emit("update:modelValue", text);
};

watch(
    () => props.modelValue,
    (val) => {
        if (val) {
            content.value = val; //用于监听绑定值进行数据回填
        } else {
            toRaw(quillRef.value).setContents(""); //可用于弹窗使用富文本框关闭弹窗清除值
        }
    }
);

function getText() {
    return toRaw(quillRef.value).getText()
}


defineExpose({
    getText
});
</script>

<style lang="scss" >
.ql-container.ql-snow {
    font-size: 14px;
}
.ql-snow {
    .ql-tooltip[data-mode="link"]::before {
        content: "请输入链接地址:";
    }
    .ql-tooltip.ql-editing a.ql-action::after {
        border-right: 0px;
        content: "保存";
        padding-right: 0px;
    }
    .ql-tooltip[data-mode="video"]::before {
        content: "请输入视频地址:";
    }
    .ql-picker.ql-size {
        .ql-picker-label[data-value="12px"]::before,
        .ql-picker-item[data-value="12px"]::before {
            content: "12px";
        }
        .ql-picker-label[data-value="14px"]::before,
        .ql-picker-item[data-value="14px"]::before {
            content: "14px";
        }
        .ql-picker-label[data-value="16px"]::before,
        .ql-picker-item[data-value="16px"]::before {
            content: "16px";
        }
        .ql-picker-label[data-value="18px"]::before,
        .ql-picker-item[data-value="18px"]::before {
            content: "18px";
        }
        .ql-picker-label[data-value="20px"]::before,
        .ql-picker-item[data-value="20px"]::before {
            content: "20px";
        }
        .ql-picker-label[data-value="24px"]::before,
        .ql-picker-item[data-value="24px"]::before {
            content: "24px";
        }
        .ql-picker-label[data-value="28px"]::before,
        .ql-picker-item[data-value="28px"]::before {
            content: "28px";
        }
        .ql-picker-label[data-value="32px"]::before,
        .ql-picker-item[data-value="32px"]::before {
            content: "32px";
        }
        .ql-picker-label[data-value="36px"]::before,
        .ql-picker-item[data-value="36px"]::before {
            content: "36px";
        }
    }
    .ql-picker.ql-header {
        .ql-picker-label::before,
        .ql-picker-item::before {
            content: "文本";
        }
        .ql-picker-label[data-value="1"]::before,
        .ql-picker-item[data-value="1"]::before {
            content: "标题1";
        }
        .ql-picker-label[data-value="2"]::before,
        .ql-picker-item[data-value="2"]::before {
            content: "标题2";
        }
        .ql-picker-label[data-value="3"]::before,
        .ql-picker-item[data-value="3"]::before {
            content: "标题3";
        }
        .ql-picker-label[data-value="4"]::before,
        .ql-picker-item[data-value="4"]::before {
            content: "标题4";
        }
        .ql-picker-label[data-value="5"]::before,
        .ql-picker-item[data-value="5"]::before {
            content: "标题5";
        }
        .ql-picker-label[data-value="6"]::before,
        .ql-picker-item[data-value="6"]::before {
            content: "标题6";
        }
    }
    .ql-picker.ql-font {
        .ql-picker-label[data-value="SimSun"]::before,
        .ql-picker-item[data-value="SimSun"]::before {
            content: "宋体";
            font-family: "SimSun" !important;
        }
        .ql-picker-label[data-value="SimHei"]::before,
        .ql-picker-item[data-value="SimHei"]::before {
            content: "黑体";
            font-family: "SimHei";
        }
        .ql-picker-label[data-value="Microsoft-YaHei"]::before,
        .ql-picker-item[data-value="Microsoft-YaHei"]::before {
            content: "微软雅黑";
            font-family: "Microsoft YaHei";
        }
        .ql-picker-label[data-value="KaiTi"]::before,
        .ql-picker-item[data-value="KaiTi"]::before {
            content: "楷体";
            font-family: "KaiTi" !important;
        }
        .ql-picker-label[data-value="FangSong"]::before,
        .ql-picker-item[data-value="FangSong"]::before {
            content: "仿宋";
            font-family: "FangSong";
        }
    }
}
.ql-align-center {
    text-align: center;
}
.ql-align-right {
    text-align: right;
}
.ql-align-left {
    text-align: left;
}
</style>