vue-quill-editor如何设置字体大小

请参考以下攻略：

vue-quill-editor如何设置字体大小

vue-quill-editor是一个Vue.js组件，用于在应用程序中集成Quill富文本编辑器。在设置字体大小时，我们可以通过以下步骤来实现：

1. 创建一个自定义组件

我们可以使用vue-cli快速创建一个Vue.js工程，并通过npm安装vue-quill-editor：

npm install vue-quill-editor

接下来，在组件中引入Quill的CSS样式和组件：

<template>
  <div>
    <quill-editor v-model="content" :options="editorOption"></quill-editor>
  </div>
</template>

<script>
import Quill from 'quill'
import { QuillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.snow.css'

export default {
  components: {
    QuillEditor
  },
  data() {
    return {
      content: '',
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],          // toggled buttons
            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript

            [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction

            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, false] }],

            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            [{ 'align': [] }],

            ['clean']                                         // remove formatting button
          ]
        },
        theme: 'snow'
      }
    }
  }
}
</script>

这是一个最简单的使用vue-quill-editor的示例代码，我们在editorOption中设置了modules对象来配置富文本编辑器的工具栏，包含了设置字体大小的工具。

1. 配置字体大小

Quill中通过设置size来配置字体大小，而在vue-quill-editor中，支持对size属性进行配置。以下是一个示例代码，将字体大小设置为12pt：

modules: {
  toolbar: [
    [{ 'size': ['12pt'] }],
    // 其他工具栏按钮
  ]
}

除此之外，Quill还支持相对于基础字体大小的百分比来设置字体大小，这可以通过将size属性设置为一个字符串来实现。例如，以下示例将字体大小设置为基础字体的200%：

modules: {
  toolbar: [
    [{ 'size': ['200%'] }],
    // 其他工具栏按钮
  ]
}

1. 其它设置

我们还可以进一步调整字体大小设置的细节，包括设置标签名、添加样式等。以下是一个示例，将<span>标签转换为<span style="font-size: 12pt;">：

modules: {
  toolbar: [
    [{ 'size': [] }],
    // 其他工具栏按钮
  ],
  overlay: {
    style: {
      position: 'fixed',
      zIndex: 99999,
      backgroundColor: 'rgba(0, 0, 0, 0.1)'
    }
  },
  formats: [
    'size', 'header', 'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent', 'link', 'image', 'video'
  ],
  customOptions: [{
    import: 'p',
    whitelist: [{ 
      style: /^font-size:/,
      attributes: /^data-/
    }],
    render: function(inline, block) {
      if (inline) {
        let size = inline.getAttribute('data-size')
        if (size) {
          return `<span style="font-size:${size}">${block}</span>`
        }
      }
      return null
    }
  }],
}

我们在以上代码中添加了formats和customOptions属性，其中customOptions用于自定义标签，将其转换为设置了font-size属性的<span>标签，从而实现对字体大小的设置。

希望以上内容可以帮助您解决问题，如有不明白之处可以继续咨询我。