jin-yufeng / mp-html

小程序富文本组件,支持渲染和编辑 html,支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用
https://jin-yufeng.gitee.io/mp-html
MIT License
3.28k stars 480 forks source link

保留空白div作为换行符 #111

Closed macanfa108 closed 4 years ago

macanfa108 commented 4 years ago

新功能描述
拜读大概源码后,尝试以下方式:(有更合适的方式可替代)

可新增配置项(如:'lineWrap': Boolean) 有配置lineWrap为true的保留空白div作为换行符,否则过滤空白div(不影响其他场景)

业务处调用方式: <jyf-parser ref="textModule" :line-wrap="true"></jyf-parser>

jyf-parser.vue: props: { // 保留空div为换行符 'lineWrap': Boolean }

MpHtmlParser.js: constructor(data, options = {}) { this.lineWrap = options.lineWrap; }

// 自动压缩 if (node.name == 'div' && !Object.keys(attrs).length) { var siblings = this.siblings(); if (!(node.children || []).length && this.lineWrap) node.name = 'br'; else if (!(node.children || []).length) siblings.pop(); else if (node.children.length == 1 && node.children[0].name == 'div') siblings[siblings.length - 1] = node.children[0]; }

附图: 企业微信截图_15867631745982

image

应用场景
场景:保留空白div作为换行符 之前应用的是wxParse,空白的div也会成为换行符来实现排版效果 但jyf-parser会直接过滤掉空白的div

排版源码: `

企业价值观
企业宗旨
企业精神
企业管理方针

`

jin-yufeng commented 4 years ago

之前没考虑到空 div 可以拿来换行,就直接去掉了,这样的话确实是有问题的

jin-yufeng commented 4 years ago

目前把自动去除空 div 的功能 去掉了(感觉没必要为此加一个属性哈哈哈)