如何为 class 提供多行元素 gutenberg RichText 块？

Question

我正在为 gutenberg RichText 块使用以下代码

el(
    RichText,
    {
        key: 'editable',
        tagName: 'ul',
        multiline: 'li',
        className: 'list-group',
        onChange: onChangeContent,
        value: content,
    }
)

谁能帮我分配一个 class list-item 多行 li 元素？

Answer 1

我认为古腾堡不支持开箱即用。您可以通过将保存功能中的<li>替换为<li class="list-item">来修改富文本编辑器的内容。您需要使用 dangerouslySetInnerHTML 将字符串呈现为 html inside <ul>

save: function save(props) {
    function createMarkup() {
        return { __html: props.attributes.content.replace(/<li>/g, '<li class="list-item">') };
    }

    return el('ul', { dangerouslySetInnerHTML: createMarkup() });
}

已更新 如果您需要在编辑器本身添加新的 <li> 时立即执行此操作，则需要调用一个函数将 class 添加到 onChange 事件中的 <li> 元素RichText 组件。

edit: function edit(props) {
    function setCustomClass() {
        $('.list-group li').addClass('list-item');
    }
    return el(RichText, {
        key: 'editable',
        tagName: 'ul',
        multiline: 'li',
        className: 'list-group',
        onChange: function onChangeContent(content) {
            props.setAttributes({ content: content });
            setCustomClass();
        },
        value: props.attributes.content
    });
},

如何为 class 提供多行元素 gutenberg RichText 块？

How to provide class with multiline element gutenberg RichText block?

wordpress-gutenberg

gutenberg-blocks