使用ueditor富文本编辑器导出文本内容时,自定义各个标签的属性,以img标签添加最大宽度为例(vue框架)….[通俗易懂]

使用ueditor富文本编辑器导出文本内容时,自定义各个标签的属性,以img标签添加最大宽度为例(vue框架)….[通俗易懂]使用ueditor富文本编辑器导出文本内容时,自定义各个标签的属性,以img标签添加最大宽度为例(vue框架)….

大家好,又见面了,我是你们的朋友全栈君。

现在在做的项目是一个对功能要求比较高的项目,同时也有SDK端的开发.项目中有一个场景就是在pc端通过富文本编辑的内容要在SDK端显示,测试的时候发现有一些图片超出了手机的最大宽度,会出现一个横向的滚动条,这样很影响体验.做显示这块的是公司做android和ios的同事,他们拿到的值富文本直接导出的json格式的html代码,因此他们很难再对代码进行二次处理,解决问题的源头又回到了我这里~~
言归正传,想要解决问题就要从标签的style属性着手;本人在追踪数据流的时候发现了在导出编辑器内容的时候会把编辑器内容全部遍历一次的地方,遍历的数组大概就长这样(这其实是遍历之后的,理解我的意思就行)
clipboard.png

那么重点来了,以img标签为例,进一步处理的数据长这个样
clipboard.png

在遍历的时候会将attrs进行遍历,遍历时候大概就给拆成这样

clipboard.png

这个时候就需要在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%;'
}

粘完应该是这样的:
clipboard.png
说明:首先判断是否是img标签,然后判断是否有style属性,最后判断若是有style属性,style是否有max-width:100%;字段,若有,则跳过,避免每次导出的时候重复赋值.

最后提醒一句,引入的时候要引入ueditor.all.js,别引ueditor.all.min.js了,这改的不是min.js~~~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/107293.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • SORT 多目标跟踪算法笔记[通俗易懂]

    SORT 多目标跟踪算法笔记[通俗易懂]sort是一种简单的在线实时多目标跟踪算法。文章要点为:以IoU作为前后帧间目标关系度量指标;利用卡尔曼滤波器预测当前位置;通过匈牙利算法关联检测框到目标;应用试探期甄别虚检;使用FasterR-CNN,证明检测好跟踪可以很简单。技术方案所提方法以检测作为关键组件,传播目标状态到未来帧中,将当前检测与现有目标相关联,并管理跟踪目标的生命周期。Detection为从…

    2022年10月23日
    0
  • java版我的世界免费获取,持续更新~

    java版我的世界免费获取,持续更新~我的世界:Java版将与基岩版”地形”生成统一!1.18的隐藏更新!保持了JAVA版一致?事实上若你足够了解JAVA版的种子,你会发现其实很多不同的种子代码,会得到的是一个完全一致的世界。04问题四:未来未来JAVA版我的世界,和基岩版的Minecraft,它们真的可能变得完全一致!05问题五:Mojang为什么要让地形统一?一直以来,基岩版最大的魅力就。我的世界:java版免费披风,账号迁移轮到我了,快来看看怎么操作导致启动器显示我没有购买Minecraft,只有试玩资格。只有你选择微软账

    2022年7月8日
    47
  • http请求哪几部分_get url长度限制

    http请求哪几部分_get url长度限制HTTP的Get请求URL最大长度各浏览器HTTPGet请求URL最大长度并不相同,几类常用浏览器最大长度及超过最大长度后提交情况如下:IE6.0:url最大长度2083个字符,超过最大长度后无法提交。IE7.0:url最大长度2083个字符,超过最大长度后仍然能提交,但是只能传过去2083个字符。firefox3.0.3…

    2022年8月24日
    6
  • INS-20802 Oracle Cluster Verification Utility failed解释说明[通俗易懂]

    INS-20802 Oracle Cluster Verification Utility failed解释说明

    2022年4月2日
    173
  • iOS 二级菜单(UITableView实现)「建议收藏」

    iOS 二级菜单(UITableView实现)「建议收藏」iOS二级菜单(UITableView实现)注释全帮助新手学习

    2022年6月8日
    36
  • 数组元素的下标超出所定义的_数组元素的下标超出所定义的

    数组元素的下标超出所定义的_数组元素的下标超出所定义的问题错误信息:数组成员引用下标超出定义范围原因使用数组成员的时候,下标超出了数组最大个数。解决方法仅用于自己编写程序,所以如果是别人做好的程序,运行出现错误,你又没代码的话那就没用了。解决思路就是正确使用数组下标,不要超过数组最大成员数。下面是两种笨方法:方法一在使用数组成员的时候,检查数组的最大成员数。例如:如果真(取数组成员数(数组名)>0)确定数组有成员,之后再引用。方法二菜单的工具-系统配置-编译,勾选“是否启用快速数组访问方式”。(调试时仍然会

    2022年10月19日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号