Word Press富文本控件的保存

新建富文本编辑器,并编写save方法如下:

edit方法:

js 复制代码
export default function Edit({ attributes, setAttributes }) {
	return (
		<>
		<div { ...useBlockProps() }>
			<RichText
				tagName='p'
				onChange={ (value) => setAttributes({ noteContent: value })}
				value={attributes.noteContent}
				placeholder='输入你的内容...'
				>

			</RichText>
			<div>自定义的按钮</div>
		</div>
		</>
	);
}

save方法:

js 复制代码
import { useBlockProps } from '@wordpress/block-editor';

export default function save({ attributes }) {

    const { noteContent } = attributes;

    return (
        <div { ...useBlockProps.save() }>
            { noteContent }
        </div>
    );
}

看上去很好理解,将RichText标签解析成div,将内容保存在div内部。

报错

此时保存刷新:

报错内容:

text 复制代码
区块包含未预料的或无效的内容。

此时打开控制台能够看到报错的log:

text 复制代码
Content generated by `save` function:

<div class="wp-block-ht-ht-note">&lt;div class="wp-block-ht-ht-note">测试&lt;/div></div>

Content retrieved from post body:

<div class="wp-block-ht-ht-note">测试</div>

现象

出现这种报错通常原因是save方法和edit方法结果没有对上。本来是一个挺常见的bug。通常需要简单修改一下就能正常使用了。

但这次有些不太一样。仔细观察报错日志:

text 复制代码
save()方法保存的内容:
<div class="wp-block-ht-ht-note">
<div class="wp-block-ht-ht-note">
测试
</div>
</div>

edit()方法保存的内容:
<div class="wp-block-ht-ht-note">
测试
</div>

也就是save()方法保存了两次{ ...useBlockProps() }

原因

保存了两次,我们要搞清楚是从哪里来的。

第一次的div

这个很好理解,毕竟save方法使用了<div { ...useBlockProps.save() }>。使用这种方式就会解析成<div class="wp-block-ht-ht-note">

第二次的div

剩下的那也就能正常推断出来了:除了save方法使用的,就只可能是{noteContent}中本身的内容了。通过<div class="wp-block-ht-ht-note">&lt;div class="wp-block-ht-ht-note">测试&lt;/div></div>的转义内容也能够推断出,{noteContent}是包含着一个<div class="wp-block-ht-ht-note">

解决方案

知道原因就好解决了,既然保存时就带上了,那save()方法就不需要再添加一次了。

修改save()方法:

js 复制代码
export default function save({ attributes }) {

    const { noteContent } = attributes;

    return (
        <>
            { noteContent }
        </>
    );
}

保存刷新,解决。

相关推荐
揭老师高效办公12 小时前
Word如何一次性合并多个文档
word·wps文字
How_doyou_do13 小时前
样式冲突修复组件
前端·javascript·html
我有一棵树13 小时前
如何优雅的布局,height: 100% 的使用和 flex-grow: 1 的 min-height 陷阱
前端·css·html
余防1 天前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
β添砖java1 天前
CSS定位布局
前端·css·html
豆豆豆大王1 天前
HTML 与 JavaScript 结合 “点击按钮弹出提示” 的交互功能
javascript·html·交互
mumu1307梦2 天前
html 占位符
前端·javascript·html
Eiceblue2 天前
Python 将 HTML 转换为纯文本 TXT (HTML 文本提取)
开发语言·vscode·python·html
weixin_457126052 天前
分享几个免费下载抖音、小红书、快手高清图片和视频的在线网站
javascript·python·html
妄小闲2 天前
网页源代码 企业网站源码 html源码网站
前端·html