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

2019年9月15日 135次阅读 来源: 喝奶的羊

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

那么重点来了,以img标签为例,进一步处理的数据长这个样
《使用ueditor富文本编辑器导出文本内容时,自定义各个标签的属性,以img标签添加最大宽度为例(vue框架).》

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

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

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

粘完应该是这样的:
《使用ueditor富文本编辑器导出文本内容时,自定义各个标签的属性,以img标签添加最大宽度为例(vue框架).》
说明:首先判断是否是img标签,然后判断是否有style属性,最后判断若是有style属性,style是否有max-width:100%;字段,若有,则跳过,避免每次导出的时候重复赋值.

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

    原文作者：喝奶的羊
    原文地址: https://segmentfault.com/a/1190000016524285
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞