js获取UEditor富⽂本编辑器中的图⽚地址
写之前在⽹上了很多⽅法，最简单的思路应该是1.获取UEditor中的内容；2.将获取到的字符串转换成jquery对象；3.选择器到img元素，获取src值。
var content= UE.getEditor('details').getContent();//获取编辑器内容
var $div = ateElement("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 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-s 夏季到了，持续⾼温就连⼤⼈都受不了，更别说孩⼦了。所以该不该给孩⼦穿袜⼦⼜成了宝妈⼼头的⼤事，⼀⽅⾯觉得应该给孩⼦穿，毕竟这个⼏个理由是拒绝不了的。
</p>
<p 1.jpg" width="490" height="306" src="www.socksb2b/d/file/zixun/wazichangshi/2019-07-05/1b0038e6cf808ae9c091c34ded031de9.jpg" _src="www.socksb2b/d/file/zixun/wazichangshi/2019-07-05/1b0038e6cf808ae9c091c34ded03 </p>
<p 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- 1.⼩孩⼦经常出汗，新陈代谢⽐较快，袜⼦如果不透⽓的话，有可能会因为⽣脚汗导致孩⼦哭闹不休。
</p>
<p 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-好像两⽅家长说的都有道理，那么到底应该穿袜⼦吗？
</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的⽅法，在⽹上了个：
var $div = ateElement("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⾥⾯全部是以⽂本⽅式储存的
ueditor 没有提供直接获取图⽚的功能，可以UE.getContent() 获取全部内容，使⽤正则表达式筛选出图⽚，我提供⼀个使⽤JAVA写的筛选⽅法，前台js代码类似: Pattern p_img = Patternpile("(]+src\s*=\s*'\"['\"][^>]*>)");
Matcher m_img = p_img.matcher(content);
while (m_img.find()) {
String img = up(1); //up(1) 为获得整个img标签 up(2) 为获得src的值
box sizing}
可以打开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 ElementById('body').value;
var c=FCKeditorAPI.GetInstance('body').GetXHTML(true);
if(c){
var fimg=c.match(/<img(.*?) src=["|'](.*?)["|'](.*?)>/);
if(fimg[2]){
ElementById('ImgPr'))ElementById('ImgPr').src=fimg[2];//预览
ElementById('picview'))ElementById('picview').src=fimg[2];//预览
}
}
}
以上就是js获取UEditor富⽂本编辑器中的图⽚地址的详细内容，更多关于UEditor图⽚的资料请关注其它相关⽂章！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。