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

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

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

使用方法：

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

<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.htmlwindow.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;

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

vue人员轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
Vue中使用pdfJs预览PDF、图片
Vue中使用pdfJs预览PDF.图片 pdf.js是一个使用HTML5构建的可移植文档格式库.它可以帮助我们在浏览器中构建pdf文档,实现在线查看pdf文件的功能. 实现步骤如下: 1.下载pdfJ ...
vue项目引入秀米插件
使用步骤效果图查看秀米第三方对接平台,根据步骤配置链接地址:https://ent.xiumi.us/ue/ UEditor整个文件代码附上(在第一行,叫"npm i vue-ue ...
vue中使用Ueditor编辑器 -- 1
一. 下载包: 从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器,官网地址为:http://ueditor.baidu.com/website/download.html ...
【原创】vue中使用CKEditor5引入插件ckeditor-duplicated-modules报错处理
在vue中使用了ckeditor5后,收到如下图的反馈: 起初以为是小问题,像其他富文本一样加几个属性参数就有了,但是我发现我错了,错的离谱.那些参数加上去没有任何效果,后来查找下才知道是要下载插件. ...
vue-cli 使用ueditor集成秀米富文本
前言要做一个公众号文本和官网文章的同步操作公司准备集成秀米富文本一.准备工作进入秀米官网 (https://r.xiumi.us/board/v5/2a5va/16516964) 根据文章提示下 ...
ueditor 集成秀米背景图片不显示的问题
百度的富文本集成秀米的时候遇到一个大坑,就是远程抓取图片本地化抓取不到背景图片.原因是秀米的背景用的是<section>,而不是<img>,百度抓取不到.查了很多资料也没 ...
在vue中element ui 结合frappe-gantt实现一个简单的甘特图功能
在vue中创建甘特图步骤请参考: https://editor.csdn.net/md/?articleId=130145782 2. 结合element ui 实现甘特图功能实现效果: 2.1 下 ...

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

遇到问题处理：

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

最新文章

热门文章