`
lucky_god
  • 浏览: 37570 次
社区版块
存档分类
最新评论

ueditor百度编辑器图片统计异常解决

    博客分类:
  • html
 
阅读更多

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编辑器.zip

    百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器

    解决Vue使用UEditor百度编辑器,上传图片服务配置问题(源码)

    在Vue项目中集成百度UEditor编辑器,是一个常见的需求,特别是在需要富文本编辑功能的场景下。UEditor是一款强大的在线编辑器,支持图片、视频、公式等多种内容的插入。然而,将其与Vue框架结合时,可能会遇到一些...

    Ueditor百度编辑器使用

    **Ueditor百度编辑器使用详解** Ueditor是百度推出的一款开源的富文本在线编辑器,广泛应用于网站内容编辑、论坛发帖、博客写作等场景。它提供了丰富的编辑功能,包括文字格式化、图片上传、视频插入、表格操作、...

    ECshop编辑器更换成百度编辑器UEditor,远程图片可本地化,附教程测试可用

    UEditor是由百度web前端研发部开发所见即所得文本web编辑器,具有轻量,可定制,注重用户体验等特点。功能全面、专业稳定、用户体验佳。UEditor优点体积小巧,性能优良,使用简单。兼容目前所有主流的浏览器Mozilla,...

    真正解决百度编辑器UEditor上传图片跨域问题.docx

    在现代Web开发中,前后端分离是一种常见的架构模式,其中富文本编辑器如UEditor(由百度开发)扮演着重要的角色。UEditor允许用户在编辑器中插入图片、视频等多媒体内容,但当涉及到图片上传时,可能会遇到跨域问题...

    Ueditor百度编辑器JSP版

    **Ueditor百度编辑器JSP版详解** Ueditor是由百度公司开发的一款强大的...总的来说,Ueditor JSP版为Java Web开发者提供了一种高效、便捷的富文本编辑解决方案,通过合理的配置和集成,可以极大地提升用户的编辑体验。

    ueditor百度编辑器案例(源代码)

    总的来说,ueditor百度编辑器案例(源代码)是一个强大且易用的富文本编辑工具,它不仅提供了丰富的文本编辑功能,还具备优秀的图片处理能力和高度的定制性。无论是用于个人项目还是企业级应用,ueditor都能提供一个...

    UEditor 百度富文本编辑器 .Net实例 已解决上传图片问题

    1、UEditor 百度富文本编辑器完整版 .Net实例 已解决上传图片问题。 2、内附完整demo实例,附带txt讲解说明及UEditor常见问题解决方案。 3、已经调试好的百度文本编辑器实例,用户体验不错,具备很多人性化的功能,...

    ECshop编辑器更换成百度编辑器UEditor,远程图片可本地化

    UEditor是由百度web前端研发部开发所见即所得文本web编辑器,具有轻量,可定制,注重用户体验等特点。功能全面、专业稳定、用户体验佳。UEditor优点体积小巧,性能优良,使用简单。兼容目前所有主流的浏览器Mozilla,...

    UEditor公式编辑器完整版

    UEditor是一款广泛应用于网页端的富文本编辑器,由百度公司开发,旨在提供高效、便捷的文字编辑体验。它以其强大的功能、丰富的插件以及高度的可定制性深受开发者喜爱。在给定的“UEditor公式编辑器完整版”中,我们...

    ueditor百度编辑器

    **ueditor百度编辑器**是一款广泛应用于网页内容编辑的开源富文本编辑器,它由百度公司开发并维护,提供了一套完整的在线编辑解决方案。ueditor以其功能强大、易用性好、可定制性强等特点,被广大开发者和网站管理员...

    .net百度编辑器(UEditor)上传图片跟上次附件不成功的解决办法

    .NET百度编辑器(UEditor)上传图片跟上次附件不成功的解决办法 .NET百度编辑器(UEditor)是一个功能强大且广泛使用的富文本编辑器,但是在上传图片和附件时,可能会遇到一些问题。以下是解决.NET百度编辑器...

    百度ueditor编辑器

    **百度UEditor编辑器详解** 百度UEditor是一款由百度公司开发的专业级富文本编辑器,它以其强大功能和易用性在Web应用中广受欢迎。UEditor专为满足现代网络编辑需求而设计,提供丰富的文本格式化选项,支持多媒体...

    UEditor 百度编辑器网站工程使用例子(修正版)

    **UEditor 百度编辑器网站工程使用详解** UEditor 是百度公司推出的一款富文本在线编辑器,广泛应用于网站内容编辑、论坛发帖等场景。它提供了丰富的编辑功能,包括文字格式化、图片上传、视频插入等,为用户提供了...

    UEditor公式编辑器 UEditor、mathquill集成公式编辑器

    1. **UEditor**:UEditor是由百度开发的一款开源的富文本Web编辑器,它提供了丰富的API和插件支持,可满足各种复杂的编辑需求。UEditor的设计目标是轻量级、高性能和易用性,使得开发者能够轻松地将其集成到自己的...

    百度编辑器ueditor上传图片视频以及div去掉P标签

    【标题】:“百度编辑器ueditor上传图片视频以及div去掉P标签”涉及到的是在使用ueditor编辑器时,如何处理HTML元素与标签的问题,特别是针对`&lt;p&gt;`(段落)标签与`&lt;div&gt;`(分组内容)标签的转换,以及在上传图片和...

    yii2.0-Ueditor百度编辑器

    Ueditor是百度推出的一款开源的Web在线富文本编辑器,功能强大,支持多种浏览器,提供了图片上传、视频插入、公式编辑等多种功能,极大地提升了用户在网页上的文字编辑体验。在Yii2.0框架中集成Ueditor,可以为网站...

    ueditor 百度编辑器 解决表格没有边框

    因为项目需要,发现直接从...这里从word,以及excel粘贴复制,都能直接有边框了,同时在编辑器里面新增表格,也能直接显示边框了,不需要右键--&gt;设置显示边框了 我这里是使用在禅道上的,这里就直接给出已经修改的js

    ueditor百度编辑器(修改版)-适用struts2

    **标题详解:**"ueditor百度编辑器(修改版)-适用struts2" 这个标题提到了两个关键组件,首先是“ueditor百度编辑器”,它是一个流行的富文本编辑器,由百度开发,常用于网页中提供类似Word的文本编辑功能。用户...

Global site tag (gtag.js) - Google Analytics