在 Vue2-editor 中添加字体样式和字体大小

Question

我想在这里添加字体样式，如果您希望字体为 arial、san-serif 等，有一个选项...但是现在 vue2-editor 中不显示字体和字体大小。谁能帮帮我？

您可以在此处访问代码：

https://codesandbox.io/s/liz23?file=/src/App.vue:0-553

这是代码：

<template>
  <div id="app">
    <vue-editor v-model="content"></vue-editor>
    <div v-html="content"></div>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: {
    VueEditor
  },

  data() {
    return {
      content: "<p>Some initial content</p>"
    };
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Answer 1

我的答案基于How to add font types on Quill js with toolbar options? 上的优秀答案。我唯一需要改变的是使用const fonts = Quill.import('formats/font');。 vue2-editor 导出 Quill 对象，因此您可以简单地导入它：

import { VueEditor, Quill } from "vue2-editor";

然后，主要是复制粘贴解决方案in this posted answer。 vue2-editor 不幸的是没有公开默认的工具栏设置，所以你需要逐字复制它 from the source code 然后手动添加你的字体下拉列表：

customToolbar: [
    // Copied from source
    // https://github.com/davidroyer/vue2-editor/blob/master/src/helpers/default-toolbar.js
    [{ header: [false, 1, 2, 3, 4, 5, 6] }],
    ["bold", "italic", "underline", "strike"], // toggled buttons
    [
      { align: "" },
      { align: "center" },
      { align: "right" },
      { align: "justify" }
    ],
    ["blockquote", "code-block"],
    [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
    [{ indent: "-1" }, { indent: "+1" }],
    [{ color: [] }, { background: [] }],
    ["link", "image", "video"],
    ["clean"],

    // This is what I have added
    [{ 'font': fonts.whitelist }],
]

在此处查看概念验证：https://codesandbox.io/s/vue2-editor-demo-forked-35wo1?file=/src/App.vue