js获取UEditor富文本编辑器中的图片地址
2020-02-21 23:57:37 来源:易采站长站 作者:王冬梅
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("(]+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);
}
}
}













闽公网安备 35020302000061号