在vue中应用ueditor引入秀米，支持图片以及背景图抓取

当前系统中引入的是jsp的ueditor，如果你们也是使用这个，前端可以直接使用我这边配置好的，至于后端的需要开发人员自己配置，当前支持：

• 秀米保存后图片自动抓取（包括背景图）
• ueditor插入视频后展示
• 可在视频链接中插入音频，自动识别（只支持mp3）
  下载链接：ueditor前端包下载

使用方法：

1. 安装vue-ueditor-wrap
2. 将ueditor包放置在pubilc下并引入（静态资源包）
3. 配置上传路径

<template>
  <div>
    <VueUeditorWrap :config="editorConfig" v-model="configValue" @ready="ready" @contentChange="contentChange"/>
  </div>
</template>

<script>
/*
** ueditor的静态资源都放置在public下，引入用了相对路径
*/
// 因为修改了ueditor的配置，所以这边引入ueditro.all.js内容
import '../../../public/ueditor/ueditor.all.js'
import '../../../public/ueditor/dialogs/xiumi-ue-dialog-v5.js'
import '../../../public/ueditor/dialogs/xiumi-ue-v5.css'
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
  props: ['value'],
  data () {
    return {
      editorConfig: {
        autoHeightEnabled: false, //编译器不自动被内容撑高
        initialFrameHeight: 350, //初始容器高度
        initialFrameWith: "100%",
        serverUrl: "/admin/ueditor/exec", //上传文件地址
        UEDITOR_HOME_URL: "/ueditor/", //UEditor资源文件的存放路径
      },
      configValue: ""
    }
  },
  watch: {
    'value' : function(newVal, oldVal){
      this.configValue = newVal;
    },
    configValue : function(newVal, oldVal){
      this.$emit("update:value", newVal);
    }
  },
  components: {
    VueUeditorWrap
  },
  methods: {
    ready(editorInstance) {
      //编辑器实例
      this.myEditor = editorInstance;
    }
  }
}
</script>

到此前端配置完成！

遇到问题处理：

1.当然也有部分同学秀米图片无法抓取，需要更改文件

// xiumi-ue-dialog-v5.html
 window.addEventListener('message', function (event) {
   if (event.origin == xiumi_url) {
        editor.execCommand('insertHtml', event.data);
        editor.fireEvent("catchRemoteImage") // 添加这行，抓取一下
        dialog.close();
    }
}, false);

2.秀米背景图无法抓取，使用这位老哥的 https://blog.csdn.net/qq736150416/article/details/86503860，直接配置使用就好
3.插入视频没有展示，太多我给忘了，哈哈哈
4.插入视频链接可以添加音频

// 在ueditor.all.js,全局查找case 'video'，然后配置一下，网上参考某个老哥的，链接忘记保存了，勿怪
case 'video':
  var ext = url.substr(url.lastIndexOf('.') + 1);
  if(ext == 'ogv') ext = 'ogg';
  if(ext == 'mp3'){
      str = '<audio' + (id ? ' id="' + id + '"' : '') + ' class=" audio-js" ' + (align ? ' style="float:' + align + '"': '') +
          ' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '">" /></audio>';
  } else {
      str = '<video' + (id ? ' id="' + id + '"' : '') + 'class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
          ' controls preload="auto" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
          '1</video>';
  }
  break;