VUE实现集成UEditor百度富文本编辑器

1.下载地址:http://ueditor.baidu.com/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-php 2.下载完文件重新起名为UE，并放入到 /static/下。文档结构如下： 3.配置

打开 ueditor.config.js 找到 window.UEDITOR_HOME_UR 将它设置为：

window.UEDITOR_HOME_URL = "/static/ue/";

其他的配置参数，请参考官方文档进行配置：http://fex.baidu.com/ueditor/

集成到 UEditor 编辑器到我们的系统中，打开 /src/main.js 文件，在合适位置插入下面的代码：

// 配置百度编辑器 import '../static/ue/ueditor.config.js' import '../static/ue/ueditor.all.min.js' import '../static/ue/lang/zh-cn/zh-cn.js' import '../static/ue/ueditor.parse.min.js'

创建 UEditor VUE 组件

在 /src/components/ 目录下创建 ue.vue 文件，作为我们的编辑器组件文件。

<template> <div> <script id="editor" type="text/plain"></script> </div> </template> <script> export default { name: 'ue', data () { return { editor: null } }, props: { value: '', config: {} }, mounted () { const _this = this this.editor = window.UE.getEditor('editor', this.config) this.editor.addListener('ready', function () { _this.editor.setContent(_this.value) }) }, methods: { getUEContent () { return this.editor.getContent() } }, destroyed () { this.editor.destroy() } } </script>

在其他页面引用该组件

<template> <div> <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter> <input type="button" value="显示编辑器内容（从控制台查看）" @click="returnContent"> </div> </template> <script> import Uediter from '@/components/ue.vue' export default { components: {Uediter}, data () { return { dat: { content: '' }, ueditor: { value: '编辑器默认文字', config: {} } } }, methods: { returnContent () { this.dat.content = this.$refs.ue.getUEContent() console.log(this.dat.content) } } } </script>

4.总结： 经过此番操作，终于见到了富文本编辑器，?！！！