古腾堡-用于解析和格式化所有块的按钮?

时间:2021-08-06 作者:rugbert

我继承的网站在很大程度上依赖TinyMCE自定义菜单按钮和短代码,但我认为现在是该网站超越TinyMCE和短代码的时候了。

我们网站的TinyMCE定制是一个拦截器(我对Gutenberg知之甚少),我不确定Gutenberg是否可以提供相同的功能-具体来说,我们有两个按钮可以格式化整个帖子:

  • 文本格式化程序-此菜单有多种选项,可以解析整个文档并将所有粗体文本转换为标题。或者从整个文档中删除额外的空格。或者将Microsoft Word尾注锚定/链接转换为我们喜欢的内容

  • 表格格式化程序-类似于上述内容。有些函数将剥离所有样式属性的所有表,或将每个表的第一行移动到标记ect中

    在TinyMCE中,我们只需抓取编辑器内容并通过各种功能运行它,就可以做到这一点。但古腾堡是不同的,段落、块引号、图像等都是它们自己的特定块,而不是在内容的一个大节点中。

    那么古腾堡有没有类似的方法?

1 个回复
最合适的回答,由SO网友:Phil 整理而成

I think you can do this in a couple of different ways. I can\'t help with the specific processing you want done (since I don\'t know exactly what all you want done) but hopefully this gets you started.

Option 1

Loop through all blocks and "process" each block independently.

import { useSelect } from \'@wordpress/data\';

// Get the full list of blocks in the editor
const blocks = useSelect((select) => {
    return select(\'core/block-editor\').getBlocks();
});

// Loop through each block and do whatever needs doing
if (blocks.length > 0) {
    blocks.forEach((block) => {
        // Process the block here
    });
}

You can console.log to see what each block contains, but they are essentially just a bunch of attributes stored as an object.

You may need to recursively loop over nested blocks since Gutenberg supports InnerBlocks.

if (block.hasOwnProperty(\'innerBlocks\') && block.innerBlocks.length > 0) {
    block.innerBlocks.forEach((innerBlock) => {
        // Do your processing
    });
}

Option 2

Get the full HTML content of the edited post and process it as if it were static HTML.

import { useSelect } from \'@wordpress/data\';

// Get the full edited post content (HTML string)
const content = useSelect((select) => {
    return select(\'core/editor\').getEditedPostContent();
});

// Parse the HTML so you can do things with it.
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(content, \'text/html\');

// Do whatever with the HTML (htmlDoc) you want
// E.g. Get all the links: 
const links = htmlDoc.getElementsByTagName(\'a\');

You can add a custom button to the editor sidebar to trigger the processing like this:

import { PluginPostStatusInfo } from \'@wordpress/edit-post\';
import { Button } from \'@wordpress/components\';

registerPlugin(\'my-post-status-info\', {
    render: () => {
        const doProcessing = () => {
            // Do your processing
        };

        return (
            <PluginPostStatusInfo>
                <Button
                    isLink={ true }
                    onClick={ () => doProcessing }
                >
                    { __(\'Process\', \'pb\') }
                </Button>
            </PluginPostStatusInfo>
        );
    }
});

相关推荐

如何使用jQuery将TinyMCE WYSIWYG编辑器添加到文本区域?

使用jQuery(作为主题或插件的一部分)如何将所见即所得(TinyMCE)富文本编辑器添加到<textarea>? 具体来说,我想在满足某些条件(表单的更改等)后激活它。我有一个计时器事件,出于多种原因定期检查文本大小,这将是激活编辑器的函数。我需要做什么才能使TinyMCE在前端可用,并根据需要连接/激活它?(看起来用户正在编写大量文本,请激活TinyMCE)。我想我需要排队,但除此之外,我只是在猜测。我的问题与this one 但不同之处在于,我想用jQuery实现这一点。也相关,thi