vue2使用ueditor

最近用vue2做项目，需要用到富文本编辑器，开始用的vue2-editor这个是基于Quill，看上去听漂亮的，但是有几点无法满足需求

1. 图片是用base64保存的，无法上传图片
2. 对文字的编辑能力较弱，如法指定选择文字修改标题，只能整行修改。

于是决定用ueditor。但是网上找了好多vue2使用ueditor的插件都不是很好用。最后找到了一种解决方案，其实不是基于vue插件，是利用webpack实现的。下面就说说步骤。

以vue-cli生成的项目为例
index.html添加如下代码，具体地址根据自己的项目修改

    <script type="text/javascript" charset="utf-8" src="http://127.0.0.1/vue/static/utf8-php/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="http://127.0.0.1/vue/static/utf8-php/ueditor.all.min.js"> </script>

webpack.base.cong.js添加如下配置

externals: {
    'UE': 'UE',
  },

editor组件

<template>
  <div>
    <mt-button @click="geteditor()" type="danger">获取</mt-button>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
  </div>
</template>

<script>
const UE = require('UE');// eslint-disable-line

export default {
  name: 'editorView',
  data: () => (
    {
      editor: null,
    }
  ),
  methods: {
    geteditor() {
      console.log(this.editor.getContent());
    },
  },
  mounted() {
    this.editor = UE.getEditor('editor');
  },
  destroyed() {
    this.editor.destroy();
  },
};
</script>

<style>

</style>

实现方案源自https://segmentfault.com/q/1010000007707112?_ea=1428451
感谢作者提供的方案