如何更改 Draftjs 中 ContentBlock 渲染的顺序？答案

【问题标题】：How to change order of ContentBlock render in draftjs?如何更改 Draftjs 中 ContentBlock 渲染的顺序？
【发布时间】：2018-08-28 18:29:59
【问题描述】：

有一个关于草稿 js 的问题。

如何更改 ContentBlock 的顺序？我正在尝试向内容添加外部链接并在编辑器中呈现视频。

创建当前状态：

createEditorState(source) {
        if (!source) {
          return EditorState.createEmpty();
        }

        const contentState = stateFromMarkdown(source);
        const editorState = EditorState.createWithContent(contentState);

        return addVideoContent(source, editorState)
 }

添加视频内容块（支持通过视频插件渲染）：

addVideoContent(source, editorState) {
    function buildNewEditorState(state, src) {
      const currentContentState = state.getCurrentContent();
      const contentStateWithEntity = currentContentState
        .createEntity(VIDEO_PLUGIN_TYPE, 'IMMUTABLE', { src });
      const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

      return AtomicBlockUtils.insertAtomicBlock(state, entityKey, ' ');
    }

    //defining video urls
    ...

    return videoUrls.reduce(buildNewEditorState, editorState);
}

问题在于渲染顺序： 1. 视频块； 2.链接块。

如何将此顺序更改为： 1. 链接块； 2. 视频块。

【问题讨论】：

这取决于你如何渲染你的原子块。请显示更多代码
原子块的渲染是通过 Draft-js-video-plugin 处理的。我发现AtomicBlockUtils.insertAtomicBlock用下一种方式修改我的contentState：就在调用方法之前，contentState在索引0-{key: "dkdl8", text: "https://....", type: "unstyled"}上有一个块，调用后-3块：0-空块{key: "eih8o", text: "", type: "unstyled"}1-原子块{key: "4694p", text: " ", type: "atomic"}2 - 原始块{key: "dkdl8", text: "https://...", type: "unstyled"}。所以问题是AtomicBlockUtils.insertAtomicBlock 改变块的顺序。
所以只需制作自己的视频插件并更改块顺序。

标签： draftjs draft-js-plugins

【解决方案1】：

好的。问题出在 selectionState 中。

初始状态初始化时，selectionState（锚点和焦点的位置）等于第一个块的第一个字符。所以AtomicBlockUtils.insertAtomicBlock 方法将在 selectionState 和插入“原子”之间拆分块。

决定：EditorsState.moveSelectionToEnd(editorState)。

【讨论】：