当前位置: 首页 > news >正文

wangeditor v4修改缩进并清除粘贴文档带入的格式

v3没有缩进功能,v4升级改动较小,且有缩进功能,但缩进用padding-left样式,而不是text-indent,字体颜色字号等用的font标签,也是不太方便,所以对这两处进行修改


一、缩进样式修改
node_modules\wangeditor\dist\wangEditor.js

Indent 方法:把paddingLeft 改成 textIndent ,padding-left 改成 text-indent
重新启动

二、粘贴文档样式清除

	initEditor(){
this.editorText.config.pasteTextHandle = (html)=> {// 1. 去除 MS Office 冗余标签const cleanedHtml = html  .replace(/<!--\[if gte mso \d+\]>(.*?)<!\[endif\]-->/gi, '') .replace(/<!--\[if[^\]]*?\]>[\s\S]*?<\!\[endif\]-->/gi, '').replace(/<\/?[ovw]:[^>]*>/gi, '').replace(/\s?class="?Mso[a-zA-Z0-9]+"?/gi, '')// 移除 MS Office 命名空间标签// .replace(/<(\/?)(v:|o:|w:)[^>]*>/g, '')// 移除内联样式属性.replace(/\s?(class|style|align)="[^"]*"/gi, '')// 简化段落标签.replace(/<p[^>]*>/gi, '<p>').replace('<p></p>', '')// 转换字体标签.replace(/<font[^>]*>/gi, '').replace(/<\/font>/gi, '')// 转换标题样式.replace(/<h(\d)[^>]*>/gi, '<h$1>')return cleanedHtml}this.editorText.config.onchange = (html) => {let text = this.convertFontToSpanRegex(html);console.log(text, 'html')this.graphicsData.messageText = text}
},convertFontToSpanRegex(html) {return html.replace(/<font([^>]*)>/g, (match, attrs) => {// 提取属性const colorMatch = attrs.match(/color=["']([^"']*)["']/);const faceMatch = attrs.match(/face=["']([^"']*)["']/);const sizeMatch = attrs.match(/size=["']([^"']*)["']/);// 构建style字符串let style = '';if (colorMatch) style += `color: ${colorMatch[1]};`;if (faceMatch) style += `font-family: ${faceMatch[1]};`;// if (sizeMatch) style += `font-size: ${sizeMatch[1]};`;if (sizeMatch){console.log(attrs,'attrs');if(attrs.match('size="1"')){style += `font-size:10px;`;}else if(attrs.match('size="2"')){style += `font-size:13px;`;}else if(attrs.match('size="3"')){style += `font-size:16px;`; }else if(attrs.match('size="4"')){style += `font-size:18px;`;}else if(attrs.match('size="5"')){style += `font-size:24px;`;}else if(attrs.match('size="6"')){  style += `font-size:32px;`;}else if(attrs.match('size="7"')){style += `font-size:48px;`;}}return `<span style="${style}">`;}).replace(/<\/font>/g, '</span>');
},

http://www.dtcms.com/a/329191.html

相关文章:

  • MySQL极简安装挑战:从依赖管理到高效部署
  • MySQL数据线上扩容方案
  • npm安装时一直卡住的解决方法
  • Grayscale® 推出 Walrus 和 DeepBook 信托产品
  • 图像分类-动手学计算机视觉10
  • 解决:[64000][257] ORA-00257: 归档程序错误。只有在解析完成后才以 AS SYSDBA 方式连接问题
  • 面试实战 问题二十七 java 使用1.8新特性,判断空
  • 深入理解 uni-app 的 uni.createSelectorQuery()
  • SAP Valuation Category在制造业成本核算中的使用场景与配置方案
  • Easysearch 数据迁移之 INFINI Gateway
  • 云计算-OpenStack 运维开发实战:从 Restful API 到 Python SDK 全场景实现镜像上传、用户创建、云主机部署全流程
  • OpenBMC 中命令模式的深度解析:从原理到实现
  • Flink中的窗口
  • HTML5 Canvas实现数组时钟代码,适用于wordpress侧边栏显示
  • 用 mock 把 ES 单元测试@elastic/elasticsearch-mock 上手
  • PyTorch基础(使用TensorFlow架构)
  • Nginx的SSL通配符证书自动续期
  • Python(二):MacBook安装 Python并运行第一个 Python 程序
  • docker搭建java运行环境(java或者springboot)
  • 项目五算:估算、概算、预算、结算、决算
  • 解决:nginx: [emerg] the “ssl“ parameter requires ngx_http_ssl_module
  • 《张朝阳的物理课》,呼应当下物理学习的“思维转向”
  • react与vue的对比,来实现标签内部类似v-for循环,v-if等功能
  • Avalon-MM协议
  • python之---递归选择文件并生成新文件保持目录结构
  • 《工程封装》(Python)
  • 一键式商品信息获取:京东API返回值深度挖掘
  • Dynamsoft Capture Vision Crack
  • AWS Bedrock Claude模型费用深度分析:企业AI成本优化指南
  • 卫星轨道基础知识