项目中使用了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>