加入收藏 | 设为首页 | 会员中心 | 我要投稿 济源站长网 (https://www.0391zz.cn/)- 数据工具、数据仓库、行业智能、CDN、运营!
当前位置: 首页 > 综合聚焦 > 移动互联 > 评测 > 正文

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

发布时间:2020-10-18 08:22:21 所属栏目:评测 来源:网络整理
导读:这篇文章主要介绍了js获取UEditor富文本编辑器中的图片地址,最简单的思路应该是先获取UEditor中的内容再将获取到的字符串转换成jquery对象,选择器找到img元素,

  短视频,自媒体,达人种草一站服务

这篇文章主要介绍了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里填充html
var $v = $($div);//从dom对象转换成jquery对象
$.each($v.find("img"),function (v,i) {//选择器找到img元素,循环获取src值
console.log("src======"+i.src);
});

打印结果:

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

1.获取UEditor中的内容

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

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

<p>
 夏季到了,持续高温就连大人都受不了,更别说孩子了。所以该不该给孩子穿袜子又成了宝妈心头的大事,一方面觉得应该给孩子穿,毕竟这个几个理由是拒绝不了的。
 </p>
 <p>
 <img alt="1.jpg" src="" _src="">
 </p>
 <p>
 还有一部分宝妈意见不同,认为还是不穿袜子比较好:
 </p>
 <p>
 1.小孩子经常出汗,新陈代谢比较快,袜子如果不透气的话,有可能会因为生脚汗导致孩子哭闹不休。
 </p>
 <p>
 2.脚底的穴位多,不穿袜子可以充分按摩到脚底。有利于身体其他机能的运转。缓解便秘,消化不良等症状。
 </p>
 <p>
 好像两方家长说的都有道理,那么到底应该穿袜子吗?
 </p>

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的方法,在网上找了个:

1

2var $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("(]+srcs*=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 ThinkImage();//实例化图像处理,缩略图功能
      $image->open($info);// 生成一个居中裁剪为240*160的缩略图
      $unlink=$image->thumb(240, 160,ThinkImage::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=http://www.admin5.com/article/20201015/["|'](.*?)["|'](.*?)>/);
  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];//预览
  }
 }
}

(编辑:济源站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读