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>');
},