如何为类提供多行元素古腾堡 RichText 块？

Posted 2023-02-19

【中文标题】如何为类提供多行元素古腾堡 RichText 块？

【英文标题】：How to provide class with multiline element gutenberg RichText block?

【发布时间】：2019-03-27 11:02:46

【问题描述】：

我正在为古腾堡 RichText 块使用以下代码

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

谁能帮我分配一个带有多行 li 元素的类list-item？

【问题讨论】：

也想知道这个。

也想知道这个

【参考方案1】：

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

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

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

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

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
    );
,

【讨论】：

好吧，它不会立即起作用。保存文档后即可使用。每当将新的 li 元素添加到列表中时，我都需要添加该类。

我已经更改了答案，以便在添加新 li 时包含更改@RameezIqbal