使用applyFormat(来自@WordPress/Rich-Text)持续更改Gutenberg的富文本值

时间：2019-01-14 作者：Akshay Raje

我正在开发一个古腾堡侧边栏插件，它可以进行一些文本分析，并在此基础上，需要在段落块中注释文本。这是最简单的部分，可以使用Annotations API 通过如下方式迭代每个块：

wp.data.dispatch( \'core/annotations\' ).__experimentalAddAnnotation( {
    source: "my-annotations-plugin",
    blockClientId: wp.data.select( \'core/editor\' ).getBlockOrder()[0],
    richTextIdentifier: "content",
    range: {
        start: 50,
        end: 100,
    },
} );
现在，我面临的挑战是坚持这些注释（因为这是插件的要求）。我发现API内部使用的注释applyFormat method of @wordpress/rich-text 但我不知道如何直接使用applyFormat。文档足够，缺少代码示例。

如果您已经使用过这个，那么让样例工作（ES5或ES6）代码以正确的方式使用applyFormat会有所帮助。

1 个回复
最合适的回答,由SO网友:Akshay Raje 整理而成

我终于明白了。如果有人需要这样做，只需在这里发布，因为古腾堡文档缺少代码示例。

参考以下代码，blockIndex 是你正在处理的障碍；和startIndex 和endIndex 要在块上下文中注释的范围：

// Get latest modified content of the block
let html = wp.data.select( "core/editor" ).getBlocks()[blockIndex].attributes.content;
// Get uuid of the block
let blockUid = wp.data.select( "core/editor" ).getBlocks()[blockIndex].clientId;
// Create a RichText value from HTML string of block content
let value = wp.richText.create({
  html
});
// Apply a format object to a Rich Text value from the given startIndex to the given endIndex
value = wp.richText.applyFormat(value, { type: \'strong\' }, startIndex, endIndex);
// Update the block with new content
wp.data.dispatch( \'core/editor\' ).updateBlock( blockUid, {
    attributes: {
      content: wp.richText.toHTMLString({
        value
      })
    }
  } );

标签： block-editor   小码农  

相关推荐