<think>我们正在
使用@wangeditor/editor-for-vue，这是一个Vue组件。要修改默认的字号和
字体，我们需要自定义编辑器的配置。
根据wangEditor文档，我们可以通过配置`editorConfig`来实现，具体是设置`fontFamily`和`fontSize`。
步骤：
1. 在Vue组件中，我们
使用`<editor>`标签，并绑定`editorConfig`对象。
2. 在`editorConfig`中设置`fontFamily`和`fontSize`。
示例代码：
在模板中，我们这样写：
<editor
v-model="html"
:defaultConfig="editorConfig"
/>
在data中，我们定义editorConfig：
data() {
return {
html: '',
editorConfig: {
fontFamily: {
//
字体家族配置
items: [
'Arial',
'
Tahoma',
'Verdana',
'宋体',
'黑体',
'微软雅黑',
'楷体',
]
},
fontSize: {
// 字号配置
items: [
'12px',
'14px',
'16px',
'18px',
'24px',
'36px'
]
}
}
}
}
注意：fontFamily和fontSize的配置都是数组形式，数组中的项会出现在编辑器的下拉菜单中。同时，默认情况下编辑器会
使用第一个
字体和字号作为默认值。
因此，如果你想改变默认
字体，可以将你想要的默认
字体放在数组的第一位。同样，默认字号也是数组的第一位。
但是，如果你希望设置一个不在下拉菜单中的默认
字体和字号，该怎么办？
根据文档，我们还可以通过CSS来覆盖编辑器默认样式。不过，更推荐
使用配置的方式。
另外，注意在配置中，我们还可以设置`defaultFontSize`和`defaultFontFamily`吗？
查看文档：在editorConfig中，我们可以设置`fontFamily`和`fontSize`，但没有单独的`defaultFontSize`和`defaultFontFamily`属性。实际上，默认值就是数组的第一个元素。
所以，我们只需调整数组的顺序，将我们想要的默认
字体和字号放在数组的第一位即可。
但是，有时候我们可能希望默认
字体不在下拉菜单中显示？这通常不需要，因为下拉菜单中应该包含所有可选的
字体，而默认
字体是其中之一。
另一种方法：通过CSS覆盖
我们可以通过全局CSS样式来设置编辑器内容的默认
字体和字号。例如：
.w-e-text-container {
font-family: "微软雅黑" !important;
font-size: 14px !important;
}
注意：这种方法会直接覆盖编辑器内的样式，但不会影响工具栏下拉框的默认显示（下拉框的默认显示还是由配置决定）。不过，当用户不选择字号和
字体时，内容区就会
使用这个CSS样式。
因此，我们可以同时
使用两种方法：
1. 配置editorConfig，将默认
字体和字号放在数组第一位，这样工具栏下拉框会显示默认值。
2. 通过CSS设置编辑器内容区的默认样式，确保即使没有选择，也能显示我们想要的
字体和字号。
但是，注意：如果配置了`fontFamily`和`fontSize`，那么编辑器初始化时会自动将内容区的
字体和字号设置为数组的第一项（通过添加内联样式）。所以，如果我们同时设置了CSS，那么内联样式会覆盖CSS（因为内联样式优先级更高）。因此，如果我们希望内容区
使用CSS设置的
字体，那么需要确保配置的数组第一项和CSS设置一致。
推荐做法：只
使用配置的方式，因为这样工具栏下拉框的默认值和内容区的默认值是一致的。
具体操作：
在Vue组件的`<style>`部分，我们可以添加全局样式（如果编辑器是全局
使用），或者
使用scoped样式（但要注意，编辑器
生成的DOM可能在组件外部，scoped可能不适用）。因此，我们可以
使用非scoped样式，并确保选择器准确。
不过，由于编辑器是嵌入在组件内的，我们可以给编辑器容器一个特定的class，然后通过这个class来设置样式。
例如，在模板中：
<div class="my-editor">
<editor ... />
</div>
然后，在样式中：
.my-editor .w-e-text-container {
font-family: "微软雅黑";
font-size: 14px;
}
但是，这样设置后，编辑器在初始化时仍然会应用配置中的第一个
字体和字号（内联样式），所以会覆盖我们的CSS。因此，我们不需要额外设置CSS，只需要配置即可。
结论：
修改editorConfig中的fontFamily和fontSize数组，将默认的
字体和字号放在数组的第一位。
示例：
editorConfig: {
fontFamily: {
items: [
'微软雅黑', // 默认
字体
'Arial',
'
Tahoma',
'Verdana',
'宋体',
'黑体',
'楷体',
]
},
fontSize: {
items: [
'14px', // 默认字号
'12px',
'16px',
'18px',
'24px',
'36px'
]
}
}
这样，编辑器初始化时就会
使用“微软雅黑”和“14px”作为默认
字体和字号。
注意：如果编辑器已经创建，然后你修改了配置，编辑器不会重新创建，所以最好在创建之前就配置好。
另外，如果用户需要修改默认的
字体和字号，也可以
使用编辑器实例的API，但通常我们在初始化时配置即可。
参考文档：https://www.wangeditor.com/v5/guide/config.html#fontfamily
因此，在Vue组件中，我们只需要按照上述方式配置editorConfig即可。
但是，请注意：在Vue中
使用时，我们可能会遇到响应式的问题。editorConfig应该在data中定义，并且如果需要在运行时改变，可能需要重新创建编辑器（通过改变key等方式）。
最后，我们给出一个完整的Vue组件示例：
假设我们的组件如下：</think>要修改`@wangeditor/editor-for-vue`编辑器的默认字号和
字体，需要通过编辑器配置项实现。以下是具体步骤和代码示例：
### 解决方案
#### 1. **配置编辑器默认样式**
在Vue组件的`editorConfig`对象中设置`fontFamily`和`fontSize`属性：
```vue
<template>
<div class="editor-wrapper">
<editor
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
/>
</div>
</template>
<script>
import { Editor } from '@wangeditor/editor-for-vue'
export default {
components: { Editor },
data() {
return {
html: '<p>默认文本</p>',
mode: 'default',
editorConfig: {
fontFamily: {
items: [
'微软雅黑', // 默认
字体（数组第一项）
'宋体',
'Arial',
'
Tahoma'
]
},
fontSize: {
items: [
'14px', // 默认字号（数组第一项）
'16px',
'18px'
]
},
// 其他配置...
}
}
}
}
</script>
<style scoped>
.editor-wrapper {
/* 可选：全局样式覆盖 */
--w-e-textarea-font-family: '微软雅黑', sans-serif;
--w-e-textarea-font-size: 14px;
}
</style>
```
#### 2. **关键配置说明**
- **`fontFamily.items`**
数组第一项为默认
字体（示例：`微软雅黑`）
- **`fontSize.items`**
数组第一项为默认字号（示例：`14px`）
- **CSS变量覆盖**（可选）
通过CSS变量全局覆盖编辑器区域样式：
```css
.editor-wrapper {
--w-e-textarea-font-family: '微软雅黑', sans-serif;
--w-e-textarea-font-size: 14px;
}
```
#### 3. **验证效果**
- 编辑器初始化后，新输入文本将自动应用默认
字体和字号
- 工具栏下拉菜单会显示配置的选项列表
### 注意事项
1. **配置优先级**
`editorConfig`配置优先于CSS变量，推荐首选配置项方式
2. **浏览器兼容性**
中文
字体名称需用
英文引号包裹（如`'微软雅黑'`）
3. **动态修改**
若需运行时修改默认值，需重新初始化编辑器（通过`v-if`控制或变更`key`值）
> 参考wangEditor官方文档：[
字体配置](https://www.wangeditor.com/v5/font.html) | [字号配置](https://www.wangeditor.com/v5/font-size.html)[^1]
### 相关问题
1. 如何自定义wangEditor工具栏按钮？
2. wangEditor如何实现图片上传功能？
3. Vue3中
使用wangEditor有哪些特殊配置？
[^1]: wangEditor官方配置文档
本文分享了作者将文本编辑器字体更换为Tahoma后的使用体验。Tahoma字体在小字号下表现出色，有助于清晰地区分1、l和L等字符，但在数字0的表现上稍显不足，易与字母o和O混淆。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
