在古腾堡中使用工具栏按钮时，如何获取选定的字符串？

我在块编辑器中添加了一个按钮。目前，它添加了<span class="lqdnotes-blank-it"> 在选定文本之前，以及</span> 在这样之后：

<span class="lqdnotes-blank-it">Selected Text.</span>

以下是当前代码：

(function ( wp ) {
    var lqdNotesButton = function( props ) {
        return wp.element.createElement(
            wp.blockEditor.RichTextToolbarButton, {
                icon: \'editor-code\',
                title: \'Blank It\',
                onClick: function () {
                    props.onChange( wp.richText.toggleFormat(
                        props.value,
                        { type: \'lqdnotes/blankit\' }
                    ));
                },
            }
        );
    };

    wp.richText.registerFormatType(
        \'lqdnotes/blankit\', {
            title: \'Blank It\',
            tagName: \'span\',
            className: \'lqdnotes-blank-it\',
            edit: lqdNotesButton,
        }
    );
} )( window.wp );

我想改变它的功能。我希望它用一个输入文本框替换所选文本，而不是在其周围添加一个类。预期结果如下所示：

<input type="text" class="lqdnotes-blanked" id="FirstFifteenCharsOfSelectedTextUniqueID">

因此，可能会有如下帖子内容：

“美国内战始于1861年，于1865年结束。”

如果个人在1861年和1865年切换按钮，输出可能如下所示：

“美国内战始于<input type="text" class="lqdnotes-blanked" id="1861lqd0001"> 并于<input type="text" class="lqdnotes-blanked" id="1865lqd0002">.“”

到目前为止，我还无法弄清楚的是如何获取所选文本的值，以及如何将其作为输入id的一部分返回。

registerFormatType(type, { title, tagName, tagEnd, className, edit({isActive, value, onChange}) { // Get the selected string. const text = getTextContent(slice(value)); const toInsert = tagName + text + tagEnd; //const onClick = () => onChange( insert( value, toInsert ) ); const onClick = () => { element = create({ \'html\' : toInsert }); if( element.formats.length === 0 ) { return; } for ( let i = element.formats[0].length - 1; i >= 0; i-- ) { value = toggleFormat(value, element.formats[0][i]); } onChange(value); }; return ( createElement(Fragment, null, createElement(RichTextShortcut, { type : \'primary\', character, onUse: onClick }), createElement(RichTextToolbarButton, { icon, title, onClick : onClick, isActive : isActive, shortcutType : \'primary\', shortcutCharacter: character, className : `toolbar-button-with-text toolbar-button__advanced-${name}` }) ) ) } });

相关推荐