Question

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

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

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

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

我不知道从哪里开始。有什么想法吗？

我已经创建了一个draft-js codepen，其中包含当前editorState的预览，以便于启动，只是不确定从哪里开始：http://sandbox.onlinephpfunctions.com/code/9c19bfac8fedb02a9840cdfb4f9217ccb110c7bc

更新作为对Jiang YD的回答的回复，我不认为从块的末尾获取文本并使用它创建一个新块是个好主意..不是确定格式化状态将保持多久。我认为解决方案应该使用https://codepen.io/adamtal/pen/pbqVrL?editors=0010进行一些选择操作。

Answer 1

这是方式

捕获handleBeforeInput
获取当前选择块
获取当前块的文本
做你的突破
将带有剪切文字的新块插入ContentState
将新状态设置为您的组件

Answer 2

我遇到了同样的问题，我有一个分割块，并且不得不给新的分割块一些元数据。

获取拆分后创建的下一个块的键是棘手的部分。这是我的完成方式。

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)
);

Draft-js：自动换行

2 个答案: