|
短视频，自媒体，达人种草一站处事
这篇文章首要先容了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];//预览
}
}
} （编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
