js获取UEditor富文本编辑器中的图片地址

来源:脚本之家  责任编辑:小易  

从截图上看,路径应该没问题的,考虑下是不是本地浏览器的问题导致不显示图片?尝试换一台电脑打开试下,或者尝试清理火狐浏览器本地缓存文件,然后重新访问。

写之前在网上找了很多方法,最简单的思路应该是1.获取UEditor中的内容;2.将获取到的字符串转换成jquery对象;3.选择器找到img元素,获取src值。

1. 前端配置项 前端需要配置 serverUrl 参数,修改 ueditor.config.js 里的 serverUrl 参数,改成服务器端路径,参考:URL + 'php/controller.php' 2. 后端配置项 后端配置项在 php/config.json 里配置,不同的上传有各自的配置项。 修改上传图

var content= UE.getEditor('details').getContent();//获取编辑器内容 var $div = document.createElement("div");//创建一个div元素对象 $div.innerHTML = content;//往div里填充html var $v = $($div);//从dom对象转换成jquery对象 $.each($v.find("img"),function (v,i) {//选择器找到img元素,循环获取src值 console.log("src======"+i.src); });

function postdo(){ $content=I('body'); $conntent=stripslashes($content); //print_r($content); $url=" "; $imgurl=preg_match_all($url,$content); //print_r($imgurl); die; }

打印结果:

图片上传后点“html”工具按钮就会显示出图片的路径。它的格式是: "/ueditor/php/upload1/20140703/1404366701400195.png" 如果你想用程序提取的话 1、使用editor.getContent()方法可以获得编辑器的内容 2、使用jquery提取内容中图片路径。

写出上面代码之前碰了几次壁,绕了几个弯,下面就是我整个开发过程,记录下。

确定,allHtmlEnabled:false 的值为false

1.获取UEditor中的内容

提到姚明,他是中国的骄傲,姚明十分爱国,当年还曾拒绝日本丰田提供的1.6亿元合同。职业生涯无论受伤病影响,还是伤愈刚刚复出,姚明都为国家队奉献了篮球的一切,并且建立姚基金来为祖国做公益事业。转眼间,姚明姚明叶莉的女儿姚沁蕾已经6岁了,在之前报道的姚沁蕾的国籍也受到了很多人的关注。2010年5月21日,姚明的女儿姚沁蕾在美国休斯敦出生,休斯敦也是姚明职业生涯一直处在的城市,姚沁蕾美国出生,那么她就自动拥有了成为美国公民的资格,尽管同时她也可能申请成为中国公民,但是中国法律不允许双重国籍。在姚沁蕾出生之前,国籍这个问题就一直受到媒体和球迷的热烈讨论,球迷也对此事表示出了担心,因为姚明是十分爱国的球

这一步很简单,使用编辑器提供的getContent()函数

如果遇到工作上被架空,但又不辞退你,那大概有以下三个意思:1,让你自己辞职这个不用多说,大家估计都会想到。因为赔偿金的关系,领导总是希望你辞职,而不是辞退你。用这招毫无疑问就是拼心态,看谁先撑不下去。2,想潜规则你这点以前适用于异性领导,现在即使同性领导也会有这个可能。只能平时多留意,同时搜集证据,以备不时之需。3,职场斗争的结果这种情况的缘由是你的直属领导不信任你,怀疑你,因此不想让你接触核心工作,以防更多信息外泄。而这种不信任可能来源于有其他公司看中你了,也可能是被同单位其他部门看中,而这个部门和你现在的领导可能并不友好。综上所述,既然已经感觉到被架空了,就不能再浑浑噩噩的过日子了,想好下

2.将获取到的字符串转换成jquery对象

芽菜在川菜中的运用是比较多,但是水煮牛肉这道菜并不加入芽菜。芽菜除在川菜运用,川点运用也很广泛。著名的有芽菜包子、咸烧白、叶儿耙、担担面、干烧鱼、干烧蹄筋等等。芽菜宜宾芽菜是四川宜宾市别具特色的地方名菜,被誉为四川四大名菜之一,脆、甜、嫩、味美可口。有着悠久的历史。据可考资料清嘉庆《叙州府志。物产》中记载:“葱韭蒜白菜青菜蔓菁各厅县志皆有。”说明当时做为芽菜的原料——青菜已经有较为广泛的种植了。芽菜是用芥菜的嫩茎划成丝腌制而成,分咸、甜两种。咸芽菜产于四川的南溪、泸州、永川,创始于1841年;甜芽菜产于四川的宜宾,古称“叙府芽菜”,创始于1921年,现畅销于四川及京、津、沪等地。叶儿粑叶儿粑(

<p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58, 58, 58); font-family: 微软雅黑, 宋体, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(247, 253, 255);"> 夏季到了,持续高温就连大人都受不了,更别说孩子了。所以该不该给孩子穿袜子又成了宝妈心头的大事,一方面觉得应该给孩子穿,毕竟这个几个理由是拒绝不了的。 </p> <p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58, 58, 58); font-family: 微软雅黑, 宋体, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(247, 253, 255); text-align: center;"> <img alt="1.jpg" width="490" height="306" src="http://www.socksb2b.com/d/file/zixun/wazichangshi/2019-07-05/1b0038e6cf808ae9c091c34ded031de9.jpg" _src="http://www.socksb2b.com/d/file/zixun/wazichangshi/2019-07-05/1b0038e6cf808ae9c091c34ded031de9.jpg"> </p> <p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58, 58, 58); font-family: 微软雅黑, 宋体, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(247, 253, 255);"> 还有一部分宝妈意见不同,认为还是不穿袜子比较好: </p> <p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58, 58, 58); font-family: 微软雅黑, 宋体, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(247, 253, 255);"> 1.小孩子经常出汗,新陈代谢比较快,袜子如果不透气的话,有可能会因为生脚汗导致孩子哭闹不休。 </p> <p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58, 58, 58); font-family: 微软雅黑, 宋体, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(247, 253, 255);"> 2.脚底的穴位多,不穿袜子可以充分按摩到脚底。有利于身体其他机能的运转。缓解便秘,消化不良等症状。 </p> <p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58, 58, 58); font-family: 微软雅黑, 宋体, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(247, 253, 255);"> 好像两方家长说的都有道理,那么到底应该穿袜子吗? </p>

随着《欢乐颂》的热播,除了五位女主火了,连女主喝的水都火了!大家一直很好奇,安迪喝的水到底是什么牌子的?—?—安迪的标配矿泉水安迪在《欢乐颂》中,是位高挑美丽、气质出众的冷美人。在她紧张的时候就会喝水,玻璃瓶装的矿泉水几乎每集都出现!她不但自己喝,朋友心情不好的时候,也会来一瓶!大家都在猜:这水是何方神圣?竟然这么好喝?你有没有发现,矿泉水装在玻璃瓶里就会立马变得高大上?玻璃瓶的矿泉水也不止有依云哦,还有其他的妖艳尖货!—?—Perrier原味矿泉水会冒泡的冰水你见过吗?Perrier就是这样神奇。早在凯撒时代它就备受推崇,被称作“LesBouillens”,意指“沸腾之水”。—?—Sourc

var content= UE.getEditor(‘details').getContent();

上面是我编辑器里的内容(content),最简单的方法是用

$(content)来转换成jquery对象,但是$(content).html()的打印结果如下:

可以看出来转换出的Jquery对象代表的是content中第一个html元素p,剩下的html元素获取不到,也就无法进行第三步获取图片地址。

这里可以补充的是,网上提供的一种方法

$(content).get(0).outerHTML的打印结果如下:

get(1)、get(2)…依次可以打印出接下来的html元素代码,我开始考虑循环获取,但是循环次数的获取回到了原地,根本取不到,有兴趣的可以尝试。

既然jquery的思路断了,我就开始考虑原生js的方法,在网上找了个:

var $div = document.createElement("div");//创建一个div元素对象 $div.innerHTML = content;//往div里填充html

打印出来的结果非常好:

前面绕的弯两行代码就解决了,原生js真棒!

但是我还是习惯用jquery,又把它转换成jquery了,方便下面的选择器和循环

var $v = $($div);//从dom对象转换成jquery对象

3.选择器找到img元素,获取src值

$.each($v.find("img"),function (v,i) { console.log("src======"+i.src); });

i.src可以直接获取图片url地址,成功!

下面为大家补充

js如何获取ueditor里面的第一张图片

想获取ueditor里面第一张图片作为缩略图,怎么获取,ueditor里面全部是以文本方式储存的

UE.getPlainTxt() 可获取到编辑器中的纯文本内容,有段落格式

UE.getContentTxt() 可获取到编辑器中的纯文本内容,没有段落格式;

ueditor 没有提供直接获取图片的功能,可以UE.getContent() 获取全部内容,使用正则表达式 筛选出图片,我提供一个使用JAVA写的筛选方法,前台js代码类似:

Pattern p_img = Pattern.compile("(]+src\s*=\s*'\"['\"][^>]*>)"); Matcher m_img = p_img.matcher(content); while (m_img.find()) { String img = m_img.group(1); //m_img.group(1) 为获得整个img标签 m_img.group(2) 为获得src的值 }

可以打开ueditor.all.min.js 查看,里面有所有支持的方法 注释也都很明白

ueditor发布文章获取第一张图片为缩略图实现方法

正则匹配图片地址获取第一张图片地址

此为函数 在模块或是全局Common文件夹中的function.php中

/** * [getPic description] * 获取文本中首张图片地址 * @param [type] $content [description] * @return [type] [description] */ function getPic($content){ if(preg_match_all("/(src)=([\"|']?)([^ \"'>]+\.(gif|jpg|jpeg|bmp|png))\\2/i", $content, $matches)) { $str=$matches[3][0]; if (preg_match('/\/Uploads\/images/', $str)) { return $str1=substr($str,7); } } }

用法演示

$content=I('post.body');//获取富文本编辑器内容 $info=getPic($content);//使用函数 返回匹配地址 如果不为空则声称缩略图 if(!$info==null){ $thumb=$info.'thumb240x160.png'; $image = new \Think\Image();//实例化图像处理,缩略图功能 $image->open($info);// 生成一个居中裁剪为240*160的缩略图 $unlink=$image->thumb(240, 160,\Think\Image::IMAGE_THUMB_CENTER)->save($thumb); }else{ $thumb=''; }

dedecms中的js获取fckeditor中的图片

function get_firstimg(){ //var c=document.getElementById('body').value; var c=FCKeditorAPI.GetInstance('body').GetXHTML(true); if(c){ var fimg=c.match(/<img(.*?) src=["|'](.*?)["|'](.*?)>/); if(fimg[2]){ document.getElementById('picname').value=fimg[2]; if(document.getElementById('ImgPr'))document.getElementById('ImgPr').src=fimg[2];//预览 if(document.getElementById('picview'))document.getElementById('picview').src=fimg[2];//预览 } } }

以上就是js获取UEditor富文本编辑器中的图片地址的详细内容,更多关于UEditor图片的资料请关注脚本之家其它相关文章!

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

百度UEditor编辑器上传图片怎么获取图片路径、类型并存入数据库中!

我也正在弄这个,还没弄好,不知道怎么弄,你弄出来了吗?求指教、、、

前端用jQuery怎么获取到富文本ueditor web编辑器里面的文字,图片内容

UE.getPlainTxt() 可获取到编辑器中的纯文本内容,有段落格式

UE.getContentTxt() 可获取到编辑器中的纯文本内容,没有段落格式;

ueditor 没有提供直接获取图片的功能,可以UE.getContent() 获取全部内容,使用正则表达式 筛选出图片,我提供一个使用JAVA写的筛选方法,前台js代码类似:Pattern p_img = Pattern.compile("(<img[^>]+src\\s*=\\s*['\"]([^'\"]+)['\"][^>]*>)");

Matcher m_img = p_img.matcher(content);

while (m_img.find()) {

    String img = m_img.group(1); //m_img.group(1) 为获得整个img标签  m_img.group(2) 为获得src的值

    }

可以打开ueditor.all.min.js 查看,里面有所有支持的方法  注释也都很明白

前端用jQuery怎么获取到富文本ueditor web编辑器里面的文字和图片内容?

在线文档对UEditor说明不够全面,收集了一些常用的方法和基本设置,以供参考。

1、创建编辑器

UE.getEditor('editor', {

initialFrameWidth:"100%" //初始化选项

})

精简版

UE.getEditor('editor')

2、删除编辑器

UE.getEditor('editor').destroy();

3、设置焦点

UE.getEditor('editor').focus();

4、获取编辑器内容

UE.getEditor('editor').getContent()

5、编辑器是否有内容

UE.getEditor('editor').hasContents()

6、获取编辑器内容纯文本格式

UE.getEditor('editor').getContentTxt()

7、获取带格式的纯文本

UE.getEditor('editor').getPlainTxt()

8、启用编辑器

UE.getEditor('editor').setEnabled();

9、禁止编辑

UE.getEditor('editor').setDisabled('fullscreen');

10、获取整个html内容

UE.getEditor('editor').getAllHtml()

11、常用设置

imageUrl:UEDITOR_HOME_URL + "../yunserver/yunImageUp.php", //图片上传接口

imagePath:"http://",

scrawlUrl:UEDITOR_HOME_URL + "../yunserver/yunScrawlUp.php",//涂鸦接口

scrawlPath:"http://",

fileUrl:UEDITOR_HOME_URL + "../yunserver/yunFileUp.php",//文件上传接口

filePath:"http://",

catcherUrl:UEDITOR_HOME_URL + "php/getRemoteImage.php",//获取远程图片接口

catcherPath:UEDITOR_HOME_URL + "php/",

imageManagerUrl:UEDITOR_HOME_URL + "../yunserver/yunImgManage.php",//图片管理接口

imageManagerPath:"http://",

snapscreenHost:'ueditor.baidu.com',

snapscreenServerUrl:UEDITOR_HOME_URL + "../yunserver/yunSnapImgUp.php",//截图接口

snapscreenPath:"http://",

wordImageUrl:UEDITOR_HOME_URL + "../yunserver/yunImageUp.php",//word图片转存接口

wordImagePath:"http://", //

getMovieUrl:UEDITOR_HOME_URL + "../yunserver/getMovie.php",//获取视频接口

lang:/^zh/.test(navigator.language || navigator.browserLanguage || navigator.userLanguage) ? 'zh-cn' : 'en',

langPath:UEDITOR_HOME_URL + "lang/",

webAppKey:"9HrmGf2ul4mlyK8ktO2Ziayd",

initialFrameWidth:860, //初始化宽度

initialFrameHeight:420, //初始化高度

focus:true //是否焦点

如何用js把百度编辑器的图片路径提取出来

您是想获取img下的src值吗

$("#imgId").attr('src',path);更多追问追答追问能详细说明下吧。我获取到这个值之后,我要把这个值传递到一个字段放进数据库追答

我是把UEditor里面的东西,当作对象的一个属性保存的,这个属性是String的,然后最后在查看数据库保存的东西的时候,发现保存的都是ueditor已经帮你写好的html标签,然后再前端显示的时候,直接取值就取对象的属性(content)就是之前在UEDitor编辑的东西,包括样式、视频和图片都有的,我用的是freemarker,不知道你具体想实现什么效果

  • 另外我想说明一下,我的图片是上传到腾讯云上的,所以如果您只是想为了上传图片的话,建议可以省略富文本的步骤,如果是需求需要,那就当我没说……

追问我想实现的是缩略图上传。把编辑器上传图片功能单独拿出来。然后或者src值,提交表单后传到数据库。追答缩率图的话,你可以选择使用Input标签的形式,

我是用的是Spring注解的形式:@RequestParam(value = "file") MultipartFile thumb进行接收的,这样只需要把上传到腾讯云返回过来的地址作为缩略图的src存在对象属性中保存在数据库,读取图片的时候,直接src = "对象.属性" 就可以了

如果方便的话,加我QQ吧,我不是经常在上逛的……QQ:849451834,加我的时候请注明一下你是谁哈,o(^▽^)o本回答被提问者采纳

对于修改百度的编辑器ueditor里面图片的存储位置,和浏览位置路径怎么配置

在编辑器中的php文件夹内,有一个config.json文件,里面就是配置文件,你只需更改imagePathFormat这样的xxxPathFormat后面指定的路径即可。当然,你的程序最好是放在根目录,这样比较好,直接改一下路径即可正常使用。

比如找到如下,自已改为自已要的路径:

"imagePathFormat": "/data/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",

讨厌那些乱回答牛头不对马嘴的。

当然,你用的是java版的,就去编辑器中的java文件夹中去改对应的config.json文件的对应的路径即可。

  • 本文相关:
  • 指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
  • 指定位置如果有图片显示图片,无图片显示广告的js
  • javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版
  • js获取富文本中的第一张图片(正则表达式)
  • js+html实现自定义上传图片按钮并显示图片功能的方法分析
  • 原生js实现点击轮播切换图片
  • 使用preloadjs加载图片资源的基础方法详解
  • javascript如何实现双指控制图片功能
  • asp.net ckeditor和ckfinder的应用
  • fckeditor在ie9中无法弹出对话框的解决方法(弹出层兼容问题)
  • xheditor编辑器使用文档
  • dedecms ckeditor编辑器添加链接默认新窗口打开的修改方法
  • fckeditor smarty 编辑器的应用php
  • kindsoft在线网页编辑器简单的配置参数介绍
  • ueditor 默认字体和字号的修改方法
  • ewebeditor 不能粘贴或复制的解决方法
  • 在kindeditor中获取当前光标的位置索引的实现代码
  • fckeditor编辑器在php中的配置方法
  • 百度UEditor编辑器上传图片怎么获取图片路径、类型...
  • 前端用jQuery怎么获取到富文本ueditor web编辑器里...
  • 前端用jQuery怎么获取到富文本ueditor web编辑器里...
  • 如何用js把百度编辑器的图片路径提取出来
  • 对于修改百度的编辑器ueditor里面图片的存储位置,...
  • 富文本编辑器Ueditor上传的图片在Firefox 和 IE中...
  • ueditor富文本编辑器上传图片怎么配置?
  • 怎么获取ueditor内容的第一张图片为缩略图
  • 在ueditor编辑器里如何用php获得上传图片的url,数...
  • 百度编辑器Ueditor上传图片路径转义了的问题!
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved