使用vue-ueditor-wrap 开发文本编辑器

介绍：这里主要说明在vue2.0中怎么使用vue-ueditor-wrap编辑器

1. 使用命令下载插件

   cnpm install vue-ueditor-wrap -S

2. 下载源码放到static文件夹中

   https://pan.baidu.com/s/1QP-7J043ct6ihMEiJN0cAQ

3. 在组件中引入使用

<template>
  <div id="app">
     <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
     <button @click='getmsg'>获取</button>
     <div v-html='divHtml'></div>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
  name: 'App',
    created() {
    
  },
  components:  {VueUeditorWrap},
  data() { 
    return {
      divHtml:'',
      msg: '',
      myConfig: {
      // 编辑器不自动被内容撑高
      autoHeightEnabled: false,
      // 初始容器高度
      initialFrameHeight: 240,
      // 初始容器宽度
      initialFrameWidth: '100%',
      // 上传文件接口
      serverUrl: 'http://xxx:xxx',
      // UEditor 资源文件的存放路径
      UEDITOR_HOME_URL: '/static/UEditor/'
    }
    }
  },
  mounted() {
   
  },
  methods: {
     getmsg(){
       this.divHtml=this.msg
     }
  }
}
</script>

问题：

上传视频显示上传地址有误和提交后视频显示空白的问题

解决上传地址显示有误：

1. 找到ueditor.all.js文件,搜索me.commands[“insertvideo”]

// 将html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'image'));替换为
html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'video'));

2. 找到ueditor.config.js文件,搜索whiteList

// 在img中添加_url
img: ['src', 'alt', 'title', 'width', 'height', 'id', '_src', '_url','loadingclass', 'class', 'data-latex']
// video后面添加代码
source: ['src', 'type'],
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play', 'autoplay', 'loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],
iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']

3. 找到dialogs/video/video.js 文件,搜索function createPreviewVideo

//将
$G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+
        '<embed class="previewVideo" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
            ' src="' + conUrl + '"' +
            ' width="' + 420  + '"' +
            ' height="' + 280  + '"' +
            ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
        '</embed>';
// 替换为
$G("preview").innerHTML = '<video class="previewVideo" controls="controls" src="'+conUrl+'" style="width:420;height:280 "></video>';

解决上传视频显示空白：

// 找到ueditor.all.js和ueditor.all.min.js文件将一下代码删除
application/x-shockwave-flash