古登堡块：显示HTML标签的RichText默认值

问题描述

当我在下面的Gutenberg块中包含标签时，它将在编辑器和前端中输出HTML标签。这仅在默认文本下发生-在编辑器中添加链接时，它将正确呈现：

attributes: {
  text: {
    type: 'array',source: 'children',selector: 'p',default: 'Here is the test <a href="https://example.com">link</a>',},}

edit: ({ attributes: { text },setText ) => {
  return <RichText
    placeholder="Text..."
    tagName="p"
    onChange={setText}
    value={text}
    allowedFormats={['core/bold','core/italic','core/link']}
  />
}

save: () => {
  return <RichText.Content tagName="p" value={text} />
}

输出（包装在<p>标记中）：

Here is the test <a href="https://example.com">link</a>

已经尝试从Gutenberg核心/链接准确复制标记：

default: 'Here is the test <a href="https://example.com">link</a>'

输出（包装在<p>标签中）：

Here is the test <a href="https://example.com">link</a>

并尝试将带有标签的默认文本设置为对象：

default: `Here is the test ${<a href="https://example.com">link</a>}`

输出（包装在<p>标签中）：

Here is the test [object Object]

如何获取默认文本以自行输出标签？

解决方法

RichText组件placeholder text仅支持纯文本。但是，您可以通过在块属性中定义示例内容来添加链接和其他受支持格式之类的预格式化内容：

...
attributes: {
    text: {
        type: 'array',source: 'html',selector: 'p'
    },},example: {
    attributes: {
        text: 'Here is the test <a href="https://example.com">link</a>'
    }
},...

通过定义示例属性，不再需要placeholder= ...和default: ...，并且“示例链接”将是可编辑的。