UEditor的使用

一、下载包：

从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器，官网地址为：

　http://ueditor.baidu.com/website/

下载解压后会得到如果下文件目录：

将上述Ueditor文件夹拷贝到vue项目的static文件夹中，此文件夹为项目的静态服务文件夹；

二、   修改配置

在ueditor.config.js中修改如下代码：

// 这里是配置Ueditor内部进行文件请求时的静态文件服务地址

 window.UEDITOR_HOME_URL = "/static/Ueditor/"

var URL = window.UEDITOR_HOME_URL || getUEBasePath();
然后修改服务器请求接口地址：我这里使用了代理 

三、   文件的引入

在vue项目的入口文件main.js中将Ueditor所有的基础文件引入如下：（路径自行配制）

import'../static/Ueditor/ueditor.config.js'

import'../static/Ueditor/ueditor.all.min.js'

import'../static/Ueditor/lang/zh-cn/zh-cn.js'

import'../static/Ueditor/ueditor.parse.min.js'

四、   在相应vue的componnent文件中使用富文本编辑器

<template>

　　　　<div>

　　　　<!--editor的div为富文本的承载容器-->

　　　　<divid="editor"></div>

　　　　<buttontype="" @click="gettext">点击</button>

　　　　</div>

　　　　</template>

　　　　<script>

　　　　exportdefault {

       　　　　 data() {

　　　　　　　　return {

                　　　　editor: null,

           　　 　}

        　　},

       　　 mounted() {

　　　　　　// 实例化editor编辑器

　　　　　　this.editor = UE.getEditor('editor');

　　　　　　// console.log(this.editor.setContent("1223"))

       　　 },

       　　 methods: {

          　　  gettext() {

　　　　　　// 获取editor中的文本

                　　console.log(this.editor.getContent())

           　　 }

       　　 },

        destroyed() {

　　// 将editor进行销毁

　　this.editor.destroy();

      　　  }

  　　  }

　</script>