Question

我创建了一个相当简单的手风琴块，它非常适合基本文本。问题是我用于手风琴内容的控件是RichText，它仅允许诸如粗体之类的基本格式。

如果我想创建无序列表以及基本文本怎么办？我目前正在使用multiline: "p"，但是如何添加其他元素，以便在那里也可以包含UL元素？

我能想到的仅有两个想法，我不知道如何实现。第一种是使用BlockControls扩展块工具栏，以包括UL的其他格式程序，第二种是使用其他元素代替RichText-例如Freeform（可能已重命名为Classic Editor？），但是我在这些文件上找不到任何文档。

这是我当前代码的示例：

属性

attributes: {
    title: {
        type: 'string',     
        selector: '.hd-accordion-title',
    },  
    content: {
        type: 'array',
        source: 'children',
        selector: '.hd-accordion-content',
    }
},

编辑

edit: function( props ) {
        var title = props.attributes.title;     
        var content = props.attributes.content;

        function onChangeTitle(newTitle) {
            props.setAttributes({
                title: newTitle
            });
        }

        function onChangeContent(newContent) {
            props.setAttributes({
                content: newContent
            });
        }   

        return [
            (
                <div className={"hd-accordion"}>
                    <RichText
                        tagName="h3"
                        className= "hd-accordion-title"
                        value= { title }
                        onChange= { onChangeTitle }
                        placeholder = "Title"
                        keepPlaceholderOnFocus = { true }
                        multiline= { false }
                    />              
                    <RichText
                        tagName="div"
                        className="hd-accordion-content"
                        value={ content }
                        onChange= { onChangeContent }
                        placeholder = "content"
                        multiline="p"
                    />
                </div>
            )
        ];
    },

Answer 1

您可以注册新的格式选项，例如

添加简单的格式按钮

x - x^3/6 + x^5/120 = (x*120 - x^3 * 20 + x^5) / 120

添加链接按钮

registerFormat( 'bold', {
    selector: 'strong',
    edit( { isActive, toggleFormat } ) {
        return (
            <Fragment>
                <Shortcut
                    type="primary"
                    key="b"
                     onUse={ () => toggleFormat() }
                />
                <ToolbarControls>
                    <ToolbarButton
                        icon="editor-bold",
                        title={ __( 'Bold' ) }
                        isActive ={ isActive }
                        onClick={ () => toggleFormat() }
                    />
                </ToolbarControls>
            </Fragment>
        );
    },
} );

添加图像按钮

registerFormat( 'link', {
selector: 'a',
attributes: {
    url: {
        source: 'attribute',
        attribute: 'href',
    },
},
edit( { isActive, removeFormat } ) {
    return (
        <Fragment>
            <Shortcut
                type="access"
                key="s"
                onUse={ () => removeFormat() }
            />
            <Shortcut
                type="access"
                key="a"
                onUse={ /* Set state and pass to LinkContainer */ }
            />
            <Shortcut
                type="primary"
                key="k"
                onUse={ /* Set state and pass to LinkContainer */ }
            />
            <ToolbarControls>
                { isActive && <ToolbarButton
                    icon="editor-unlink",
                    title={ __( 'Unlink' ) }
                    onClick={ () => removeFormat() }
                /> }
                { ! isActive && <ToolbarButton
                    icon="admin-links",
                    title={ __( 'Link' ) }
                    onClick={ () => /* Set state and pass to LinkContainer */ }
                /> }
            </ToolbarControls>
            <LinkContainer { ...props } />
        </Fragment>
    );
},
} );

您可能在这里和那里遇到一些错误。相关ticket

古登堡：允许RichText中的其他格式

1 个答案: