使用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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 国内的微软更新服务器地址,windows update 服务器

    国内的微软更新服务器地址,windows update 服务器SystemCenter2012R2CM系列之部署WindowsServer…1.Windows更新服务器(WindowsServerUpdateService(WSUS))介绍1)技术概述:WindowsServerUpdateServices(WSUS)启用信息技术管理员部署最新的Microsoft产品更新。在WindowsServer2012中,W…

    2022年5月18日
  • DeepLab系列学习

    DeepLab系列文章目录DeepLab系列DeepLabV1简介atrousalgorithm利用全卷积增加感受野并加速运算条件随机场CRF实验结果多尺度预测VOC数据集上对比DeepLabV2主要改进简介模型主体ASPP实验结果DeepLabV3相应的改进实验DeepLabV3+(DeepLabV3plus)相应改进整体结构解码器结构modifiedXception实验参考DeepLabV1DeepLabV1github简介DeepLab系列在2015年的ICLR上被提出,主要是使用D

    2022年4月15日
  • sqlyog连接mysql错误码2058_喜欢的错误方法

    sqlyog连接mysql错误码2058_喜欢的错误方法新建连接报错,错误号码2058windows系统打开cmd命令行窗口,输入mysql-uroot-p输入密码,登录mysql,再输入下面这行代码,’password’替换成你的密码。ALTERUSER’root’@’localhost’IDENTIFIEDWITHmysql_native_passwordBY’password’;执行完成后重新配置连接,完成。如果运行mysql-uroot-p命令报’mysql’不是内部或外部命令,也不是可运行的程序或批处理…

    2022年10月2日
  • 什么叫单页面开发_获取当前页面url

    什么叫单页面开发_获取当前页面url参考网址https://www.cnblogs.com/belongs-to-qinghua/p/11151054.htmlhttp://www.zhiliaotang.net/jishujiaoliu/web/965.html单页面开发:单页面开发常用于webapp开发和后台管理系统等单页面应用原理:我们通常所说的单页面应用程序通常是通过前端框架vue,react,angular…

    2022年10月13日
  • windows10下关闭端口占用[通俗易懂]

    windows10下关闭端口占用[通俗易懂]windows10下关闭端口占用windows10下关闭端口占用占用查询端口的pid查询关闭对应pid很少用windows,但是本地开发一直都是windows系统,如果端口发生意外,没有被关闭,如下可解决。占用查询端口的pid查询C:\Users\helloworld>netstat-ano|findstr"9097"TCP0.0.0….

    2022年7月20日
  • 大学生一个暑假学会5个神仙赚钱技能 | 你学会了几个?记得收藏哟

    大学生一个暑假学会5个神仙赚钱技能 | 你学会了几个?记得收藏哟非常建议我的大学生粉丝以及朋友在这个炎热的夏天暑假拿出一部分来学会或提升这5个神仙技能、尤其是当你对你的大学专业不满意的时候,但不仅能帮你的大学不知识更加优秀,还可以让你的毕业后都有赚钱的第二副业技能、记得必须选一个学会哟、目前我自己除了视频剪辑不会之外、其他的多多少少、术业有专攻、只是熟练程度不一样目录一、学习编程:java入门书籍推荐:进阶书籍推荐:推荐学习平台:二、学习PS:怎样学习PS?三、学习摄影:怎样学习摄影?四、学习剪辑:怎样学习剪辑?..

    2022年7月24日

发表回复

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

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