wangeditor 表格问题总结及适配方案

一、导出编辑器内容,表格无边框样式 

1、通过 let article = this.editor.getHtml();  // editor.getHtml() 获取 HTML 内容;

2、处理文本字符串:(手动为 table 加上 css样式);

article = article.replace(/<table style="/g,'<table style="border-collapse:collapse;');  // 去除单元格边框间距article = article.replace(/<table /g,'<table border="1" ');  // 添加边框

3、再将最终处理好的 article 上传到服务器;

二、禁止新增、删除行/列

1、导入的表格默认有 插入、删除列/行等功能,如果不想使用的话,我们通过css样式将它隐藏

 在不想展示的元素上方右键 — 检查 — 找到该元素的唯一属性:如 “插入” 为 data-menu-key="insertTableRow" ,为该 button 设置 display:none;属性,即可隐藏;

// 隐藏图片"编辑"、表格“新增、删除行列”按钮button[data-menu-key="editImage"], button[data-menu-key="tableFullWidth"],button[data-menu-key="insertTableRow"],button[data-menu-key="deleteTableRow"],button[data-menu-key="insertTableCol"],button[data-menu-key="deleteTableCol"],button[data-menu-key="tableHeader"]{display: none;}

 三、输入内容较长撑开列表,导致超屏问题

1、设计编辑器的样式:得设置 max-width 才有效(具体原因不清楚,欢迎大佬指导),内容超出换行 word-break:break-word;

td{max-width: 50px !important;word-break: break-word;
}

2、导出的编辑器内容处理:

        根据表格列数,设置每个 td 的最大宽度为(100 / 列数)%,即平均分配;

let article = this.editor.getHtml();
article = this.tableBorderDel(article);// 处理表格内容超屏tableBorderDel(str){      let tableReg = /<table.*?<\/table>/g;  // 匹配<table></table>对let styleReg = /width=".*?"/g;   // 匹配所有的width,设为autolet trReg = /<tr.*?<\/tr>/;   // 匹配trlet tdReg = /<td.*?<\/td>/g;   // 匹配所有tdlet tableList = str.match(tableReg);if ( tableList != null ) {tableList.map(tableItem =>{let newTable = tableItem.replace(styleReg, 'width="auto"');str = str.replace(tableItem, newTable);})// 计算出最大宽度(根据列数,平均分配)let firstTr = tableList[0].match(trReg)[0];let tdNum = firstTr.match(tdReg).length;str = str.replace(/<td /g,`<td style="max-width:${100 / tdNum}% !important;word-break:break-word; "`);  // td 最大宽度、超出换行}return str;},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/12461.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

虎年现货黄金投资布局图

参与现货黄金交易的主要目的&#xff0c;是为了根据行情走势的变动&#xff0c;把握一些较佳的获利机会&#xff0c;在这样的一个过程中&#xff0c;如果投资者能够提前把布局的图表画好&#xff0c;那么就可能获得事半功倍的效果&#xff0c;而本文将为大家简单的介绍&#xf…

【主成分分析(PCA)- 鸢尾花】

主成分分析&#xff08;PCA&#xff09; 摘要 在现代数据科学中&#xff0c;维度灾难常常是数据处理与分析的一大难题。主成分分析&#xff08;PCA&#xff09;是一种广泛使用的数据降维技术&#xff0c;它通过将原始数据转换为新的低维空间&#xff0c;保留最重要的信息&…

15.Netty源码之EventLoop

highlight: arduino-light Netty配置主从Reactor模式 通过将NioServerSocketChannel绑定到了bossGroup。 将NioServerSocketChannel接收到请求创建的SocketChannel放入workerGroup。 将2个不同的SocketChannel绑定到2个不同的Group完成了主从 Reactor 模式。 分配NIOEventLoop的…

论文精读之BERT

目录 1.摘要&#xff08;Abstract&#xff09; 2.引言&#xff08;Introduction&#xff09;&#xff1a; 3.结论&#xff08;Conlusion&#xff09;&#xff1a; 4.BERT模型算法: 5.总结 1.摘要&#xff08;Abstract&#xff09; 与别的文章的区别是什么:BERT是用来设计去…

springboot创建并配置环境(三) - 配置扩展属性(上集)

文章目录 一、介绍二、配置文件application.yml 一、介绍 在上一篇文章&#xff1a;springboot创建并配置环境(二) - 配置基础环境中&#xff0c;我们介绍了springboot如何配置基础环境变量。本篇文章讨论如何处理配置文件。即来自不同位置的配置属性&#xff0c;如&#xff1…

【Chat GPT】用 ChatGPT 运行 Python

前言 ChatGPT 是一个基于 GPT-2 模型的人工智能聊天机器人&#xff0c;它可以进行智能对话&#xff0c;同时还支持 Python 编程语言的运行&#xff0c;可以通过 API 接口进行调用。本文将介绍如何使用 ChatGPT 运行 Python 代码&#xff0c;并提供一个实际代码案例。 ChatGPT …

简单理解大模型参数高效微调中的LoRA(Low-Rank Adaptation)

[论文地址] [代码] [ICLR 22] 阅前须知&#xff1a;本博文可能有描述不准确/过度简化/出错的地方&#xff0c;仅供参考。 网络结构 其中&#xff0c;原有模型的参数是直接冻结的&#xff0c;可训练参数只有额外引入的LoRA参数(由nn.Parameter实现)。 模型微调的本质 记网络原…

LabVIEW实现三相异步电机磁通模型

LabVIEW实现三相异步电机磁通模型 三相异步电动机由于经济和出色的机电坚固性而广泛用于工业化应用。这台机器的设计和驱动非常简单&#xff0c;但在控制扭矩和速度方面&#xff0c;它隐藏了相当大的功能复杂性。通过数学建模&#xff0c;可以理解机器动力学。 基于微分方程的…

【嵌入式学习笔记】嵌入式基础9——STM32启动过程

1.MAP文件浅析 1.1.MDK编译后生成的中间过程文件 1.2.Map文件构成&#xff1a; 程序段交叉引用关系&#xff08;Section Cross References&#xff09;&#xff1a;描述各文件之间函数调用关系删除映像未使用的程序段&#xff08;Removing Unused input sections from the im…

【图像处理】使用 OpenCV 将您的照片变成卡通

图像到卡通 一、说明 在当今世界&#xff0c;我们被图像和视频所包围。从社交媒体到广告&#xff0c;图像已成为一种强大的交流媒介。但是你有没有想过&#xff0c;如果你能把你的照片变成卡通会发生什么&#xff1f;想象一下&#xff0c;为您最喜欢的照片创建动画版本&#xf…

Pytorch深度学习-----神经网络的基本骨架-nn.Module的使用

系列文章目录 PyTorch深度学习——Anaconda和PyTorch安装 Pytorch深度学习-----数据模块Dataset类 Pytorch深度学习------TensorBoard的使用 Pytorch深度学习------Torchvision中Transforms的使用&#xff08;ToTensor&#xff0c;Normalize&#xff0c;Resize &#xff0c;Co…

python爬虫基础入门——利用requests和BeautifulSoup

(本文是自己学习爬虫的一点笔记和感悟) 经过python的初步学习,对字符串、列表、字典、元祖、条件语句、循环语句……等概念应该已经有了整体印象,终于可以着手做一些小练习来巩固知识点,写爬虫练习再适合不过。 1. 网页基础 爬虫的本质就是从网页中获取所需的信息,对网…

类加载机制与类加载器

点击下方关注我&#xff0c;然后右上角点击...“设为星标”&#xff0c;就能第一时间收到更新推送啦~~~ Java 源码是如何形成类文件的&#xff0c;类文件又是如何加载到虚拟机的&#xff0c;类加载有哪些机制和原则呢&#xff1f;本文将为大家一一介绍。 1 Java 源码形成类文件…

基于拉格朗日-遗传算法的最优分布式能源DG选址与定容(Matlab代码实现)

目录 1 概述 2 数学模型 2.1 问题表述 2.2 DG的最佳位置和容量&#xff08;解析法&#xff09; 2.3 使用 GA 进行最佳功率因数确定和 DG 分配 3 仿真结果与讨论 3.1 33 节点测试配电系统的仿真 3.2 69 节点测试配电系统仿真 4 结论 1 概述 为了使系统网损达到最低值&a…

AI Chat 设计模式:10. 组合模式

本文是该系列的第八篇&#xff0c;采用问答式的方式展开&#xff0c;问题由我提出&#xff0c;答案由 Chat AI 作出&#xff0c;灰色背景的文字则主要是我的一些思考和补充。 问题列表 Q.1 给我介绍一下组合模式A.1Q.2 好的&#xff0c;给我举一个组合模式的例子&#xff0c;使…

idea导入maven项目问题

问题产生原因&#xff1a; ①idea加载maven项目&#xff0c;如果网络不通畅&#xff0c;会在maven仓库中产生一个文件&#xff0c;如下图所示: ②当网络通畅时&#xff0c;在下载就会因为此文件导致无法下载正确的maven依赖 解决方案&#xff1a; ①打开maven仓库的根目录 ②…

ts中声明引入未使用的报错——解决方案

在编写ts项目的时候&#xff0c;经常会出现如下报错&#xff1a; 导入声明中的所有导入都未使用 这是因为导入的模块暂时没有使用&#xff0c;ts给的一个提示信息 解决方案&#xff1a; 在ts.config.json中 把noUnusedLocals 设置为false即可 {"compilerOptions"…

【雕爷学编程】Arduino动手做(175)---机智云ESP8266开发板模块4

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…

【UE5 多人联机教程】03-创建游戏

效果 步骤 打开“UMG_MainMenu”&#xff0c;增加创建房间按钮的点击事件 添加如下节点 其中&#xff0c;“FUNL Fast Create Widget”是插件自带的函数节点&#xff0c;内容如下&#xff1a; “创建会话”节点指游戏成功创建一个会话后&#xff0c;游戏的其他实例即可发现&am…

微服务体系<1>

我们的微服务架构 我们的微服务架构和单体架构的区别 什么是微服务架构 微服务就是吧我们传统的单体服务分成 订单模块 库存模块 账户模块单体模块 是本地调用 从订单模块 调用到库存模块 再到账户模块 这三个模块都是调用的同一个数据库 这就是我们的单体架构微服务 就是…