vue3 中使用wangEditor 默认字号问题

Question

vue3 中使用wangEditor编辑器 如何修改默认字号，默认字号太小了

Answer 1

补充回复如下：

要想去掉wangEditor编辑器中的默认字号，可以将编辑器的默认字号设置为一个空字符串。以下是修改示例代码的方法：

在修改默认字号的地方，将字号列表中的值设置为空字符串即可去掉默认字号。示例代码如下：

// 自定义字号列表

const fontSizes = [
  { name: '12px', value: '' },
  { name: '14px', value: '14px' },
  { name: '16px', value: '16px' },
  { name: '18px', value: '18px' },
  { name: '20px', value: '20px' }
]

修改后的代码将第一个字号的value设置为空字符串，即去掉了默认字号。通过这种方式，你可以实现去掉wangEditor编辑器的默认字号的效果。

---

原回复如下：
引用皆我百晓生小程序回复作答：

---

要修改wangEditor编辑器中的默认字号，可以通过设置编辑器的样式来实现。首先，你需要在vue项目中安装wangEditor编辑器，然后在组件中引入并初始化编辑器。

在初始化编辑器之后，你可以通过修改编辑器的默认样式来修改默认字号。以下是一个示例代码，展示了如何使用vue3和wangEditor编辑器来修改默认字号：

<template>
  <div>
    <div ref="editorElem"></div>
  </div>
</template>

<script>
import wangEditor from 'wangeditor'

export default {
  mounted() {
    // 初始化编辑器
    const editor = new wangEditor(this.$refs.editorElem)

    // 自定义字号列表
    const fontSizes = [
      { name: '12px', value: '12px' },
      { name: '14px', value: '14px' },
      { name: '16px', value: '16px' },
      { name: '18px', value: '18px' },
      { name: '20px', value: '20px' }
    ]

    // 修改默认字号
    editor.config.menus = editor.config.menus.map(menu => {
      if (menu === 'fontSize') {
        menu = ['fontSize', ...fontSizes]
      }
      return menu
    })

    // 创建编辑器
    editor.create()
  }
}
</script>

在上面的示例中，我们首先引入wangEditor并在mounted钩子函数中初始化编辑器。然后，我们定义了一个自定义的字号列表fontSizes，并将它应用到编辑器的配置中。最后，我们创建了编辑器，并将其插入到指定的DOM元素中。

上述代码中的自定义字号列表仅为示例，你可以根据你的需求自行定义。同时，你还可以根据需要修改其他的编辑器配置来符合你的实际需求。