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

news2024/11/15 17:51:36

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

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,设为auto
            let trReg = /<tr.*?<\/tr>/;   // 匹配tr
            let tdReg = /<td.*?<\/td>/g;   // 匹配所有td

            let 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.coloradmin.cn/o/797150.html

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

相关文章

Java Process类Runtime.getRuntime().exec() 执行bat脚本程序

一、问题 Ruoyi架构&#xff0c;bat文件上传到了服务器的文件夹upload下&#xff0c;如何通过在前端点击“执行”&#xff0c;后端Java去操控对应的bat文件执行呢&#xff1f; Java可以通过Process类的Runtime.getRuntime().exec调用外部的脚本或者是操作系统命令 二、工具介…

ChatGPT可将生产力平均提高14%,有的提高了400% | 可能会被ChatGPT颠覆的领域

​美国国家经济研究局最近的一项研究发现&#xff0c;像ChatGPT这样的生成式人工智能可以将劳动力生产力平均提高14%。更有一些公司声称&#xff0c;借助这种生成式AI&#xff0c;其生产力提高了400%。 这里介绍四个可能会被ChatGPT颠覆的领域&#xff0c;希望可以对你提供经营…

PMP证书在哪个行业有用?

在当前的就业市场中&#xff0c;IT行业依然是最主要的行业之一。然而&#xff0c;由于技术更新速度过快&#xff0c;很多从事技术工作的人深知在国内长期从事技术工作的难度&#xff0c;因此有些人开始考虑转行。此外&#xff0c;IT行业项目种类繁多&#xff0c;这也是PMP证书考…

RuoYi-Vue 部署与配置 [CentOS7]

Java8环境配置[CentOS7] cd /usr/local/src wget https://repo.huaweicloud.com/java/jdk/8u201-b09/jdk-8u201-linux-x64.tar.gztar -xzvf jdk-8u201-linux-x64.tar.gz -C /usr/local#配置环境变量 vim /etc/profile #文末添加 export JAVA_HOME/usr/local/jdk1.8.0_201 expo…

代码重定位技术

1. 什么是重定位 本来每个进程都各自的进程地址空间, 但如果使用了比如注入技术后, 自身的那段代码就会进入到别人的进程地址空间内, 这将导致内部使用的API地址和变量地址发生变化, 因为注入到的位置和自身在自己进程地址空间种的基址很可能会不一样。 2. 如何解决重定位问题…

cspm是什么?考了有用吗?

CSPM是项目管理专业人员能力评价等级证书&#xff0c;相当于 PMP 的本土化&#xff0c;CSPM 相关问题大家都很关心&#xff0c;今天就给大家全面解答一下 CSPM到底是何方神圣&#xff1f; 文章主要是解答下面几个常见问题&#xff0c;其他问题可以留言或者私信咨询我哦~ 一、什…

在Windows 10和11中恢复已删除的照片

可以在Windows 10或11上恢复已删除的照片吗&#xff1f; 随着技术的发展&#xff0c;越来越多的用户习惯在电子设备上存储照片。如果这些照片被删除&#xff0c;可能会给用户带来重大损失。当照片丢失时&#xff0c;您可能会想是否可以恢复已删除的照片&#xff1f; …

ChatGPT的应用与发展趋势:解析人工智能的新风口

目录 优势 应用领域 发展趋势 总结 在人工智能技术迅猛发展的时代&#xff0c;自然语言处理系统的提升一直是研究者们追求的目标。作为人工智能领域的重要突破之一&#xff0c;ChatGPT以其出色的语言模型和交互能力&#xff0c;在智能对话领域取得了重要的进展。 ChatGPT是…

理解Linux内核是个什么东西

我们不妨想一下进程在什么时候才能感知到内核的存在。在malloc分配内存的时候&#xff0c;最终会调用内核的sys_mmap系统调用来申请虚拟内存空间&#xff1b;在fork创建子进程的时候&#xff0c;最终会调用内核的sys_fork来复制父进程&#xff1b;在open打开文件的时候&#xf…

【Java编程案例】面向对象实现模拟物流快递系统

文章目录 一、案例目标二、案例分析1. 交通工具类2. 保养接口3. 专用运输车类4. 定位功能接口5. 快递类 三、测试类四、总结 在现代社会&#xff0c;网购已经成为人们生活的重要组成部分。当用户在购物网站中下订单后&#xff0c;订单中的货物经过一系列的流程&#xff0c;最终…

使用LORA组网利用MQTT协议上报温湿度,到MQTT服务器的项目组成和编程的几点建议

使用LoRa组网利用MQTT协议上报温湿度数据到MQTT服务器的项目组成和编程建议如下&#xff1a; 硬件组成&#xff1a; 温湿度传感器&#xff1a;用于测量环境温度和湿度数据。 LoRa模块&#xff1a;用于无线通信&#xff0c;将温湿度数据通过LoRa协议发送到网关。 LoRa网关&am…

Nacos配置中心的使用

Nacos配置中心的使用 上一节直通车 Nacos注册中心的使用 由于注册中心、配置中心已经被Nacos中间件接管了&#xff0c;所以在代码中只需要给生产者、消费者添加配置即可&#xff0c;不需要像Eureka一样另外起服务了。 Github文档 https://github.com/spring-cloud-incubat…

【java】【面对对象高级3】多态 + final + 抽象类 + 接口

目录 1、多态 1.1 认识多态 1.1.1 对象多态 1.1.2 行为多态 1.1.3 成员变量不谈多态 1.2 使用多态的好处 1.3 多态下的类型转换问题 2、final 2.1 认识final 2.1.1 修饰类 2.1.2 修饰方法 2.1.3 修饰变量 2.2 补充知识&#xff1a;常量详解 3、抽象类abstract 3.1 …

Linux 下的基本指令

pwd pwd 显示当前你所在的路径 ls ls 查看当前路径目录下的所有文件 ls-l ls-l 显示当前目录下的所有文件&#xff0c;包括文件的详细信息&#xff1a;大小&#xff0c;格式&#xff0c;日期等 mkdir mkdir name 创建一个名为name的文件夹&#xff0c; cd cd name 进…

如何在Mac上玩3A?我来教你最简单的方法

如何在mac上玩3A&#xff1f;我来教你最简单的方法 最近苹果在新的发布会上公布了Mac的新系统&#xff1a;macos sonoma&#xff0c;同时也发布了Game Porting Toolkit这一款游戏转译软件&#xff0c;作为果粉当然很激动&#xff0c;当然该款软件还在测试中&#xff0c;一般用…

【OpenGL学习】之着色器GLSL基础

基本类型: 类型说明void空类型,即不返回任何值bool布尔类型 true,falseint带符号的整数 signed integerfloat带符号的浮点数 floating scalarvec2, vec3, vec4n维浮点数向量 n-component floating point vectorbvec2, bvec3, bvec4n维布尔向量 Boolean vectorivec2, ivec3, iv…

物联网的通信协议

物联网的通信协议 目录 物联网的通信协议一、UART串口通信1.1 串口通信1.2 异步收发1.3 波特率1.4 串口通信协议的数据帧1.5 优缺点1.5.1 优点1.5.2 缺点 二、I^2^C2.1 I^2^C2.2 I^2^C2.3 数据有效性2.4 起始条件S和停止条件P2.5 数据格式2.6 协议数据单元PDU2.7 优缺点2.7.1 优…

mybatis_分页

目的&#xff1a; 减少数据处理量&#xff0c;提高效率 普通sql&#xff1a; 语法&#xff1a;select * from user limit startIndex,pageSize; SELECT * from user limit 3; #[0,n] mybatis_sql: 接口&#xff1a; //分页查询List<User> getUserByLimit(Map<…

【雕爷学编程】Arduino动手做(93)--- 0.96寸OLED液晶屏模块16

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

四、约束-3.外键约束

一、概念 外键用来让两张表的数据之间建立连接&#xff0c;从而保证数据的一致性和完整性。 【例】 准备数据 -- 准备数据 create table dept(id int auto_increment comment ID primary key ,name varchar(50) not null comment 部门名称 ) comment 部门表; insert into de…