plugins - I have to select text from gutenberg editor. Purpose is to store and replace text

admin管理员组

文章数量:1122846

In the specific case where you're using "Convert to Blocks," the selection might be happening inside a custom RichText component or other block structures that Gutenberg uses. These components don't directly expose their selected text the way regular HTML elements do. Potential Reasons Why It Doesn't Work:

Gutenberg Virtual DOM: Gutenberg uses a virtual DOM through React, so selections may not be happening in the plain DOM but within a component's managed state. This can prevent window.getSelection() from behaving as expected.

Custom Block Structures: After converting to blocks, the editor is likely rendering text inside a RichText component or other block wrappers, and window.getSelection() won't properly capture selections within these components.

Reactivity of Gutenberg: Gutenberg manages its blocks in a reactive way (using React), meaning changes in selection and content may not be reflected in the DOM in the same way they would in a simple HTML environment

In the specific case where you're using "Convert to Blocks," the selection might be happening inside a custom RichText component or other block structures that Gutenberg uses. These components don't directly expose their selected text the way regular HTML elements do. Potential Reasons Why It Doesn't Work:

Gutenberg Virtual DOM: Gutenberg uses a virtual DOM through React, so selections may not be happening in the plain DOM but within a component's managed state. This can prevent window.getSelection() from behaving as expected.

Custom Block Structures: After converting to blocks, the editor is likely rendering text inside a RichText component or other block wrappers, and window.getSelection() won't properly capture selections within these components.

Reactivity of Gutenberg: Gutenberg manages its blocks in a reactive way (using React), meaning changes in selection and content may not be reflected in the DOM in the same way they would in a simple HTML environment

• plugins
• hooks
• block-editor
• editor
• text

Share Improve this question edited Sep 29, 2024 at 17:02 user250199 asked Sep 29, 2024 at 10:14 user250199user250199 1122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

We have to select text from the Gutenberg editor. The purpose is to store and replace text. Please use this code to help us with you

const { select } = wp.data;
const selectedBlock = select('core/block-editor').getSelectedBlock();

if (selectedBlock) {
    const selectedText = selectedBlock.attributes.content;
    console.log("Selected Text:", selectedText);
    // Store the selectedText as needed.
}

Replacing Text within a Block

const { dispatch } = wp.data;
const newText = "New Text to Replace";

dispatch('core/block-editor').updateBlockAttributes(selectedBlock.clientId, {
    content: newText
});

I am saving and Reusing Selected Text using the console.log()

localStorage.setItem('selectedText', selectedText);

const storedText = localStorage.getItem('selectedText');
console.log("Stored Text:", storedText);

const { registerPlugin } = wp.plugins;
const { PluginBlockSettingsMenuItem } = wp.editPost;

const MyReplaceTextPlugin = () => (
    <PluginBlockSettingsMenuItem
        label="Replace Text"
        onClick={() => {
            const newText = "Replaced Text!";
            dispatch('core/block-editor').updateBlockAttributes(selectedBlock.clientId, {
                content: newText
            });
        }}
    />
);

registerPlugin('my-replace-text-plugin', {
    render: MyReplaceTextPlugin
});

本文标签： pluginsI have to select text from gutenberg editor Purpose is to store and replace text