教你如何调用百度编辑器ueditor的上传图片、上传文件等模块

出于兴趣爱好，前段时间自己尝试写了一个叫simple的cms，里面使用了百度ueditor编辑器，发现它的多图片上传模块很不错，用起来很方便，又可以选择已经上传好的图片。正好我又是个懒人，发现有现成的自己就不想新开发了。于是我就想，是不是可以调用这个上传模板为自己所用呢？

有了这个想法后，我就到网上查阅资料，可惜资料少的可怜，都不能很好解决我的问题。于是觉得还是自己动手丰衣足食，皇天不负苦心人，终于摸索出解决方法，现在分享出来，和自己有同样想法的小伙伴。

代码如下：

<html>

<head>

<script src="ueditor/ueditor1.43.config.js"></script>

<script src="ueditor/ueditor1.43.all.min.js"></script>

</head>

<body>

<script type="text/plain" id="j_ueditorupload" style="height:5px;display:none;" ></script>

<script>

//实例化编辑器

var o_ueditorupload = UE.getEditor('j_ueditorupload',

{

autoHeightEnabled:false

});

o_ueditorupload.ready(function ()

{

o_ueditorupload.hide();//隐藏编辑器

//监听图片上传

o_ueditorupload.addListener('beforeInsertImage', function (t,arg)

{

alert('这是图片地址：'+arg[0].src);

});

/* 文件上传监听

* 需要在ueditor.all.min.js文件中找到

* d.execCommand("insertHtml",l)

* 之后插入d.fireEvent('afterUpfile',b)

*/

o_ueditorupload.addListener('afterUpfile', function (t, arg)

{

alert('这是文件地址：'+arg[0].url);

});

//弹出图片上传的对话框

function upImage()

{

var myImage = o_ueditorupload.getDialog("insertimage");

myImage.open();

}

//弹出文件上传的对话框

function upFiles()

{

var myFiles = o_ueditorupload.getDialog("attachment");

myFiles.open();

}

</script>

<button type="button" onClick="upImage()">调用上传图片模块</button>

<br>

<button type="button" onClick="upFiles()">调用上传文件模块</button>

</body>

<html>

注意：需要在ueditor.all.min.js文件中找到d.execCommand("insertHtml",l)之后插入d.fireEvent('afterUpfile',b)

教你如何调用百度编辑器ueditor的上传图片、上传文件等模块相关推荐

百度编辑器 UEditor 多图上传弹窗中去掉【在线管理】和【图片搜索】Tab页
网上搜到说这两个tab注释没用,要直接删除.其实style="display:none"也是可以的,亲测.  <span ...
全网最直接简单。百度富文本跨域上传文件到文件服务器
看了很多文章其实也有很多办法,实现跨域上传.现在讲我目前所用的方法.只实现的多图上传.单图上传失败. 接下来必须认真的看完文章. 当前我用的版本为UEditor1.4.3. 这里主要是实现重写接收文 ...
themyleaf 图片上传_springboot thymeleaf 整合百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
百度php editor图片上传到其他盘,百度编辑器Editor图片独立上传
将百度编辑器中的图片独立出来上传: html:代码 var myEditorImage,d,myEditorImage = new UE.ui.Editor(); myEditorImage.rend ...
使用百度云对象存储BOSnodejs上传文件
BOS上传文件核心代码 const config = {credentials: {ak: '',sk: ''} };let bucket = ''; let client = new BosClie ...
百度编辑器ueditor使用
百度编辑器ueditor使用引入步骤: ueditor放到相应目录比如\blog\Public\admin 2.页面head中加入js <script type="text/ja ...
java百度上传控件_百度Bos上传文件工具类-BosUtils（java）
功能要求 java项目中所有的图片均使用对象存储BOS 准备材料首先你要又百度bos的账号,找到自己的ak.sk.endpoint.bucketname(这些东西不懂得可以去看bos的文档) 功能代 ...
phpcms9.6 ueditor_Phpcms v9深度整合百度编辑器Ueditor
PHPCMS V9自带的ckeditor功能有点弱,用起来很不习惯,最近发现百度推出的开源编辑器ueditor还不错,于是开始整合PHPCMS V9和ueditor 1.2,经过拖拖拉拉两周的时间终于 ...
【转】百度编辑器UEditor
Ueditor 1.4.3 单独调用上传图片,或文件功能原文:https://www.cnblogs.com/sadkilo/p/5951336.html 第一步引入ueditor的js包第二步 ...

教你如何调用百度编辑器ueditor的上传图片、上传文件等模块

教你如何调用百度编辑器ueditor的上传图片、上传文件等模块相关推荐

最新文章

热门文章