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

Question

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

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

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

Answer 1

您可能想要浏览包含 raw 和 rendered 内容的 window._wpGutenbergPost.content。这是，此刻。事情可能会改变:)

Answer 2

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

获取普通块内容：

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

渲染 post（转换为块）：

wp.blocks.parse( editedContent );

Answer 3

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

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/

Answer 4

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

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

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 );

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

Gutenberg editor content in JavaScript (WordPress)

wordpress

wordpress-gutenberg