plugin development - How can I get the selected string when using a toolbar button in Gutenberg?

admin管理员组

文章数量:1122832

I have added a button to the Block Editor. Currently it adds a <span class="lqdnotes-blank-it"> before the selected text and </span> after it like so:

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

Here is the current code:

(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 );

I'd like to change how this functions. Instead of adding a class around it I'd like it to replace the selected text with an input textbox. The desired result would look like:

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

Thus one might have post content like:

"The American Civil War commenced in 1861 and concluded in 1865."

If the individual toggled on the button on 1861 and 1865 the output might look like:

"The American Civil War commenced in <input type="text" class="lqdnotes-blanked" id="1861lqd0001"> and concluded in <input type="text" class="lqdnotes-blanked" id="1865lqd0002">."

What I've been unable to figure out thus far is how I get the value of the selected text and how I return it as part of the input's id.

I have added a button to the Block Editor. Currently it adds a <span class="lqdnotes-blank-it"> before the selected text and </span> after it like so:

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

Here is the current code:

(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 );

I'd like to change how this functions. Instead of adding a class around it I'd like it to replace the selected text with an input textbox. The desired result would look like:

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

Thus one might have post content like:

"The American Civil War commenced in 1861 and concluded in 1865."

If the individual toggled on the button on 1861 and 1865 the output might look like:

"The American Civil War commenced in <input type="text" class="lqdnotes-blanked" id="1861lqd0001"> and concluded in <input type="text" class="lqdnotes-blanked" id="1865lqd0002">."

What I've been unable to figure out thus far is how I get the value of the selected text and how I return it as part of the input's id.

• plugin-development
• block-editor

Share Improve this question asked Oct 31, 2019 at 20:08 davemackeydavemackey 31522 silver badges1818 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You get the selected content with getTextContent(). So you should add your HTML before and after this content.

A small code example that will not work because I added variables without values, only for understanding. To see how I define the variables, and add many more filters for validation of the content, see my playing code inside a GitHub repo.

    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}`
                    })
                )
            )
        }
    });

You should also see this code from the core of this topic. https://github.com/WordPress/gutenberg/blob/4741104c2e035a6b80ab7e01031a9d4086b3f75d/packages/rich-text/src/register-format-type.js#L17

本文标签： plugin developmentHow can I get the selected string when using a toolbar button in Gutenberg