如何解决古登堡块:显示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} />
}
Here is the test <a href="https://example.com">link</a>
default: 'Here is the test <a href="https://example.com">link</a>'
Here is the test <a href="https://example.com">link</a>
default: `Here is the test ${<a href="https://example.com">link</a>}`
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: ...
,并且“示例链接”将是可编辑的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。