问:带有 h1 标题和 p 副标题的 Richtext 编辑器

本文介绍了问:带有 h1 标题和 p 副标题的 Richtext 编辑器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试制作一个富文本块，其中第一行将是 h1，当您按 Enter 键时，您可以键入一个文字，我尝试使用值为p"的多行属性，但是不起作用，

我想知道是否有人可以帮助我.

这是我目前的代码.

/*** 块依赖*/导入'./style.scss';/*** 内部块库*/const { __ } = wp.i18n;const { registerBlockType } = wp.blocks;const { RichText } = wp.editor;/*** 寄存器块*/导出默认 registerBlockType('my-plugin/header-2', {标题: __('h1 标题'),描述:__('h1 标题'),图标:'心'，类别:'普通'，关键词: [__('富文本块'),__('微连接'),__('h2')],属性: {内容: {类型:'数组'，来源:儿童"，选择器:'h2'，},},函数({属性，setAttributes，className，isSelected}){返回 (<富文本标签名称=h2"类名={类名}值={属性.内容}onChange={(内容)=>setAttributes({内容})}placeholder={__('输入文本...', '自定义块')}keepPlaceholderOnFocus={真}/>);},保存:函数({属性}){返回 (<RichText.Content tagName="h2" value={ attributes.content }/>);}});

解决方案

您的区块目前仅适用于 H2 标签.代码中没有任何P"标签的代码，因此它不起作用.试试这个代码 -

 导出默认 registerBlockType('my-plugin/header-2', {标题: __('h1 标题'),描述:__('h1 标题'),图标:'心'，类别:'普通'，关键词: [__('富文本块'),__('微连接'),__('h2')],属性: {内容: {类型:'数组'，来源:儿童"，选择器:'h2'，},内容:{类型:'数组'，来源:儿童"，选择器:'p'，},},函数({属性，setAttributes，className，isSelected}){返回 (
<富文本标签名称=h2"类名={类名}值={属性.内容}onChange={(内容)=>setAttributes({内容})}placeholder={__('输入文本...', 'custom-block')}keepPlaceholderOnFocus={真}/><富文本标签名称=p"类名={类名}值={属性.pcontent}onChange={(pcontent) =>setAttributes({ pcontent })}placeholder={__('输入 p 文本...', 'custom-block')}keepPlaceholderOnFocus={真}/>
);},保存:函数({属性}){返回 (<div><RichText.Content tagName="h2" value={ attributes.content }/><RichText.Content tagName="p" value={ attributes.pcontent }/>

/** * Block dependencies */ import './style.scss'; /** * Internal block libraries */ const { __ } = wp.i18n; const { registerBlockType } = wp.blocks; const { RichText } = wp.editor; /** * Register block */ export default registerBlockType('my-plugin/header-2', { title: __('h1 Title'), description: __('h1 title'), icon: 'heart', category: 'common', keywords: [ __('richtext-block'), __('weconnect'), __('h2') ], attributes: { content: { type: 'array', source: 'children', selector: 'h2', }, }, edit: function ({ attributes, setAttributes, className, isSelected }) { return ( <RichText tagName="h2" className={className} value={attributes.content} onChange={(content) => setAttributes({ content })} placeholder={__('Enter text...', 'custom-block')} keepPlaceholderOnFocus={true} /> ); }, save: function( { attributes } ) { return ( <RichText.Content tagName="h2" value={ attributes.content } /> ); } });

export default registerBlockType('my-plugin/header-2', { title: __('h1 Title'), description: __('h1 title'), icon: 'heart', category: 'common', keywords: [ __('richtext-block'), __('weconnect'), __('h2') ], attributes: { content: { type: 'array', source: 'children', selector: 'h2', }, pcontent: { type: 'array', source: 'children', selector: 'p', }, }, edit: function ({ attributes, setAttributes, className, isSelected }) { return ( <div className={className}> <RichText tagName="h2" className={className} value={attributes.content} onChange={(content) => setAttributes({ content })} placeholder={__('Enter text...', 'custom-block')} keepPlaceholderOnFocus={true} /> <RichText tagName="p" className={className} value={attributes.pcontent} onChange={(pcontent) => setAttributes({ pcontent })} placeholder={__('Enter p text...', 'custom-block')} keepPlaceholderOnFocus={true} /> </div> ); }, save: function( { attributes } ) { return ( <div> <RichText.Content tagName="h2" value={ attributes.content } /> <RichText.Content tagName="p" value={ attributes.pcontent } /> </div> ); } });