ueditor编辑器在统计输入的字数时,输入图片时右下角显示的已输入字符数统计小了,经反复测试,发现问题如下:
选择图片后,编辑器会先生成一个<img>图片(使用了其内部图片)先做显示,测试路径如下:
<p><img title="正在上传..." class="loadingclass" id="loading_i3tjakb1" src="./ueditor1_4_3-utf8-jsp/themes/default/images/spacer.gif"/></p>
表单提交后,将返回的url再设置到刚才生成的<img>src中,使其从新显示,测试路径如下:
<p><img title="1418871056363016525.jpg" alt="C:Userslucky godDesktop\u7701委农工委办公自动化系统liuyi.jpg" src="/ueditor1_4_3-utf8-jsp/jsp/upload/image/20141218/1418871056363016525.jpg"/></p>
但问题来了:生成内部<img>时,触发了change事件,并统计已输入字符数,而修改了src值是不会触发change事件从新统计的,所以显示与得到的字符长度其实不同。
解决方法如下:打开/ueditor1_4_3-utf8-jsp/ueditor.all.js(当然引用哪个js就修改哪个),找到方法 initUploadBtn()中的回调方法callback(),修改如下
if(json.state == 'SUCCESS' && json.url) { loader = me.document.getElementById(loadingId); loader.setAttribute('src', link); loader.setAttribute('_src', link); loader.setAttribute('title', json.title || ''); loader.setAttribute('alt', json.original || ''); loader.removeAttribute('id'); domUtils.removeClasses(loader, 'loadingclass'); //2014-12-18 将编辑器的值重新设置一遍,触发change事件 me.setContent(me.getContent()); }
同时,如果拖动图片到编辑器也要进行处理:
找到sendAndInsertFile(file, editor)方法,修改其部分代码:
if (loader) { loader.setAttribute('src', link); loader.setAttribute('_src', link); loader.setAttribute('title', data.title || ''); loader.setAttribute('alt', data.original || ''); loader.removeAttribute('id'); domUtils.removeClasses(loader, 'loadingclass'); //2014-12-18 将编辑器的值重新设置一遍,触发change事件 me.setContent(me.getContent()); }
在这之前需要修改统计方法:(原文地址http://blog.csdn.net/woshishui6501/article/details/9216411)
getContentLength: function (ingoneHtml, tagNames) { var count = this.getContent(false,false,true).length; //注释掉的内容为 去除html标记后的内容数,实际入库是算上html标签和文字的 所以统计字数以getContents为准 /*if (ingoneHtml) { tagNames = (tagNames || []).concat([ 'hr', 'img', 'iframe']); count = this.getContentTxt().replace(/[\t\r\n]+/g, '').length; for (var i = 0, ci; ci = tagNames[i++];) { count += this.document.getElementsByTagName(ci).length; } }*/ return count; }
相关推荐
真正解决百度编辑器UEditor上传图片跨域问题 真正解决百度编辑器UEditor上传图片跨域问题 真正解决百度编辑器UEditor上传图片跨域问题
百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器
Ueditor百度编辑器JSP版本,图片附件上传通过测试好用。
UEditor百度编辑器.Net版本,在项目中经常要用到编辑器的功能,代码经过本人测试可以直接使用,适合新手参考
UEditor是由百度web前端研发部开发所见即所得文本web编辑器,具有轻量,可定制,注重用户体验等特点。功能全面、专业稳定、用户体验佳。UEditor优点体积小巧,性能优良,使用简单。兼容目前所有主流的浏览器Mozilla,...
1、UEditor 百度富文本编辑器完整版 .Net实例 已解决上传图片问题。 2、内附完整demo实例,附带txt讲解说明及UEditor常见问题解决方案。 3、已经调试好的百度文本编辑器实例,用户体验不错,具备很多人性化的功能,...
ueditor完整版百度在线编辑器现成代码,可以直接用
因为项目需要,发现直接从...这里从word,以及excel粘贴复制,都能直接有边框了,同时在编辑器里面新增表格,也能直接显示边框了,不需要右键-->设置显示边框了 我这里是使用在禅道上的,这里就直接给出已经修改的js
UEditor公式编辑器完整版.
ueditor百度编辑器(修改版)-适用struts2,框架struts2+spring+mybatis
一款很完善的百度富文本编辑器,界面美观,尤其上传图片很强大,支持批量上传,对超过1M的图片自动进行等比例压缩,我已把那些平常用不到的功能去掉了,非常实用
Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点。Ueditor基于BSD开源协议,除了具有代码精简、加载迅速的轻量级特质外,还采用了分层理念,使开发者可以根据实际应用和...
百度ueditor上传图片超范围后有两个问题,一是编辑器里图片显示不完整,二是添加图片后的网页在显示时也会超出网页不好看。想让它自适应100%,网上的方案能解决第一个问题,基本没有第二个问题的方案,经过多次测试...
百度富文本编辑器UEditor 1.4.3版本
美化UEditor样式百度web前端编辑器插件,JQUERY(里面是html+JS+CSS文件)。
百度编辑器ueditor
百度Ueditor编辑器的使用,ASP.NET也可上传图片
Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点。Ueditor基于BSD开源协议,除了具有代码精简、加载迅速的轻量级特质外,还采用了分层理念,使开发者可以根据实际应用和...
轻松解决百度编辑器上传图片
Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点。Ueditor基于BSD开源协议,除了具有代码精简、加载迅速的轻量级特质外,还采用了分层理念,使开发者可以根据实际应用和...