如何通过点击按钮添加自定义的block的内容

[JiaweiUTSCHINA]

基于官方给的例子 https://braft.margox.cn/demos/block 要如何通过extendControls或者Editor.use的方式去点击生成block-foo，尝试使用了ContentUtils.insertHTML的方法，但是要如何指定type是block-foo而不是默认的unstyled。 简书上的这个例子 https://www.jianshu.com/p/160610edd056 使用的是ContentUtils.insertAtomicBlock的方式不符合需求

[worklinwu]

我尝试了一个办法, 把两种方法结合起来用, 插入的归插入的用法, 回显用回显的方法. 例如

// eslint-disable-next-line consistent-return
const blockImportFn = (nodeName, node) => {
    if (node.classList.contains('custom-hr')) {
        return { type: 'custom-hr' };
    }
};

// eslint-disable-next-line consistent-return
const blockExportFn = (contentState, block) => {
    if (block.type === 'custom-hr') {
        return '<div class="custom-hr" style="height: 0; border-bottom: solid 1px #ddd; margin: 2em 0;"></div>';
    }
    if (block.type === 'atomic') {
        const ranges = block.entityRanges.length > 0 ? block.entityRanges[0] : -1;
        if (ranges !== -1) {
            const entity = contentState.getEntity(contentState.getBlockForKey(block.key).getEntityAt(0));
            if (entity.getType() === 'custom-hr') {
                return '<div class="custom-hr" style="height: 0; border-bottom: solid 1px #ddd; margin: 2em 0;"></div>';
            }
        }
    }
};
// eslint-disable-next-line consistent-return
const blockRendererFn = (block, { editor, editorState }) => {
    if (block.getType() === 'custom-hr') {
        return {
            component: HrComponent,
            editable: false,
            props: { editor, editorState }
        };
    }
    if (block.getType() === 'atomic') {
        const entity = editorState.getCurrentContent().getEntity(block.getEntityAt(0));
        if (entity.getType() === 'custom-hr') {
            return {
                component: HrComponent,
                editable: false,
                props: { editor, editorState }
            };
        }
    }
};

[renruijun]

@worklinwu 你的blockImportFn能正常回显自定义block的样式吗？ 我的使用方式和你一样，但是回显出不来。 https://github.com/margox/braft-editor/issues/916

[alex9968]

用上面的方式会出现传参不进去的问题， 需要手动调整传参方式，然后再去自定义组件的props.blockProps.data 获取

[alex9968]

const blockRendererFn = (block, { editor, editorState })=> {
  if (block.getType() === 'custom-hr') {
    console.log("atomic node-block", block.getData())
    const data = {
      dataId: block.getData().get("id"),
    }
    return {
      component: NodeBlock,
      editable: false,
      props: { editor, editorState, data } 
    }
  }

  if (block.getType() === 'atomic') {
    const entity = editorState.getCurrentContent().getEntity(block.getEntityAt(0));
    if (entity.getType() === 'custom-hr') {
      return {
        component: NodeBlock,
        editable: false,
        props: { editor, editorState, data: entity.getData() }
      };
    }
  }
}