轻量级富文本编辑器wangEditor结合vue使用方法示例

融合创新：Vue.js与百度Ueditor富文本编辑器的完美结合

今天我们将为大家介绍如何在Vue.js项目中集成百度开发的Ueditor富文本编辑器。如果你需要实现网页中的文本编辑功能，那么这篇文章将为你提供极大的参考价值。

一、安装与创建实例

通过npm下载Ueditor的Vue集成包：`npm install wangeditor`。安装完成后，我们就可以在Vue项目中使用它了。

接下来，我们来创建一个Ueditor的实例。在Vue组件的模板部分，我们定义一个div元素作为编辑器的容器：。然后在脚本部分，我们导入Ueditor，并在组件的mounted生命周期钩子中创建编辑器的实例。我们可以自定义编辑器的配置，比如监听内容变化的事件，并将变化后的内容同步到数据模型中。

二、自定义高度与上传图片

有时候，我们需要自定义编辑器的高度，并将菜单和编辑框分开。这可以通过在模板中定义两个div元素来实现，一个作为菜单容器，一个作为编辑框容器。然后在脚本中创建编辑器实例时，同时传入这两个容器的id。

在样式部分，我们可以自定义编辑器的样式，比如边框、最小高度等。需要注意的是，我们可以通过设置编辑器配置来上传图片。一种方式是使用base64格式保存图片，另一种方式是指定图片上传的服务器端地址。服务器端接口需要返回固定的数据格式，包括错误代码和图片线上地址列表。

三、效果展示

在实际项目中应用上述步骤后，你就可以在Vue.js项目中看到一个功能丰富的富文本编辑器了。编辑器具有高度自定义的特性，可以根据你的需求进行配置和扩展。它还可以方便地处理图片的上传和展示。

结合Vue.js和百度Ueditor富文本编辑器，你可以快速实现网页中的文本编辑功能，提升用户体验。希望这篇文章能对你有所帮助，如果你还有其他问题，欢迎随时提问。官网详尽展示，wangeditor与vue2.0的完美结合

在子组件中，我们采用wangeditor作为富文本编辑器，体验流畅编辑的乐趣。

template中，简单几行代码便创建了编辑器的基础框架：

```html

```

在script中，我们引入E模块，即wangeditor，并在组件的data中定义editorContent用于存储编辑器内容。通过props接收父组件的方法。

当组件挂载完成(mounted)时，我们实例化一个编辑器对象，并对其进行了许多个性化配置：

```javascript

mounted() {

var editor = new E(this.$refs.editorElem) // 创建富文本实例

editor.customConfig.onchange = (html) => { // 当编辑器内容改变时的回调

this.editorContent = html

this.catchData(html) // 将改变后的html内容通过catchData方法传给父组件

}

// 其他配置...

}

```

其中，对上传图片的配置尤为重要，包括上传图片的服务器接口、自定义文件名、请求头部信息、菜单配置等。提供了详细的上传图片生命周期钩子函数，如上传前、上传成功、上传失败、上传出错以及超时等情境的处理。

在图片上传的hooks中，可以进行丰富的自定义操作，如上传前的校验、上传成功后的处理、上传失败或出错时的提示等，使得图片上传更加符合实际需求。服务器端返回的结果需为JSON格式字符串。

在父组件中，我们使用了 wangeditor 编辑器组件。通过 :catchData 属性，我们可以捕获子组件传递的数据。当子组件中的数据发生变化时，catchData 方法会被触发，并将新的数据赋值给 content 变量。这样，我们就可以在父组件中实时获取到编辑器中的内容。

请注意，只有正确执行了 customInsert 函数中的步骤，图片才会在富文本中显示。否则，图片不会自动显示。在实际使用中，请确保按照上述步骤操作。

（注：以上内容仅为示例，实际使用时请根据实际情况进行调整和优化。）

使用 cambrian.render('body') 渲染本文内容，确保在网页上正确展示。