uniapp不识别富文本编辑器的内容解决途径

1,452 阅读1分钟

需求:后台使用wangEditor编辑文章,在uniapp开发的小程序上v-html不识别字号、字体颜色,

分析原因:wangEditor富文本编辑器,字号用富文本编辑器是text内容 字体颜色用富文本编辑器是text内容,这种写法在v-html中识别不出来;

解决办法:用正则验证把不能识别的替换成能识别的标签:

`

this.processList = res.data;

this.processList.content = this.processList.content.replace(/<img/gi, '<img style="max-width:100%;height:auto" ');

this.processList.content = this.processList.content.replace(/color="/gi, 'style="color: '); this.processList.content = this.processList.content.replace(/style=""/gi, '');

this.processList.content = this.processList.content.replace(/<p/gi, '<p style="text-align: left;text-indent: 2em;"');

this.processList.content = this.processList.content.replace(/<h1/gi, '<h1 style="text-align: left;text-indent: 2em;"');

this.processList.content = this.processList.content.replace(/<h2/gi, '<h2 style="text-align: left;text-indent: 2em;"');

this.processList.content = this.processList.content.replace(/<h3/gi, '<h3 style="text-align: left;text-indent: 2em;"');

this.processList.content = this.processList.content.replace(/<h4/gi, '<h4 style="text-align: left;text-indent: 2em;"');

this.processList.content = this.processList.content.replace(/<h5/gi, '<h5 style="text-align: left;text-indent: 2em;"');

`

注意:为啥this.processList.content = this.processList.content.replace(/color="/gi, 'style="color: '); 被替换的内容不能写/<font color="/gi 因为当对一段文本进行多个操作(比如斜体、字体颜色等多个操作时,font 后面不一定直接跟着color)