如何在WP块编辑器工具栏按钮中的跨度标签上添加id属性

如何解决如何在WP块编辑器工具栏按钮中的跨度标签上添加id属性

我正在为wpblockitor创建RTF工具栏按钮的元素，它将创建一个选项来将选定的文本包装到span标签中。现在，我想要将一个ID属性添加到span标签中。在ID属性中，该值将是随机生成的。

所需的html输出：<span id="ABC123abc">Some Text</span>

代码：

    var AddAnchorButton = function(props) {
        return wp.element.createElement(
            wp.blockEditor.RichTextToolbarButton,{
                icon: 'admin-links',title: 'Add Anchor',onClick: function() {
                    props.onChange(wp.richText.toggleFormat(
                        props.value,{ type: 'anchor-format/add-anchor-button' }
                    ));
                },isActive: props.isActive,}
        );
    }


    wp.richText.registerFormatType(
        'anchor-format/add-anchor-button',{
            title: 'Add Anchor',tagName: 'span',className: null,edit: AddAnchorButton,}
    );


})(window.wp);

解决方法

我也遇到了这个问题，这是我的解决方案：

save: function (props) {    
return wp.element.createElement(
  "div",null,wp.element.createElement(
    "strong","dear xy,"
  ),wp.element.createElement(
    "p",{anchor: true},"example text "
  ),wp.element.createElement(
    "span","hello,: ",wp.element.createElement(
      "a",{id: "personId",rel: "noreferrer noopener",href: "https://www.google.com",target: "_blank"},"person xy"
    )
  )
);

}