背景：业务需求，要实现一个【富文本框】好方便用户插入图片问题：百度了一整天，看了n多文章包括官方文档，又花了半天时间实现需求，对于小白来说，真的是大难题，又着急，又害怕，结果就是，越急越搞不定……此处省略我的吐槽来吧，上步骤： # 一、安装富文本 wangEditor(参考官方文档）[wangEditor](https://www.wangeditor.com/) `npm install wangeditor --save` 我这里装的是版本4 （因为我折腾了半天的版本5 没搞出来） ## 二、在components文件夹下新建一个Vue文件，名字随便。参考：wangEditor.vue 把下面代码复制粘贴进去（[图片上传](https://so.csdn.net/so/search?q=%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0\&spm=1001.2101.3001.7020)部分还没完善好） ```js ``` 接下来是步骤分解： ## 将内容同步到父组件中： ```js this.phoneEditor.config.onchange = (html) => { this.info_ = html // 绑定当前逐渐地值 this.$emit('change', this.info_) // 将内容同步到父组件中 } ``` ## 父组件中的获取方法是 `` @change="getUrl1"获取子组件中的数据，具体方法如下： ```js grtUrl(path){ this.editForm.content = path; }, ``` 将子组件的数据加入到this.editForm.content中 ## 修改内容时需要富文本框中的[数据回显](https://so.csdn.net/so/search?q=%E6%95%B0%E6%8D%AE%E5%9B%9E%E6%98%BE\&spm=1001.2101.3001.7020)，在子组件中加入 ```js props:{ content:"" //获取从父组件中传过来的值，主要用于修改的时候获取值，并加入到富文本框中 }, ``` ## 三、从父组件中调用子组件时完整代码： ```js

培训编号：

培训标题：

培训内容：

创建时间：

``` ```js