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.总结：
经过此番操作，终于见到了富文本编辑器，?！！！