editor-portal

功能描述

渲染 editor 组件的自定义区块。相关接口 EditorCtx.insertCustomBlock。

属性说明

使用方法

插入自定义区块

1. 使用 EditorContext.insertCustomBlock 插入自定义区块（此时仅占位），获取返回的 blockId；
2. 渲染 <editor-portal> 组件，并指定 key 属性为 blockId，<editor-portal> 中的内容将插入到自定义区块的位置;

重新渲染自定义区块

自定义区块的结构和数据需要分开存储。建议编辑区内容使用返回的delta 数据结构存储，更为精简。

1. 通过 EditorContext.getContents 获取编辑区内容，此时 delta 中自定义块仅保存对应的 blockId;
2. 开发者需自行保存自定义块对应的数据内容，按 blockId 映射；
3. 通过 EditorContext.setContents 设置编辑区内容时，同时渲染 <editor-portal> 组件替换自定义区块的内容；

示例代码

<editor id="editor">
  <block bl:for="{{customBlockList}}" bl:key="blockId">
    <editor-portal key="{{item.blockId}}">
      <view class="flex"></view>
    </editor-portal>
  </block>
</editor>

Page({
  insertCustomBlock() {
    const { customBlockList } = this.data;
    this.editorCtx.insertCustomBlock({
      success: (res) => {
        customBlockList.push({
          blockId: res.blockId,
        });
        this.setData({ customBlockList });
      },
    });
  },
});