在富文本编辑器中支持 <span data-attribute>

贡献 功能
1

如果我在单行上选择一些文本并通过编辑器按钮应用换行，会应用内联换行。这可以工作，但所选文本的最后一个字母会被部分裁剪：

image

这是创建内联换行的一种方式，如果同一行没有其他内容，它会自动转换为块级换行。

另一种方式是 <span data-attribute>，它在富文本编辑器中不受支持（data-attribute 会被移除），但在 Markdown 编辑器中完全受支持。有趣的是，这种允许的语法并未列在 discourse/frontend/pretty-text/addon/allow-lister.js at 3b13aaa003332e7bf056a6cbb2c0da0cf107a0fd · discourse/discourse · GitHub discourse/frontend/discourse-markdown-it/src/features/d-wrap.js at 3b13aaa003332e7bf056a6cbb2c0da0cf107a0fd · discourse/discourse · GitHub

<span data-attribute> 在 meta 上有文档说明，并且可能在除我的论坛之外的其他地方被广泛使用。它的优势在于，即使同一行没有其他内容，也永远不会被转换为块级元素。

像这样的单独一行的普通换行：

[wrap="fish"]text[/wrap]

将被渲染为块级：

<div class="d-wrap" data-wrap="fish">
<p>text</p>
</div>

据我所知，避免这种行为的唯一方法是：

  • 使用 <span data-attribute>：

    <span data-fish>text</span>

    渲染为：

    <span data-fish="">text</span>

  • 在行首或行尾添加一个非修剪（理想情况下为零宽度）空格，例如 &ZeroWidthSpace;。

    &ZeroWidthSpace;[wrap=fish]Fishyfishy[/wrap]

    渲染为：

    &ZeroWidthSpace;<span class="d-wrap" data-wrap="fish">Fishyfishy</span>

后者有点 hacky。

我更喜欢能在富文本编辑器中使用第一种解决方案。更广泛地说，任何创建内联换行的简便方法都是好的。