vue里面使用ueditor富文本编辑器

最近有个需求是让我在项目中使用富文本编辑器，之前一直使用的是vue-quill-editor这个插件，但这个项目后台有要求必须规定使用ueditor编辑器，好在这个有同事已经写了一点，我只需要稍加改动即可。好了闲话少叙，下面我们就一起来学习一下ueditor的使用
第一步
先下载下来源码包
地址：http://ueditor.baidu.com/website/download.html（因为我的项目已经写好，所以这个源码来自别的网站）
下载下来后，我们如果是2.0的脚手架就把他放在static文件夹下面，如果是3.0的脚手架就把他放在public文件架下面。
第二步
在入口文件main.js页面根据相应的路径引入文件
第三步
在我们的项目中自己新建一个Ee.vue文件，写一些自己的内容
如下文：

<script :id=id type="text/plain">
            {{content}}
        </script>

<script>
  export default {
    name: 'UE',
    data () {
      return {
        editor: null
      }
    },
    props: {
      config: {
        type: Object
      },
      id: {
        type: String
      },
      content: {
        type: String
      }
    },
    mounted () {
      this._initEditor()
    },
    methods: {
      _initEditor () { // 初始化UE
        this.editor = UE.getEditor(this.id,this.config)
      },
      getUEContent () { // 获取含标签内容方法
        return this.editor.getContent()
      }
    },
    destroyed () {
      this.editor.destroy()
    }
  }
</script>

然后在用到的父组件内把它引入进去

 import UEdit from "@/components/basicFacts/UE.vue";

注册组件

components: {
      UEdit
    },
     data() {
      return {
        // 初始化Ueditor配置参数
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 300
        },
        id: 'geographicalLocationId',// 不同编辑器必须不同的id
        content:"",//初始化值
      };
    },

在页面上使用组件

<!-- content是组件刚加载完成时的默认内容，config里面是一些相关的配置项。ref的作用是为了父组件能够调用子组件的方法。 -->
            <UEdit :id=id :config=config  ref="geographicalLocationRef" :content="content"></UEdit>

最后启动我们的项目如果看到了富文本编辑器，我们这个功能就算是完成了。
好了今天的分享就到这里了，每天学习一点，进步一点，今天你学习了吗