vue wangeditor回显设置初始样式

Vue Wangeditor是一个基于百度编辑器的富文本编辑器组件，用于Vue.js项目中。若想在初始化时设置Wangeditor的初始样式，你需要在组件的created()、mounted()钩子函数，或者在模板中通过计算属性来完成。以下是一个简单的例子：
<template>
<div ref="wangeditor">
<!-- ... -->
</div>
</template>

<script>
import WangEditor from 'vue-wangeditor'

export default {
components: {
WangEditor,
},
data() {
return {
editorContent: '', // 这里存储初始内容，可以来自服务器或者其他地方
initialStyle: { // 定义初始样式的对象
fontSize: '14px',
lineHeight: '1.5em',
fontFamily: '宋体',
backgroundColor: '#fff', // 样式示例
}
}
},
mounted() {
this.$nextTick(() => {
const editor = this.$refs.wangeditor.create();
editor.customConfig.onInit = () => {
editor.editor.body.style.cssText = JSON.stringify(this.initialStyle); // 将样式对象转换成CSS字符串并应用到编辑器上
};
editor.customConfig.content = this.editorContent; // 设置初始内容
});
}
}
</script>
登录后复制
这里我们首先在数据对象中定义了initialStyle变量，并在mounted钩子中创建编辑器实例时设置了初始样式。注意要先通过$nextTick确保DOM已经渲染完毕再操作。