[TOC]
这⾥我们将富⽂本编辑器封装为公⽤的公共组件，以便复⽤。 如果以后要统⼀配置富⽂本编辑器或更换其他富⽂本编辑器，只需对公共组件操作即可。 // src/components/TextEditor/index.vue —- 公共组件⽬录

在需要的⻚⾯中引⼊测试

// create.vue … // 引⼊公共组件 import TextEditor from ‘@/components/TextEditor/index’ … // 注册为⼦组件 components: { … TextEditor }, … // 在课程详情中设置 label=“课程详情”> <!— type=”textarea” v-model=”course.courseDescriptionMarkDown” > —>

绑定数据

// create.vue … v-model=“course.courseDescriptionMarkDown”> tor> …

⽗组件使⽤ v-model 后，公共组件需要接收

// TextEditor/index.vue … props: { value: { type: String, default: ‘’ } }, …

如果⽗组件使⽤时希望给编辑器设置初始值（例如提示信息），这⾥通过⽅法设置

测试时，修改⽗组件的 course.courseDescriptionMarkDown 的初始值。

// TextEditor/index.vue … // 由于需要进⾏ DOM 操作，使⽤ mounted 钩⼦ mounted () { // 初始化富⽂本编辑器 this.initEditor() }, methods: { initEditor () { … // 初始化后设置内容 editor.txt.html(this.value) } } …

当富⽂本编辑器输⼊完毕需要提交时，需要将内容传出给⽗组件，这时使⽤编辑器提供的⽅法操作。

onchange 回调⽤于在内容改变时触发。 回调必须设置在 editor.create() 前，否则编辑器已经创建完毕，设置⽆效。

通过组件⾃定义事件传出给⽗组件的 v-model 绑定。

// TextEditor/index.vue … methods: { initEditor () { const editor = new E(this.$refs.editor) // 设置回调 editor.config.onchange = function (value) { // value 为输⼊的内容，通过⾃定义事件传出即可 (注意 this 指向，建议使 ⽤箭头函数) this.$emit(‘input’, value) } editor.create() editor.txt.html(this.value) } }