vue-quill-editor自定义字体大小和字体样式

最新推荐文章于 2024-04-30 13:38:25 发布

VIP文章王柃苏

最新推荐文章于 2024-04-30 13:38:25 发布

阅读量5.4k

点赞数 6

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_53003063/article/details/122945452

版权

不用修改下载的源文件，直接在editorquill.vue文件中修改即可

重点部分如下

[{ size: ['10px', '12px', false, '16px', '18px', '20px', '30px', '32px'] }], // 字体大小
[{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif'] }], // 字体种类
import { Quill,quillEditor } from "vue-quill-editor"; 正常没有引入红色，需额外引入红色并添加 4
// 自定义字体大小

let Size = Quill.import('attributors/style/size')

Size.whitelist = ['10px', '12px', '16px', '18px', '20px', '30px', '32px']

Quill.register(Size, true)

// 自定义字体类型

var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']

var Font = Quill.import('formats/font')

Font.whitelist = fonts

Quill.register(Font, true)
整个style复制替换你自己的

ps:如有新增的样式或px可依葫芦画瓢依次增加

全部代码

<template>
    <div style="height:300px;margin-bottom: 25px;">
        <!-- 图片上传组件辅助-->
      <el-upload
        class="avatar-uploader"
        :action="serverUrl"
        :show-file-list="false"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :before-upload="beforeUpload">
      </el-upload>

        <quill-editor 
        class="editor"
        v-model="content"
        ref="myQuillEditor" 
        :options="editorOption" 
        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
        </quill-editor>
    </div>
</template>
<script>
// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
 ["blockquote", "code-block"], // 引用  代码块
  [{ header: 1 }, { header: 2 }], // 1、2 级标题
 [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
 [{ scrip