plugin development - Insert text programmatically in WordPress Gutenberg Editor

admin管理员组

文章数量:1125805

What's the correct way to insert text (or modify existing, selected text) in the Gutenberg rich text Editor?

I have a button/menu choice added to the drop down menu to the right of the "Link" button, where Strike through, etc is; and I have the click handler in place. What I cannot figure out is how to do something in that click handler and then insert the resulting text at the current caret position.

Sorry if this has been asked before, but I'm either looking in the wrong place(s), or this isn't very well documented (it's probably the former).

This is similar, but not identical to this question: (but I don't want to create a new block)

What's the correct way to insert text (or modify existing, selected text) in the Gutenberg rich text Editor?

I have a button/menu choice added to the drop down menu to the right of the "Link" button, where Strike through, etc is; and I have the click handler in place. What I cannot figure out is how to do something in that click handler and then insert the resulting text at the current caret position.

Sorry if this has been asked before, but I'm either looking in the wrong place(s), or this isn't very well documented (it's probably the former).

This is similar, but not identical to this question: https://stackoverflow.com/questions/75556381/add-content-programmatically-in-wordpress-gutenberg-editor (but I don't want to create a new block)

• plugin-development
• javascript
• block-editor

Share Improve this question asked Jan 29, 2024 at 8:22 johojoho 6344 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

To insert or modify text in the Gutenberg Rich Text Editor when a menu choice is selected, you need to interact with the Gutenberg block editor's rich text APIs. Here's a general approach to achieve this:

Access the Block's Attributes: The first step is to retrieve the current attributes of the block you're working with. This is usually done in the edit function of your block or in the component responsible for handling the block's content.

Handle Selection and Caret Position: Gutenberg provides utilities to manage the selection and the caret position within a rich text field. You'll need to use these utilities to determine where to insert or modify the text.

Modify the Text: Based on the current selection or caret position, modify the text as required. This could be inserting new text or changing the existing selected text.

Update the Block's Attributes: After modifying the text, you need to update the block's attributes with the new text content to reflect the changes in the editor.

Here's a simplified example using a custom button in the toolbar of a rich text block:

import { registerFormatType, toggleFormat } from '@wordpress/rich-text';
import { RichTextToolbarButton } from '@wordpress/block-editor';

// Custom format type
const customFormatType = {
    name: 'my-plugin/custom-format',
    title: 'Custom Format',
    tagName: 'span', // The tag to wrap the selected text
    className: null,    // Use null if you don't need a specific class
    edit: ({ isActive, value, onChange }) => {
        const onClick = () => {
            const toInsert = 'Your custom text'; // Text to insert

            // Modify the rich text value
            const newValue = toggleFormat(value, {
                type: 'my-plugin/custom-format',
                attributes: {
                    style: 'your-custom-style', // Optional style or other attributes
                },
                text: toInsert,
            });

            // Update the block's content
            onChange(newValue);
        };

        return (
            <RichTextToolbarButton
                icon="editor-code" // Use your desired icon here
                title="Insert Custom Text"
                onClick={onClick}
                isActive={isActive}
            />
        );
    },
};

// Register the custom format
registerFormatType(customFormatType.name, customFormatType);

This code defines a custom format type with a button that, when clicked, inserts or modifies text at the caret position. The toggleFormat function is used here to apply the changes to the Rich Text content.

Keep in mind that this is a basic example. Depending on your specific requirements (like the complexity of the text manipulation or UI interactions), you might need a more advanced implementation. Remember to test your solution thoroughly to ensure it behaves as expected in different scenarios, such as with different block types or content structures.

本文标签： plugin developmentInsert text programmatically in WordPress Gutenberg Editor