search

imzbf / md-editor-v3

Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...
https://imzbf.github.io/md-editor-v3
MIT License
1.52k stars 146 forks source link

仅预览模式，’\n‘换行后空了一行出来 #574

Closed HDP2017 closed 3 months ago

HDP2017 commented 3 months ago

描述这个Bug

image

版本号

vue3项目，4.16.7

问题重现链接

No response

imzbf commented 3 months ago

看下你对应的html是怎样的，正常的是这样

<p data-line="0">fas<br>
asd<br>
sasdd</p>
HDP2017 commented 3 months ago

html是这样的 image 但是我选中里面的文字，这个地方好像前面多了个换行 image 但是我得山上应该就是只有一个\n

HDP2017 commented 3 months ago

或许是因为，在替换为<br>标签的时候，文本里面的\n还存在？

imzbf commented 3 months ago

查了下文档，这是有些 Markdown 解析器在生成 HTML 时，为了保持与原始 Markdown 文件的最大兼容性和可读性，选择保留原始的换行符。而 markdown-it 和 marked 在设置 breaks 为 true，有上面相同的行为。

如果不希望使用的话，可以从这里参考设置它的值。

由于\n在html中并不会起到真实的换行行为，所以你需要参考下面的语法编写你的内容：

https://github.github.com/gfm/#example-673

HDP2017 commented 3 months ago

问题是我现在需要在输入框借助\n换行，其实就是输入框默认的换行行为是在字符串添加\n，而我们后端也需要这个来表示换行。渲染的时候就用的咱们的插件，所有下面的markdown语法应该不行。 上面那个配置可以解决这个问题吗，文档看的不是很清晰，可否提供一个示例代码，麻烦大佬

imzbf commented 3 months ago

问题是我现在需要在输入框借助\n换行，其实就是输入框默认的换行行为是在字符串添加\n，而我们后端也需要这个来表示换行。渲染的时候就用的咱们的插件，所有下面的markdown语法应该不行。 上面那个配置可以解决这个问题吗，文档看的不是很清晰，可否提供一个示例代码，麻烦大佬

如果确实要使用\n换行，那不用做任何修改，目前没有办法移除保留的\n。

HDP2017 commented 3 months ago

那中间空了一行的问题就解决不掉了嘛0.0

imzbf commented 3 months ago

从编译规则上去处理挺麻烦的，通过组件提供的预处理html的方法sanitize，你可以把它替换掉，像下面：

<MdPreview sanitize={(h) => h.replace(/<br>\n/g, '<br>')} />
HDP2017 commented 3 months ago

加上这个可以了，感谢老哥