Как обеспечить класс многострочным элементом gutenberg RichText блоком? - PullRequest
Новая
       60

Как обеспечить класс многострочным элементом gutenberg RichText блоком?

0 голосов
/ 23 октября 2018

Я использую следующий код для блока gutenberg RichText 

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

Кто-нибудь может мне помочь, как назначить класс list-item с многострочным элементом li?

1 Ответ

0 голосов
/ 09 января 2019

Я не думаю, что Гутенберг поддерживает это из коробки.Вы можете изменить содержимое редактора форматированного текста, заменив <li> на <li class="list-item"> в функции сохранения.Вам нужно использовать dangerouslySetInnerHTML для рендеринга строки в виде html внутри <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> в самом редакторе, затем вам нужно вызвать функцию для добавления класса к элементам <li> в событии onChange компонента 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
    });
},
...