vue中使用Ueditor富文本编辑器 ---- 学习笔记

一、下载

从Ueditor的官网下载最新版本的Ueditor编辑器

官方下载地址
http://ueditor.baidu.com/website/download.html
选择自己需要的版本下载

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

将上述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'

四、开发公共组件

开发公共组件，可设置填充内容defaultMsg，配置信息config(宽度和高度等)，并提供获取内容的方法。

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'UE',
    data () {
      return {
        editor: null，
	id: Math.random().toString(16).substring(2) + 'ueditorId'
      }
    },
    props