wangeditor修改默认字体大小

291 阅读1分钟

 项目中使用了wangeditor5版本,但是我想要修改初始的默认字体大小,问这个问题的人不少,但是方法有效的没有,还有一个推荐这样写的:

handleCreated() {
    this.editor = Object.seal(editor);
    // 设置默认字号
    this.editor.children.forEach(item => {
      item.children.forEach(ele => {
          ele.fontSize = '16px'; // 设置默认字号
        }
      });
    });
  }

这样写完全是强行修改字体大小,只要激活了编辑器,它会遍历当时已存在的内容,无法容许其他字号内容的存在,完全不满足我的需求,因此,这个方法根本无法实现一个持久的、“默认”的样式规则,非常之脆弱。

  • v4 做法: editor.config.defaultFontSize = '16px'
  • v5 做法 中,editorConfig 对象里已经不存在 defaultFontSize 这个配置项了。v5 废弃了这种通过 JS 配置默认样式的做法,推荐使用 CSS 来控制样式,以实现更好的内容与表现分离

由此,问题解决就非常简单了,直接在父组件穿透即可:

<style scoped>
    /* 使用 :deep() 来穿透 scoped 样式的限制, 直接为编辑器内容区域设置样式。这里的 p 标签是内容的最小单位,为其设置样式最精确。 */
    :deep(.w-e-text-container p) {
      font-size: 12px !important;
    }
</style>