Wordpress Gutenberg RichText FormatType 不带 tagName 换行

发布于 2025-01-09 16:37:54 字数 1291 浏览 0 评论 0原文

我试图在 WordPress 上的古腾堡工具栏中添加一个自定义按钮,以在所选元素上应用类,但我所能做的就是用我的类的标签包装所选文本。

示例:

<ul>
    <li>Line 1</li>
    <li>Line 2</li>
</ul>

我想要的是,如果我选择第 2 行,我的类将应用于 li 元素,而不是用 span 或其他内容与类一起包裹。如果我只是将光标放在该行上而不选择所有行,那么它也适用,那就太好了。

到目前为止我的代码是这样的:

const { registerFormatType } = wp.richText;
const { RichTextToolbarButton, RichTextShortcut } = wp.editor;

( function( wp ) {
    var CustomButton = ({ isActive, onChange, value }) => {
        return wp.element.createElement(
            wp.blockEditor.RichTextToolbarButton, {
                icon: 'image-flip-horizontal',
                title: 'Custom Button',
                onClick: () => {
                    onChange( wp.richText.toggleFormat(value, { type: 'robot/button' }));
                },
                isActive: isActive,
            }
        );
    }
    wp.richText.registerFormatType(
        'robot/button', {
            title: 'Custom button',
            tagName: 'span',
            className: 'myClass',
            edit: CustomButton,
        }
    );
} )( window.wp );

有简单的方法吗?我可以在tinyMCE 中使用“wrapper => false”选项来完成此操作。

谢谢

I'm trying to add a custom button in my gutemberg toolbar on Wordpress to apply a class on selected element, but all I can do is to wrap selected text with a tag with my class.

Exemple:

<ul>
    <li>Line 1</li>
    <li>Line 2</li>
</ul>

What I want is if I select line 2 is that my class is applied to the li element, not wrapped with a span or something else with the class. Would be great that it applies also if I just set my cursor on the line without selecting all the line.

My code so far is this :

const { registerFormatType } = wp.richText;
const { RichTextToolbarButton, RichTextShortcut } = wp.editor;

( function( wp ) {
    var CustomButton = ({ isActive, onChange, value }) => {
        return wp.element.createElement(
            wp.blockEditor.RichTextToolbarButton, {
                icon: 'image-flip-horizontal',
                title: 'Custom Button',
                onClick: () => {
                    onChange( wp.richText.toggleFormat(value, { type: 'robot/button' }));
                },
                isActive: isActive,
            }
        );
    }
    wp.richText.registerFormatType(
        'robot/button', {
            title: 'Custom button',
            tagName: 'span',
            className: 'myClass',
            edit: CustomButton,
        }
    );
} )( window.wp );

Is there an easy way to do it ? I can do it in tinyMCE with "wrapper => false" option.

Thank you

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文