• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > js获取UEditor富文本编辑器中的图片地址

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

作者:站长图库 字体:[增加 减小] 来源:互联网

站长图库向大家介绍了js获取,UEditor富文本编辑器,图片地址等相关知识,希望对您有所帮助

这篇文章主要介绍了js获取UEditor富文本编辑器中的图片地址,最简单的思路应该是先获取UEditor中的内容再将获取到的字符串转换成jquery对象,选择器找到img元素,获取src值

写之前在网上找了很多方法,最简单的思路应该是

1、获取UEditor中的内容;

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

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

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

打印结果:


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


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

1、获取UEditor中的内容

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

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


<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>
var content= UE.getEditor(‘details').getContent();

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

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


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



可以看出来转换出的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&nbs
  


 
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • js获取UEditor富文本编辑器中的图片地址
  • 聊聊Nodejs获取参数的四种方法
  • Thinkphp中JS如何获取模板变量(示例详解)

相关文章

  • jQuery checkbox不可选怎么实现
  • 如何安装和使用BootstrapVue,构建项目界面
  • BootstrapTable如何重新加载数据?3种方式了解一下!
  • Photoshop制作3D小人推动切割的艺术字教程
  • Photoshop绘制逼真的老式收音机
  • vue.js如何实现数字滚动增加效果?代码示例
  • AI教程圆环渐变LOGO设计教程
  • 解决LNMP环境安装WordPress不显示主题,无法编辑的教程
  • ThinkPHP6怎么用表单令牌验证数据来源有效性
  • 四种Laravel ORM开启created_at的方法

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • Vue3.0 新特性以及使用总结
    • 关键词选择技巧之长尾关键词法
    • 苹果CMS批量替换字段内容
    • Composer怎么执行降级操作?教你降级到版本1
    • Photoshop制作石纹背景效果的立体字
    • 实例详解thinkphp6搭建后端api接口
    • 实现在dedecms模板中调用wordpress的文章方法
    • ThinkPHP5框架实现多数据库连接
    • 帝国CMS封装的ajax加载信息框架代码
    • CentOS7 MySQL怎么进行定时备份

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有