Draft.js - 如何 trim 内容

Question

我怎样才能 trim 由 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 实用程序删除 space 个字符。工作示例 - https://jsfiddle.net/p5532ddw/

Answer 2

获取原始数据，开始破解

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

Answer 3

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

我改编了上面 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 和 returns 修改后的 trimmed EditorState。希望这对其他人有帮助！

Draft.js - 如何 trim 内容

Draft.js - How to trim contents

reactjs

draftjs