vue-quill-editor如何设置默认字体
时间: 2024-06-13 13:01:15 浏览: 182
浅谈vue中使用编辑器vue-quill-editor踩过的坑
要设置vue-quill-editor的默认字体,需要在初始化Quill实例时通过配置对象传递字体设置。具体来说,可以在vue组件中通过以下方式设置:
```javascript
<template>
<div>
<quill-editor v-model="content" :options="editorOption"></quill-editor>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
},
data () {
return {
content: '',
editorOption: {
// 这里设置默认字体
modules: {
toolbar: [
['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': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean']
],
// 下面这一行是设置默认字体的关键
// 注意:这里需要将fontFamily的值设置为一个数组
// 这是因为Quill支持多种字体,如果需要设置多个字体,可以在数组中添加多个值
// 如果只需要设置一个字体,则只需要提供一个字符串即可
// 在这个例子中,我们只设置了一个字体:'宋体'
// 如果需要使用其他字体,请将'simSun'替换为目标字体的名称
fontFamily: ['simSun']
}
}
}
}
}
</script>
```
上面的代码中,我们使用了Vue组件的方式引入了vue-quill-editor,并在Quill实例的配置对象中设置了默认字体。具体来说,我们将`fontFamily`属性设置为一个数组,其中包含了我们需要使用的字体名称。在这个例子中,我们只设置了一个字体:'宋体',如果需要使用其他字体,只需要将`simSun`替换为目标字体的名称即可。
阅读全文