Question

我正在使用Reactjs和draftjs库来创建一个富文本编辑器。我想自动将句子的第一个字母大写。

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
        <Editor editorState={this.state.editorState} onChange={this.onChange} 
        autoCapitalize="sentences"/>
    );
  }
}

ReactDOM.render(
  <MyEditor />,
  document.getElementById('container')
);

我创建的组件在一段时间后不会自动大写。为什么自动资本化不起作用？有没有更好的方法让它发挥作用？

Answer 1

我只是发现自己与Draft.js处于同一情况：需要实现自动大写，但是发现内置的Draft道具什么也没做，所以我自己制定了方法来实现这一目标。

这是我创建的实用程序函数，用于查询Draft.js中光标之前的字符：

const getCharsPrecedingFocus = (
  contentState: any,
  selectionState: any,
  numberOfChars: number,
): string => {
  const currentBlock =
    contentState.getBlockForKey(selectionState.getAnchorKey());
  const currentBlockText = currentBlock.getText();
  const endOfText = selectionState.getEndOffset();

  return currentBlockText.slice(
    endOfText - numberOfChars,
    endOfText,
  );
};

现在我们可以检查新句子开头是否有字符，该字符应大写。将此代码放在您的handleBeforeInput方法中，该方法作为道具传递：

const handleBeforeInput = (chars: string, editorState: any) => {
  const NON_CAPITALISED_REGEX = /^(?:\.\s)([a-z])$/;

  if (NON_CAPITALISED_REGEX.test(precedingThreeChars)) {
    const autoCapitaliseMatch =
      precedingThreeChars.match(NON_CAPITALISED_REGEX);
    if (autoCapitaliseMatch && autoCapitaliseMatch[1]) {
      const capitalisedChar = autoCapitaliseMatch[1].toUpperCase();

      const contentStateWithCapitalisedChar = Modifier.replaceText(
        contentState,
        selectionState.merge({
          anchorOffset: focusOffset - 1,
          focusOffset: focusOffset,
        }),
        capitalisedChar + chars,
      );

      EditorState.push(
        editorState,
        contentStateWithCapitalisedChar,
        'insert-characters'
      );
      return 'handled';
    }
  }
}

其他一些注意事项：

我使用了test RegEx方法来检查匹配自动大写模式的字符串，而不是match，因为这是每次用户按下键和{ {1}}应该比test快。除非您要处理非常长的文档，否则它对UX可能没有影响。

* edit：在我在此处发布的原始代码中，我忘了定义match。像这样precedingThreeChars

使用draft-js自动大写句子的第一个字母

1 个答案: