介绍:这里主要说明在vue2.0中怎么使用vue-ueditor-wrap编辑器
- 使用命令下载插件
cnpm install vue-ueditor-wrap -S
- 下载源码放到static文件夹中
https://pan.baidu.com/s/1QP-7J043ct6ihMEiJN0cAQ
- 在组件中引入使用
<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>
问题:
上传视频显示上传地址有误和提交后视频显示空白的问题
解决上传地址显示有误:
- 找到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'));
- 找到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']
- 找到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