摘要：现在在做的项目是一个对功能要求比较高的项目同时也有端的开发项目中有一个场景就是在端通过富文本编辑的内容要在端显示测试的时候发现有一些图片超出了手机的最大宽度会出现一个横向的滚动条这样很影响体验做显示这块的是公司做和的同事他们拿到的值富文本直
现在在做的项目是一个对功能要求比较高的项目,同时也有SDK端的开发.项目中有一个场景就是在pc端通过富文本编辑的内容要在SDK端显示,测试的时候发现有一些图片超出了手机的最大宽度,会出现一个横向的滚动条,这样很影响体验.做显示这块的是公司做android和ios的同事,他们拿到的值富文本直接导出的json格式的html代码,因此他们很难再对代码进行二次处理,解决问题的源头又回到了我这里~~
言归正传,想要解决问题就要从标签的style属性着手;本人在追踪数据流的时候发现了在导出编辑器内容的时候会把编辑器内容全部遍历一次的地方,遍历的数组大概就长这样(这其实是遍历之后的,理解我的意思就行)
那么重点来了,以img标签为例,进一步处理的数据长这个样
在遍历的时候会将attrs进行遍历,遍历时候大概就给拆成这样
这个时候就需要在style中插入就行了,这个地方在ueditor.all.js文件的8726行,或者搜索isElement,在
var attrs = node.attrs;下面加上一段代码
if(node.tagName==="img"){
attrs.style?attrs.style.includes("max-width:100%;")?"":attrs.style+="max-width:100%;":attrs.style="max-width:100%;"
}
粘完应该是这样的:
说明:首先判断是否是img标签,然后判断是否有style属性,最后判断若是有style属性,style是否有max-width:100%;字段,若有,则跳过,避免每次导出的时候重复赋值.
最后提醒一句,引入的时候要引入ueditor.all.js,别引ueditor.all.min.js了,这改的不是min.js~~~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/97983.html
摘要：前言本文将介绍笔者在的项目中使用百度的富文本编辑器的过程。以百度官网的为例，控制台输入为该编辑器注册点击事件，当点击加粗按钮时，控制台输出为了避免点击工具条时触发事件，笔者将自定义的事件全部注释了。 前言 本文将介绍笔者在React的项目中使用百度的富文本编辑器Ueditor的过程。注意本文不提供一条龙式的使用方法，只是将使用过程中的一些实现思路进行总结，供以参考。react项目中导入...
摘要：前言本文将介绍笔者在的项目中使用百度的富文本编辑器的过程。以百度官网的为例，控制台输入为该编辑器注册点击事件，当点击加粗按钮时，控制台输出为了避免点击工具条时触发事件，笔者将自定义的事件全部注释了。 前言 本文将介绍笔者在React的项目中使用百度的富文本编辑器Ueditor的过程。注意本文不提供一条龙式的使用方法，只是将使用过程中的一些实现思路进行总结，供以参考。react项目中导入...
摘要：移动端文档富文本编辑器，支持图文混排引用大标题无序列表，字体颜色加粗斜体。可用于独立项目开发，也可以用于与原生混合开发。，图片文件最大尺寸限制，单位，默认，编辑器左右内边距，默认像素，是否显示底部工具栏图片标签连接添加等图标。 ZxEditor 移动端HTML文档（富文本）编辑器，支持图文混排、引用、大标题、无序列表，字体颜色、加粗、斜体。 可用于独立web项目开发，也可以用于与原生A...
阅读 982·2021-10-27 14:15
阅读 2746·2021-10-25 09:45
阅读 1896·2021-09-02 09:45
阅读 3344·2019-08-30 15:55
阅读 1761·2019-08-29 16:05
阅读 3170·2019-08-28 18:13
阅读 3096·2019-08-26 13:58
阅读 426·2019-08-26 12:01
