vue3 wangeditor5 如何设置默认自号为21px

在 Vue3 中使用 WangEditor5，可以通过在组件的 `mounted` 钩子函数中获取到编辑器实例，然后通过调用 `editor.config` 方法来配置编辑器的默认字号。

以下是一个示例代码：

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

<script>
import WangEditor from 'wangeditor'

export default {
  mounted() {
    const editor = new WangEditor(this.$refs.editorElem)

    editor.config.fontSizes = {
      // 配置字号列表
      '21px': '21px',
      // 其他字号...
    }

    editor.config.fontSize = '21px' // 设置默认字号为 21px

    editor.create()
  },
}
</script>

在上面的代码中，我们通过 `editor.config.fontSizes` 配置了字号列表，然后通过 `editor.config.fontSize` 设置默认字号为 `21px`。如果需要配置其他的字号列表，可以在 `fontSizes` 对象中添加对应的键值对。

相关问题

vue3+ts wangeditor5 如何设置默认自号为21px

您可以在Vue组件中使用wangEditor进行初始化时，设置自定义的样式来设置默认字号为21px。具体来说，您可以使用以下代码：

import wangEditor from 'wangeditor';

const editor = new wangEditor('#editor');

editor.config.customStyle = `
    .w-e-text p {
        font-size: 21px;
    }
`;

editor.create();

这里通过`config.customStyle`属性设置了自定义样式，将所有段落的字号设置为21px。这样，您在使用wangeditor编辑器时，所有的段落默认字号都会是21px。

vue集成wangeditor富文本编辑器

### Vue集成WangEditor富文本编辑器

#### 安装配置

为了在Vue项目中集成WangEditor富文本编辑器，首先需要安装`@wangeditor/editor`以及其对应的样式包。可以通过npm来完成这一步骤。

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue --save

接着，在项目的入口文件（通常是main.js），引入必要的CSS资源[^2]：

import '@wangeditor/editor/dist/css/style.css'

#### 使用方法

创建一个新的组件用于初始化编辑器实例，并将其挂载至页面上指定的位置。下面是一个简单的例子说明如何操作：

<template>
  <div id="editor-container"></div>
</template>

<script>
// 导入 Editor 和 createEditor 函数
import { createEditor } from '@wangeditor/editor'

export default {
  name: 'MyEditor',
  data() {
    return {
      editor: null,
    }
  },
  mounted() {
    this.editor = createEditor({
      selector: '#editor-container', // 编辑区域的选择器
      config: {},                    // 配置项
      mode: 'default'                // 模式，默认即可
    })
  },
  beforeDestroy() {
    if (this.editor == null) return;
    this.editor.destroy();           // 组件销毁前要记得释放掉编辑器实例
  }
}
</script>

对于更复杂的场景比如自定义上传图片等功能，则可以在config参数里设置相应的回调函数处理逻辑。

#### 示例

这里给出一段完整的代码片段作为参考，展示了怎样在一个标准的Vue单文件组件内使用WangEditor编辑器，并实现了基本的文字输入功能。

<!-- MyRichTextEditor.vue -->
<template>
  <div class="richText">
    <!-- 这里放置实际渲染出来的编辑框 -->
    <div ref="toolbar" style="border-bottom: 1px solid #ccc;"></div>
    <div ref="editor" style="text-align:left;min-height:300px;border:1px dashed #ccc;margin-top:-1px;padding-left:8px;"></div>
  </div>
</template>

<script>
import WangEditor from '@wangeditor/editor';
import '@wangeditor/editor/dist/css/style.css';

export default {
  props: ['value'],
  watch: {
    value(newValue, oldValue){
        const editorValue = this.editor.txt.html();
        if(editorValue !== newValue && !this.isChangeByInner){
            this.editor.txt.html(newValue);
        }
    }
  },
  methods:{
     changeHandler(newHtml){
         this.$emit('input', newHtml);  
     }
  },
  mounted(){
      var _self=this;

      // 创建工具栏和编辑区对象
      let E = WangEditor;
      this.editor = new E(this.$refs.editor);

      // 设置 onchange 回调函数，将数据同步到父级组件
      this.editor.config.onchange = function(html){
          _self.changeHandler(html);
      };

      // 自定义菜单配置...
      
      // 创建编辑器
      this.editor.create();

      // 初始化内容
      setTimeout(() => {
          this.editor.txt.html(_self.value || '');
      }, 500);
  },

  destroyed(){
      this.editor.destroy();
  }

};
</script>