vue 使用百度编辑器ueditor

1、先从百度管网下载资源  http://ueditor.baidu.com/website/download.html ，然后解压到静态资源  static(和src同级) 文件中，然后在 单独起一个组件 UE.vue

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
import '../../../static/utf8-jsp/ueditor.config.js'  //根据自己文件的路径接入
import '../../../static/utf8-jsp/ueditor.all.min.js'
import '../../../static/utf8-jsp/lang/zh-cn/zh-cn.js'
import '../../../static/utf8-jsp/ueditor.parse.min.js'
  export default {
    name: 'UE',
    data () {
      return {
        editor: null
      }
    },
    mounted() {
      const _this = this;
     
      this.editor = UE.getEditor('editor', { 
            BaseUrl: '', 
            UEDITOR_HOME_URL: this.url_head + '/static/utf8-jsp/', //这个是静态资源的路径
            // toolbars:[]  //编辑器里需要用的功能
          }); // 初始化UE
      this.editor.addListener("ready", function () {
          _this.editor.setContent(''); // 确保UE加载完成后，放入内容。
        });
      console.log(this.text);
    },
    methods: {
      getUEContent() { // 获取内容方法
        return this.editor.getContent()
      },
      testMsg(){
        const _this = this;
        this.defaultMsg = this.text;
        console.log(this.defaultMsg);
        this.editor.setContent(this.defaultMsg); // 确保UE加载完成后，放入内容。
      }
    },
    watch : {
      'text' : 'testMsg'
    },
    props : ['text'], //接收传过来的文章
    destroyed() {
      this.editor.destroy();
    }
  }
</script>
<style type="text/css">
  #editor{height: 500px;}
</style>

2、在需要用的地方接入 UE.vue 组件 ，根据内容给编辑器传递参数

<template><UE :text="addData.text" ref="ueBox"></UE></template>

import UE from '../page/UE.vue';
	export default{
		data(){
			return{
				 
				uedata: [], 
				addData : {
					text : '123',
				},
				imgDataUrl : '',
				formLabelWidth : '140px'
			}
		},
		methods : {
			parentClick(){
				this.addData.text = '21312312'
			}
		},
		mounted : function() {
			
		},
		components : {
			UE,
		}
	}

3、编辑器的上传图片问题

打开 ueditor.config.js 文件，在里面找到

    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL: URL

        // 服务器统一请求接口路径
       // , serverUrl: URL + "jsp/controller.jsp"   //改掉它
…………
}