Draft.js -如何修剪内容

Question

如何从用Draft.js生成的内容的两端修剪空格？

Answer 1

也许存在一个更优雅的解决方案，但当我面临同样的问题时，我用以下代码解决了这个问题：

if(typeof String.prototype.trimLeft !== 'function') {
    String.prototype.trimLeft = function() {
        return this.replace(/^\s+/,"");
    }
}

if(typeof String.prototype.trimRight !== 'function') {
    String.prototype.trimRight = function() {
        return this.replace(/\s+$/,"");
    }
}

这里，我为没有这些方法的浏览器添加了trimLeft和trimRight方法。

trimContent = () => {
  const editorState = this.state.editorState;
  let currentContent = this.state.editorState.getCurrentContent();
  const firstBlock = currentContent.getBlockMap().first();
  const lastBlock = currentContent.getBlockMap().last();
  const firstBlockKey = firstBlock.getKey();
  const lastBlockKey = lastBlock.getKey();
  const firstAndLastBlockIsTheSame = firstBlockKey === lastBlockKey;

  const textStart = firstBlock.getText()
  const trimmedTextStart = textStart.trimLeft();
  const lengthOfTrimmedCharsStart = textStart.length - trimmedTextStart.length;

  let newSelection = new SelectionState({
    anchorKey: firstBlockKey,
    anchorOffset: 0,
    focusKey: firstBlockKey,
    focusOffset: lengthOfTrimmedCharsStart
  });

  currentContent = Modifier.replaceText(
    currentContent,
    newSelection,
    '',
  )

  let newEditorState = EditorState.push(
    editorState,
    currentContent,
  )

  let offset = 0;

  if (firstAndLastBlockIsTheSame) {
    offset = lengthOfTrimmedCharsStart
  }

  const textEnd = lastBlock.getText()
  const trimmedTextEnd = textEnd.trimRight();
  const lengthOfTrimmedCharsEnd = textEnd.length - trimmedTextEnd.length

  newSelection = new SelectionState({
    anchorKey: lastBlockKey,
    anchorOffset: trimmedTextEnd.length - offset,
    focusKey: lastBlockKey,
    focusOffset: textEnd.length - offset
  });

  currentContent = Modifier.replaceText(
    currentContent,
    newSelection,
    '',
  )

  newEditorState = EditorState.push(
    editorState,
    currentContent,
  )

  this._handleChange(newEditorState);
}

trimContent方法--在这里，我使用Modifier.replaceText util删除空格字符。工作示例- https://jsfiddle.net/p5532ddw/

Answer 2

我有一个多行的Draft.js输入，我想从每一行的两端修剪空格。

我在上面修改了Mikhail的解决方案，并创建了这样一个函数：

const trimEditorState = (currentEditorState) => {
  const currentContent = currentEditorState.getCurrentContent()
  const newContent = currentContent.getBlockMap().reduce((accumulator, block) => {
    const key = block.getKey()
    const text = block.getText()
    const trimmedLeft = text.trimLeft()
    const trimmedRight = text.trimRight()
    const offset = text.length - trimmedLeft.length

    const textToReplaceLeft = new SelectionState({
      anchorKey: key,
      focusKey: key,
      anchorOffset: 0,
      focusOffset: offset
    })

    const leftTrimmedContent = Modifier.replaceText(accumulator, textToReplaceLeft, '')

    const textToReplacRight = new SelectionState({
      anchorKey: key,
      focusKey: key,
      anchorOffset: trimmedRight.length - offset,
      focusOffset: text.length - offset
    })

    return Modifier.replaceText(leftTrimmedContent, textToReplacRight, '')
  }, currentContent)

  return EditorState.push(currentEditorState, newContent, 'remove-range')
}

它是一个没有副作用的纯函数:它接受当前的EditorState并返回修改后的、经过修剪的EditorState。希望这对外面的人有帮助！

Answer 3

获取原始数据，然后开始黑客攻击

editorRawData = convertToRaw(contentState);
editorRawData.blocks = editorRawData.blocks.filter(el => el.text);
editorRawData.blocks = editorRawData.blocks.map(el => {
    const indexOfFirstChar = el.text.search(/\S/);
    if (indexOfFirstChar > 0) {
        el.text = el.text.slice(indexOfFirstChar, el.text.length);
        el.entityRanges[0].offset = el.entityRanges[0].offset - indexOfFirstChar;
    }
    return el;
});