wordpress - Gutenberg:允许在 RichText 中进行其他格式设置
问题描述
我创建了一个相当简单的手风琴块,它非常适合基本文本。问题是我用于手风琴内容的控件是 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>
)
];
},
解决方案
您可以像这样注册新的格式选项 -
添加简单的格式化按钮
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>
);
},
} );
添加图像按钮
registerFormat( 'image', {
selector: 'img',
attributes: {
url: {
source: 'attribute',
attribute: 'src',
},
},
edit: class ImageFormatEdit extends Component {
constructor() {
super( ...arguments );
this.state = {
modal: false;
};
}
openModal() {
this.setState( { modal: true } )
}
closeModal() {
this.setState( { modal: false } )
}
render() {
const { insertObject } = this.props;
return (
<Fragment>
<InserterItems>
<InserterItem
icon="inline-image",
title={ __( 'Inline Image' ) }
onClick={ openModal }
/>
</InserterItems>
{ this.state.modal && <MediaUpload
type="image"
onSelect={ ( { id, url, alt, width } ) => {
this.closeModal()
insertObject( {
src: url,
alt,
class: `wp-image-${ id }`,
style: `width: ${ Math.min( width, 150 ) }px;`,
} );
} }
onClose={ this.closeModal }
render={ ( { open } ) => {
open();
return null;
} }
/> }
</Fragment>
);
}
},
} );
您可能会在这里和那里遇到一些错误。相关票证
推荐阅读
- javascript - TypeError:无法读取未定义的属性“地图” - 处理 json 行:test.js:11
- google-apps-script - 是否可以使用 Google Apps 脚本在 Html 正文中发送具有不同数量的内联图像的电子邮件?
- kubernetes - Kubernetes:Pod 调度/驱逐与请求/限制的关系
- python - 如何在这里抓取 10 篇文章的链接、标题、作者和时间戳?汤输出看起来与浏览器不同
- react-native - React Native - 是否有允许将不同类型数据的多种表示添加到单个图表的图表库?
- javascript - Javascript数组id显示顺序
- java - 如何使用弹簧在表格中显示日期?
- r - 删除零而不删除整行或列 - R
- rust - 通过 Rust 宏自定义文字?
- python - 需要按月和地区分组并在 Python Pandas 中返回总和