vue-cli和ueditor结合使用

下载ue。jsp版本放入static下然后

<template>
  <div class="hello">
    <div id="editor" type="text/plain" style="width:100%;height:350px;"></div>
    <!--<button @click="submits">保存</button>-->
    <!--<button @click="xieru">写入</button>-->
  </div>
</template>


<script>
  import '../../static/Ueditor/ueditor.config'
  import '../../static/Ueditor/ueditor.all';
  import '../../static/Ueditor/lang/zh-cn/zh-cn';
  export default {
    name: 'hello',
    data () {
      return {
        ue: '',
        uedata: [],
        xierudata: []
      }
    },
    mounted() {
      this.ue = UE.getEditor('editor',{
        toolbars:[['simpleupload']]
      });
    },
    methods: {
      //获取富文本内容
      submits(){
        this.uedata.push(UE.getEditor('editor').getContent());
        this.$store.state.ueContent=this.uedata.join("\n");
        console.log(this.$store.state.ueContent);
      },
      //设置富文本内容
      xieru(){
       const ueText = this.$store.state.ueText;
        UE.getEditor('editor').ready(function() {
          UE.getEditor('editor').setContent(ueText);
        });
      }
    },
    destroyed() {
      this.ue.destroy();
    }
  }
</script>

调用ue组件

<template lang="html">
  <div class="fenlei_box">
             <!--调用ue组件-->
            <uee ref="uee"></uee>
  </div>
</template>
<script>
  import uee from '@/components/ueditor';//ue组件
  import {getAesString} from '../../../static/js/aesGet.js'; //加密方法
  import {getCookie} from '../../../static/js/getCookie.js'; //获取cookie方法
  export default {
    data() {
      return 
      }
    },
    methods: {
      newTraininglive() {
        //调用ue组件的获取内容的方法
        this.$refs.uee.submits();
      },
    },
    components: {
      uee
    }
  }
</script>
<style lang="css" scoped>

</style>

//页面实例化

   <div id="genPeople" type="text/plain"></div>
  <div id="progressHistory" type="text/plain"></div>...............
data(){
  import '../../../static/Ueditor/ueditor.config'
  import '../../../static/Ueditor/ueditor.all';
  import '../../../static/Ueditor/lang/zh-cn/zh-cn';
return:{
 //记录ue
        ueInfo: "",
        uedoSerInfo: "",
        relationNews: "",
        uedocSerJlInfod: "",
        uedocSerJlInfoz: "",
        uedocSerJlInfot: "",
}
},
methods:{
fu:(){
//这样写可以防止innerHTML报错，也就是ue没有实例之前添加
 UE.getEditor('genPeople').ready(function() {
                UE.getEditor('genPeople').setContent(res.data.dataMap.gys.genPeople);
              });
}
},
 mounted() {
      this.toSupplierFile2();
      //实例话ue 公司创始人
      this.ueInfo = UE.getEditor('genPeople', {
        toolbars: [['insertimage']], //多图上传
        wordCount: false,               //关闭字数统计
        elementPathEnabled: false,      //关闭elementPath
        initialFrameHeight: 400,        //默认高
      });
      //实例话ue 发展历史
      this.uedoSerInfo = UE.getEditor('progressHistory', {
        toolbars: [['insertimage']], //多图上传
        wordCount: false,               //关闭字数统计
        elementPathEnabled: false,      //关闭elementPath
        initialFrameHeight: 400,        //默认高
      });
      //实例话ue 相关新闻
      this.relationNews = UE.getEditor('relationNews', {
        toolbars: [['insertimage']], //多图上传
        wordCount: false,               //关闭字数统计
        elementPathEnabled: false,      //关闭elementPath
        initialFrameHeight: 400,        //默认高
      });
      //实例话ue 相关单位
      this.uedocSerJlInfod = UE.getEditor('relationUnit', {
        toolbars: [['insertimage']], //多图上传
        wordCount: false,               //关闭字数统计
        elementPathEnabled: false,      //关闭elementPath
        initialFrameHeight: 400,        //默认高
      });
      //实例话ue 企业相关证件
      this.uedocSerJlInfoz = UE.getEditor('relationImage', {
        toolbars: [['insertimage']], //多图上传
        wordCount: false,               //关闭字数统计
        elementPathEnabled: false,      //关闭elementPath
        initialFrameHeight: 400,        //默认高
      });
      //实例话ue
      this.uedocSerJlInfot = UE.getEditor('other', {
        toolbars: [['insertimage']], //多图上传
        wordCount: false,               //关闭字数统计
        elementPathEnabled: false,      //关闭elementPath
        initialFrameHeight: 400,        //默认高
      });
    },
    destroyed() {
      //组件离开后销毁
      this.ueInfo.destroy();
      this.uedoSerInfo.destroy();
      this.relationNews.destroy();
      this.uedocSerJlInfod.destroy();
      this.uedocSerJlInfoz.destroy();
      this.uedocSerJlInfot.destroy();
      this.$destroy();
    }