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

来源:脚本之家  责任编辑:小易  

在线文档对UEditor说明不够全面,收集了一些常用的方法和基本设置,以供参考。1、创建编辑器UE.getEditor('editor',{initialFrameWidth:"100%"/初始化选项})精简版UE.getEditor('editor')2、删除编辑器UE.getEditor('editor').destroy();3、设置焦点UE.getEditor('editor').focus();4、获取编辑器内容UE.getEditor('editor').getContent()5、编辑器是否有内容UE.getEditor('editor').hasContents()6、获取编辑器内容纯文本格式UE.getEditor('editor').getContentTxt()7、获取带格式的纯文本UE.getEditor('editor').getPlainTxt()8、启用编辑器UE.getEditor('editor').setEnabled();9、禁止编辑UE.getEditor('editor').setDisabled('fullscreen');10、获取整个html内容UE.getEditor('editor').getAllHtml()11、常用设置imageUrl:UEDITOR_HOME_URL+"./yunserver/yunImageUp.php",/图片上传接口imagePath:"http://",scrawlUrl:UEDITOR_HOME_URL+"./yunserver/yunScrawlUp.php",/涂鸦接口scrawlPath:"http://",fileUrl:UEDITOR_HOME_URL+"./yunserver/yunFileUp.php",/文件上传接口filePath:"http://",catcherUrl:UEDITOR_HOME_URL+"php/getRemoteImage.php",/获取远程图片接口catcherPath:UEDITOR_HOME_URL+"php/",imageManagerUrl:UEDITOR_HOME_URL+"./yunserver/yunImgManage.php",/图片管理接口imageManagerPath:"http://",snapscreenHost:'ueditor.baidu.com',snapscreenServerUrl:UEDITOR_HOME_URL+"./yunserver/yunSnapImgUp.php",/截图接口snapscreenPath:"http://",wordImageUrl:UEDITOR_HOME_URL+"./yunserver/yunImageUp.php",/word图片转存接口wordImagePath:"http://",/getMovieUrl:UEDITOR_HOME_URL+"./yunserver/getMovie.php",/获取视频接口lang:/^zh/.test(navigator.language|navigator.browserLanguage|navigator.userLanguage)?'zh-cn' : 'en',langPath:UEDITOR_HOME_URL+"lang/",webAppKey:"9HrmGf2ul4mlyK8ktO2Ziayd",initialFrameWidth:860,/初始化宽度initialFrameHeight:420,/初始化高度focus:true/是否焦点www.zgxue.com防采集请勿采集本网。

写之前在网上找了很多方法,最简单的思路应该是1.获取UEditor中的内容;2.将获取到的字符串转换成jquery对象;3.选择器找到img元素,获取src值。

在编辑器中的php文件夹内,有一个config.json文件,里面就是配置文件,你只需更改imagePathFormat这样的xxxPathFormat后面指定的路径即可。当然,你的程序最好是放在根目录,这样比较好,直接改一下路径即可正常使用。 比如找到如下,自已改为自

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);});

从截图上看,路径应该没问题的,考虑下是不是本地浏览器的问题导致不显示图片?尝试换一台电脑打开试下,或者尝试清理火狐浏览器本地缓存文件,然后重新访问。

打印结果:

使用UEditor创建一个编辑器还是很简单的一件事情,首先就是引入俩个js文件,分别为editor_config.js和editor_all.js。然后就是js创建一个可编辑区域,用来创建编辑器,需要注明id,类型为text/plain,最后实例化编辑器即可 如果将UEditor应

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

1. 前端配置项 前端需要配置 serverUrl 参数,修改 ueditor.config.js 里的 serverUrl 参数,改成服务器端路径,参考:URL + 'php/controller.php' 2. 后端配置项 后端配置项在 php/config.json 里配置,不同的上传有各自的配置项。 修改上传图

1.获取UEditor中的内容

图片上传后点“html”工具按钮就会显示出图片的路径。它的格式是: "/ueditor/php/upload1/20140703/1404366701400195.png" 如果你想用程序提取的话 1、使用editor.getContent()方法可以获得编辑器的内容 2、使用jquery提取内容中图片路径。

这一步很简单,使用编辑器提供的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()的打印结果如下:

可以看出来转换出的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 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 \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 c=document.getElementById('body').value; var c=FCKeditorAPI.GetInstance('body').GetXHTML(true); if(c){ var fimg=c.match(/<img(.*?) src=["|'](.*?)["|'](.*?)>/); 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];//预览 } }}

以上就是js获取UEditor富文本编辑器中的图片地址的详细内容,更多关于UEditor图片的资料请关注真格学网其它相关文章!

UE.getPlainTxt()可获取到编辑器中的纯文本内容,有段落格式UE.getContentTxt()可获取到编辑器中的纯文本内容,没有段落格式;ueditor 没有提供直接获取图片的功能,可以UE.getContent()获取全部内容,使用正则表达式 筛选出图片,我提供一个使用JAVA写的筛选方法,前台js代码类似:Pattern p_img=Pattern.compile("([^>]+src\\\\s*=\\\\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 查看,里面有所有支持的方法 注释也都很明白内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
  • 指定位置如果有图片显示图片,无图片显示广告的js
  • javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版
  • js获取富文本中的第一张图片(正则表达式)
  • js+html实现自定义上传图片按钮并显示图片功能的方法分析
  • 原生js实现点击轮播切换图片
  • 使用preloadjs加载图片资源的基础方法详解
  • javascript如何实现双指控制图片功能
  • asp.net ckeditor和ckfinder的应用
  • fckeditor在ie9中无法弹出对话框的解决方法(弹出层兼容问题)
  • xheditor编辑器使用文档
  • dedecms ckeditor编辑器添加链接默认新窗口打开的修改方法
  • fckeditor smarty 编辑器的应用php
  • kindsoft在线网页编辑器简单的配置参数介绍
  • ueditor 默认字体和字号的修改方法
  • ewebeditor 不能粘贴或复制的解决方法
  • 在kindeditor中获取当前光标的位置索引的实现代码
  • fckeditor编辑器在php中的配置方法
  • 前端用jQuery怎么获取到富文本ueditor web编辑器里...
  • 前端用jQuery怎么获取到富文本ueditor web编辑器里...
  • 百度UEditor编辑器上传图片怎么获取图片路径、类型...
  • 如何用js把百度编辑器的图片路径提取出来
  • 对于修改百度的编辑器ueditor里面图片的存储位置,...
  • 富文本编辑器Ueditor上传的图片在Firefox 和 IE中...
  • 百度编辑器ueditor怎么获取内容
  • ueditor富文本编辑器上传图片怎么配置?
  • 在ueditor编辑器里如何用php获得上传图片的url,数...
  • 百度编辑器Ueditor上传图片路径转义了的问题!
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页网页编辑器指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)指定位置如果有图片显示图片,无图片显示广告的jsjs获取富文本中的第一张图片(正则表达式)js+html实现自定义上传图片按钮并显示图片功能的方法分析原生js实现点击轮播切换图片使用preloadjs加载图片资源的基础方法详解javascript如何实现双指控制图片功能asp.net ckeditor和ckfinder的应用fckeditor在ie9中无法弹出对话框的解决方法(弹出层兼容问题)xheditor编辑器使用文档fckeditor smarty 编辑器的应用phpkindsoft在线网页编辑器简单的配置参数介绍ueditor 默认字体和字号的修改方法ewebeditor 不能粘贴或复制的解决方法在kindeditor中获取当前光标的位置索引的实现代码fckeditor编辑器在php中的配置方法19款javascript富文本网页编辑器免费开源百度编辑器(ueditor)使用ewebeditor 辑器按钮失效 ie8下eckeditor/fckeditor 使用 ckedit彻底解决ewebeditor网站后台不能解决fckeditor在ie10、ie11下的不javascript 在线文本编辑器实现代asp.net+fckeditor上传图片显示叉修改fckeditor的文件上传功能步骤页面嵌入windows media player播ewebeditor 上传文件提示格式不正确的解决fckeditor添加自定义按钮的方法fckeditor提供了一个完整的javascript apjavascript 获取fckeditor内容整合ckeditor+ckfinder,解决上传文件路径ueditor1.2.1修改超链接默认值,ueditor编fckeditor 常用函数百度编辑器从json对象中取值,完成初次渲fckeditor在php中的用法(添加于修改写成编辑器中designmode和contenteditable的属
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved