3

我正在尝试使用 facebook 的Draft-JS框架实现一个编辑器，该框架将限制为 50 个字符行。

我不希望这些行使用 css 中断，我希望它们在达到 50 个字符的限制时真正分成单独的块。

换行应该发生在超过第 50 个字符的单词之前的最后一个空格处（类似于word-wrap: break-word在 css 中）。

当然，我需要选择留在新行的末尾。

我不知道从哪里开始。有任何想法吗？

更新： 作为对Jiang YD答案的回应，我认为从块末尾获取文本并用它创建一个新块不是一个好主意。不确定格式状态将保持多好。我认为解决方案应该使用Modifier.splitBlock并进行一些选择操作。

4

1 回答 1

0

我与同样的问题作斗争，我有一个拆分块并且必须给新的拆分块一些元数据。

获取拆分后创建的下一个块的密钥是棘手的部分。这是我完成它的方法。

const selection = editorState.getSelection();
let contentState = editorState.getCurrentContent();

contentState = Modifier.splitBlock(contentState, selection);

const currentBlock = contentState.getBlockForKey(selection.getEndKey());
const nextBlock = contentState
  .getBlockMap()
  .toSeq()
  .skipUntil(function(v) {
    return v === currentBlock;
  })
  .rest()
  .first();

const nextBlockKey = nextBlock.getKey();

const nextBlockEmptySelection = new SelectionState({
  anchorKey: nextBlockKey,
  anchorOffset: 0,
  focusKey: nextBlockKey,
  focusOffset: 0
});

contentState = Modifier.setBlockData(
  contentState,
  nextBlockEmptySelection,
  Map()
    .set("data1", "Hello this is block data")
    .set("data2", 3)
);
于 2019-02-20T05:37:22.353 回答