vue-quill-editor富文本编辑器
<template> <div> <quill-editor v-model="formData.content" ref="QuillEditor" class="editor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" > </quill-editor> </div> </template> <script> import { quillEditor } from "vue-quill-editor"; import Quill from "quill"; import "quill/dist/quill.core.css"; import "quill/dist/quill.snow.css"; import "quill/dist/quill.bubble.css"; var fonts = [ "SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong", "Arial", "Times-New-Roman", "sans-serif", ]; var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"]; var Size = Quill.import("formats/size"); Size.whitelist = sizes; var Font = Quill.import("formats/font"); Font.whitelist = fonts; //将字体加入到白名单 Quill.register(Font, true); const toolbarOptions = [ // ["insertMetric"], ["bold", "italic", "underline", "strike"], // 加粗,斜体,下划线,删除线 // ["blockquote", "code-block"], //引用,代码块 // [{ header: 1 }, { header: 2 }], // 几级标题 [{ list: "ordered" }, { list: "bullet" }], // 有序列表,无序列表 [{ script: "sub" }, { script: "super" }], // 下角标,上角标 [{ indent: "-1" }, { indent: "+1" }], // 缩进 [{ direction: "rtl" }], // 文字输入方向 [{ size: sizes }], // 字体大小 [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 [{ color: [] }, { background: [] }], // 颜色选择 [ { font: fonts, }, ], // 字体 [{ align: [] }], // 居中 ["clean"], // 清除样式, // ["link", "image"], // 上传图片、上传视频 ]; // toolbar标题 const titleConfig = [ { Choice: ".ql-insertMetric", title: "跳转配置" }, { Choice: ".ql-bold", title: "加粗" }, { Choice: ".ql-italic", title: "斜体" }, { Choice: ".ql-underline", title: "下划线" }, { Choice: ".ql-header", title: "段落格式" }, { Choice: ".ql-strike", title: "删除线" }, { Choice: ".ql-blockquote", title: "块引用" }, { Choice: ".ql-code", title: "插入代码" }, { Choice: ".ql-code-block", title: "插入代码段" }, { Choice: ".ql-font", title: "字体" }, { Choice: ".ql-size", title: "字体大小" }, { Choice: '.ql-list[value="ordered"]', title: "编号列表" }, { Choice: '.ql-list[value="bullet"]', title: "项目列表" }, { Choice: ".ql-direction", title: "文本方向" }, { Choice: '.ql-header[value="1"]', title: "h1" }, { Choice: '.ql-header[value="2"]', title: "h2" }, { Choice: ".ql-align", title: "对齐方式" }, { Choice: ".ql-color", title: "字体颜色" }, { Choice: ".ql-background", title: "背景颜色" }, { Choice: ".ql-image", title: "图像" }, { Choice: ".ql-video", title: "视频" }, { Choice: ".ql-link", title: "添加链接" }, { Choice: ".ql-formula", title: "插入公式" }, { Choice: ".ql-clean", title: "清除字体格式" }, { Choice: '.ql-script[value="sub"]', title: "下标" }, { Choice: '.ql-script[value="super"]', title: "上标" }, { Choice: '.ql-indent[value="-1"]', title: "向左缩进" }, { Choice: '.ql-indent[value="+1"]', title: "向右缩进" }, { Choice: ".ql-header .ql-picker-label", title: "标题大小" }, { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: "标题一" }, { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: "标题二" }, { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: "标题三" }, { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: "标题四" }, { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: "标题五" }, { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: "标题六" }, { Choice: ".ql-header .ql-picker-item:last-child", title: "标准" }, { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: "小号" }, { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: "大号" }, { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: "超大号" }, { Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "标准" }, { Choice: ".ql-align .ql-picker-item:first-child", title: "居左对齐" }, { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: "居中对齐", }, { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: "居右对齐", }, { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: "两端对齐", }, ]; export default { name: "addarticle", components: { quillEditor, }, data() { return { formData: { content: "", }, editorOption: { placeholder: "请在这里输入", theme: "snow", //主题 snow/bubble modules: { history: { delay: 1000, maxStack: 50, userOnly: false, }, toolbar: { container: toolbarOptions, handlers: { insertMetric: this.showHandle, }, }, }, }, }; }, mounted() { this.initButton(); this.initTitle(); }, methods: { initTitle() { document.getElementsByClassName("ql-editor")[0].dataset.placeholder = ""; for (let item of titleConfig) { let tip = document.querySelector(".quill-editor " + item.Choice); if (!tip) continue; tip.setAttribute("title", item.title); } }, showHandle() { this.$message.error("这是自定义工具栏的方法!"); }, // 自定义按钮内容初始化 initButton() { // console.log("----------------------"); // const editorButton = document.querySelector(".ql-insertMetric"); // editorButton.innerHTML = // '<i class="el-icon-link" style="font-size: 18px;color:black">i</i>'; }, // 失去焦点 onEditorBlur(editor) {}, // 获得焦点 onEditorFocus(editor) {}, // 开始 onEditorReady(editor) {}, // 值发生变化 onEditorChange(editor) { // 如果需要手动控制数据同步,父组件需要显式地处理changed事件 // this.content = editor.html; console.log(editor); }, }, }; </script> <style lang="less"> .editor { line-height: normal !important; height: 320px; } .ql-snow .ql-tooltip[data-mode="link"]::before { content: "请输入链接地址:"; } .ql-snow .ql-tooltip.ql-editing a.ql-action::after { border-right: 0px; content: "保存"; padding-right: 0px; } .ql-snow .ql-tooltip[data-mode="video"]::before { content: "请输入视频地址:"; } .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: "文本"; } .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"; } .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"; } .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"; } .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"; } .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"; } .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"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before { content: "黑体"; font-family: "SimHei"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before { content: "微软雅黑"; font-family: "Microsoft YaHei"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before { content: "楷体"; font-family: "KaiTi"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before { content: "仿宋"; font-family: "FangSong"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before { content: "Arial"; font-family: "Arial"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before { content: "Times New Roman"; font-family: "Times New Roman"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before { content: "sans-serif"; font-family: "sans-serif"; } .ql-font-SimSun { font-family: "SimSun"; } .ql-font-SimHei { font-family: "SimHei"; } .ql-font-Microsoft-YaHei { font-family: "Microsoft YaHei"; } .ql-font-KaiTi { font-family: "KaiTi"; } .ql-font-FangSong { font-family: "FangSong"; } .ql-font-Arial { font-family: "Arial"; } .ql-font-Times-New-Roman { font-family: "Times New Roman"; } .ql-font-sans-serif { font-family: "sans-serif"; } /* 字号设置 */ /* 默认字号 */ .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "14px"; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: "14px"; font-size: 14px; } .ql-size-14px { font-size: 14px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: "16px"; font-size: 16px; } .ql-size-16px { font-size: 16px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: "18px"; font-size: 18px; } .ql-size-18px { font-size: 18px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { content: "20px"; font-size: 20px; } .ql-size-20px { font-size: 20px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before { content: "22px"; font-size: 22px; } .ql-size-22px { font-size: 22px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before { content: "26px"; font-size: 26px; } .ql-size-26px { font-size: 26px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before { content: "28px"; font-size: 28px; } .ql-size-28px { font-size: 28px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before { content: "30px"; font-size: 30px; } .ql-size-30px { font-size: 30px; } </style>