在Vue2编辑器中添加字体样式和字体大小

Question

我想在这里添加字体样式，就像如果你想让字体是arial、san serif等，可以选择一样……但现在字体和字体大小不显示在vue2编辑器中。有人能帮我吗？

你可以在这里访问代码：

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

我的答案是基于如何在Quill js上添加带有工具栏选项的字体类型？。我唯一需要更改的是使用const fonts = Quill.import('formats/font');。vue2-editor导出Quill对象，因此您可以简单地按如下方式导入：

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

然后，它主要是复制和粘贴这个发布的答案中的解决方案。不幸的是，vue2-editor没有公开默认的工具栏设置，因此您需要从源代码中逐字复制它，然后手动添加字体下拉列表：

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