88250 / lute

🎼 一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。A structured Markdown engine that supports Go and JavaScript.
https://ld246.com/tag/lute
Other
1.1k stars 131 forks source link

`HTML2VditorXXBlockDOM` 标签空格缩进转为代码块 #109

Closed Vanessa219 closed 3 years ago

Vanessa219 commented 3 years ago

会将标签前有空格的转换为代码片段,如:

<p>
    <img src=.../>
</p>
PBK-B commented 3 years ago

@88250 我这边重现了该问题,提供参考 截屏2021-02-22 上午11 31 19

示例代码:

package main

import (
    "fmt"

    "github.com/88250/lute"
)

func main() {
    luteEngine := lute.New() // 默认已经启用 GFM 支持以及中文语境优化
    // html := luteEngine.MarkdownStr("demo", "**Lute** - A structured markdown engine.")
    markdown, err := luteEngine.HTML2Markdown(`
    <meta charset='utf-8'><div><ol style="margin:0px;" yne-block-type="list"><li style="white-space:pre-wrap;line-height:1.75;font-size:14px;text-align:left;list-style-position:inside;word-break:break-word;color:rgb(0, 0, 0);font-weight:normal;font-style:normal;text-decoration:none;background-color:rgba(0, 0, 0, 0);font-family:&quot;Microsoft YaHei&quot;, STXihei;list-style-type:decimal;">的序号是10万名),绝大部分用户可获得的9折优惠券(这个更重要);</li><li style="white-space:pre-wrap;line-height:1.75;font-size:14px;text-align:left;list-style-position:inside;word-break:break-word;color:rgb(0, 0, 0);font-weight:normal;font-style:normal;text-decoration:none;background-color:rgba(0, 0, 0, 0);font-family:&quot;Microsoft YaHei&quot;, STXihei;list-style-type:decimal;">社交效应,俗称凑热闹:越多的人、好友参与,自己受到的影响越大,活动越火热,被激发兴趣参与活动的可能性就越大。</li></ol></div><div yne-bulb-block="paragraph" style="white-space:pre-wrap;line-height:1.75;font-size:14px;text-align:left;"><span style="color: rgb(51, 51, 51);">商业目标和用户想要参与的目标其实是密切相关的。</span></div><div yne-bulb-block="paragraph" style="white-space:pre-wrap;line-height:1.75;font-size:14px;text-align:left;"><span style="color: rgb(51, 51, 51);">例如:社交效应能够让品牌得到快速传播,优惠券的派发则引发用户去使用从而提升优衣库的营收,降低的参与门槛则不仅让客群扩大,更能提升用户的品牌认知。</span></div><div yne-bulb-block="image"  style="white-space:pre-wrap;line-height:1.75;font-size:14px;text-align:left;">
    <img
        alt="0"
        data-media-type="image"
        src="https://note.youdao.com/yws/public/resource/4debda872da1c21da335e8d16a7a548e/xmlnote/46B942211458481A99CC540DD899A8EE/15154"
        style="width: 620px; height: 188px;"
    />
</div><div yne-bulb-block="paragraph" style="white-space:pre-wrap;line-height:1.75;font-size:14px;text-align:left;"><span style="color: rgb(51, 51, 51);">在Luckyline线上排队形式的营销传播活动,称之为游戏。那么,它有哪些游戏元素呢?</span></div><div yne-bulb-block="paragraph" style="white-space:pre-wrap;line-height:1.75;font-size:14px;text-align:left;"><span style="color: rgb(51, 51, 51);">虚拟排队并非必须是游戏,例如:我们在银行里排队的感受,如果把这样的排队迁移到网上,也需要很长的时间拿到号,也会有索然无味之感。</span></div><div yne-bulb-block="paragraph" style="white-space:pre-wrap;line-height:1.75;font-size:14px;text-align:left;"><span style="color: rgb(51, 51, 51);">而在Luckyline线上虚拟排队,其具备了游戏的一些主要元素,它就是一种游戏,把排队变成了一项娱乐休闲的互动游戏。</span></div><div yne-bulb-block="paragraph" style="white-space:pre-wrap;line-height:1.75;font-size:14px;text-align:left;"><span style="color: rgb(51, 51, 51);">我认为,luckyline的虚拟排队,主要表现以下主要游戏元素:明确的目标、随机性(或者叫偶然性)、奖励行为、社交化、角色特征、限时性、低门槛。</span></div><div yne-bulb-block="paragraph" style="white-space:pre-wrap;line-height:1.75;font-size:14px;text-align:left;"><span style="color: rgb(51, 51, 51);">下面我们逐一进行解释:</span></div><div yne-bulb-block="paragraph" style="white-space:pre-wrap;line-height:1.75;font-size:14px;text-align:left;"><span style="font-size: 20px;">1. 明确的目标</span></div>
`)
    if err == nil {
        // fmt.Println(markdown)
        html := luteEngine.MarkdownStr("demo", markdown)
        fmt.Println(html)
    }

}
PBK-B commented 3 years ago

通过处理 luteEngine.MarkdownStr 方法来修复可能会更好,我估计。期待修复

截屏2021-02-22 上午11 35 07

PBK-B commented 3 years ago

找到问题了,貌似是由于 IndentCodeBlockStart (缩进/ 4 个空格 解析为 code 标签)功能导致的这个本不是 Bug 的 “Bug”。之后可以考虑提供 ptions 让 js 端可设置部分解析功能

截屏2021-02-22 下午7 23 33

目前如果有遇到使用 vditor 不想要该功能的小伙伴可以参考我 Fork 的项目(仓库中也有编译好的 lute.min.js ):https://github.com/haxibiao/lute 然后使 vditor 设置 _lutePath 用该 lute.min.js :

window.vditor = new Vditor('vditor', {
  _lutePath: `http://192.168.0.107:9090/lute.min.js?${new Date().getTime()}`,
})
PBK-B commented 3 years ago

@Vanessa219 这个 Issues 好像可以 close 了… ^ v ^

88250 commented 3 years ago

@PBK-B 感谢帮忙调试,我们后续再看看,谢谢。