如何使用 helper.h 函数使段落中的部分文本变为粗体/斜体/等？

贡献 用户体验
1

也许是个简单的问题，但这让我卡了一会儿 :sweat_smile:

如何使用 Discourse 的 helper.h 函数实现这个效果？

<div>
<p>这段文字 <i>是斜体</i> </p>
</div>

我目前最接近的尝试是这样的：

    html() {
      return [  h('div'),
                h('p', "这段文字" + h('i', "是斜体"))
             ]
    }

但返回的结果是这样的：
image

此外，我尝试的其他几种变体要么只返回“这段文字”，要么只返回“是斜体”，无法同时显示两者 :thinking:

例如，这段代码：

    html() {
      return [  h('div'),
                h('p', "这段文字", [h('i', "是斜体")])
             ]
    }

只返回了 是斜体
image

快接近了吗？
这段代码：

    html() {
      return [  h('div', ),
                h('p', [h('i', "是斜体"), "这段文字"])
             ]
    }

却给了我这个结果 :sweat_smile:

image

2

传递给 h 函数的 参数 是 tagName, properties, children。如果您愿意，可以省略 properties，仅使用 tagName, children。children 可以是单个节点，也可以是多个节点的数组。

所以我认为您需要类似以下的代码：

h('div',   // <div>
  h('p', [   // <p>
    '这段文本 ',
    h('i', '是斜体')  // <i></i>
  ])  // </p>
);  // </div>
6 个赞
3

谢谢，我没想到单个节点也可以是纯文本。这现在非常强大。

另外，你们是否考虑过引入一个简单的 HTML 到 h 函数的转换器？这在某些情况下能大大加快开发速度 :slight_smile:

4

在某些情况下，可以使用这样的模板

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/widgets/embedded-post.js#L11

5 个赞