JavaScript (WordPress) 中的古腾堡编辑器内容

Posted 2023-02-19

【中文标题】JavaScript (WordPress) 中的古腾堡编辑器内容

【英文标题】：Gutenberg editor content in JavaScript (WordPress)

【发布时间】：2018-06-20 18:41:38

【问题描述】：

在 TMCE 时代，我们可以通过 editor.getContent() 轻松获取编辑器内容。但是在新的古腾堡编辑器中，我找不到这样做的方法。

我需要所有编辑器内容为 html（它将保存在数据库中的方式）。

我发现wp.block.serialize() 方法听起来很有希望。但似乎需要块（作为参数）。所以我有点卡住了。

【参考方案1】：

从 3.1 版开始。古腾堡，试试这个：

获取普通块内容：

var originalContent = wp.data.select( "core/editor" ).getCurrentPost().content;
var editedContent = wp.data.select( "core/editor" ).getEditedPostContent();

渲染帖子（转换为块）：

wp.blocks.parse( editedContent );

【参考方案2】：

您可能想要探索具有raw 和rendered 内容的window._wpGutenbergPost.content。这是，目前。事情可能会改变:)

【讨论】：

感谢 Andrea，但这似乎返回了保存在数据库中的内容，而不是用户在编辑器中编辑的内容...

这似乎已经过时了。看我的回答below。

【参考方案3】：

您可以使用选择器，它允许我们检索数据，并且类似地，例如，要更新在 Gutenberg 中编辑的帖子的标题，您可以这样做：

wp.data.dispatch( 'core/editor' ).editPost(  title: 'New Title'  );

您可以在此处查看操作文件 https://github.com/WordPress/gutenberg/blob/v2.9.2/editor/store/actions.js，以查看由 core/editor 命名空间定义的操作的完整列表。

查看更多：https://riad.blog/2018/06/07/efficient-client-data-management-for-wordpress-plugins/

【讨论】：

如何编辑内容？我试过 wp.data.dispatch( 'core/editor' ).editPost( content: '\n

【参考方案4】：

我有类似的问题，但无法发表评论。提供的答案流确实设置了帖子标题，但从 4.5.1 开始不处理内容。

为了更新帖子内容，我可以插入一个段落块。这是我的代码：

wp.data.dispatch( 'core/editor' ).editPost(  title: 'New Title'  );
var editedContent = wp.data.select( "core/editor" ).getEditedPostContent();
var newBlock = wp.blocks.createBlock( "core/paragraph", 
    content: editedContent,
);
wp.data.dispatch( "core/editor" ).insertBlocks( newBlock );