问:带有 h1 标题和 p 副标题的 Richtext 编辑器 [英] Q: Richtext editor with h1 title and p subtitle

问题描述

我正在尝试制作一个富文本块，其中第一行将是 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 }/>

);}});

我所做的更改 -

• 添加了pcontent"属性，每个新的html都需要声明新的属性

• 为P"内容添加了另一个字段以利用文本
  悬停选项

• 将 RichText 都包装在父 div 中以进行编辑和保存功能

Hi So i'm trying to make a richtext block where the First line will be a h1, and when u press enter u get to type a pharagraph, I tried using the multiline attribute with a value of "p" but that doesn't work,

I wonder if anyone can help me out.

This is my code so far.

   /**
 * 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 } />

        );
    }
});

解决方案

Your block is currently right for ONLY H2 tag. Nowhere in the code you have any code for "P" tag, hence it's not working. Try this code -

    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>


        );
    }
});

Changes I made -

• Added "pcontent" attribute, every new html must needs to declare new attribute

• Added Another field for "P" content to leverage the text
  option on hover

• Wrapped both of the RichText in a parent div for both Edit and Save function

这篇关于问:带有 h1 标题和 p 副标题的 Richtext 编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！