在粘贴时从 React Rich Text Editor (react-rte) 中剥离格式时，光标位置丢失

编程问答 2022-05-24

问题描述

我试图在粘贴内容时从 reacte-rte 中去除样式。我遇到了一个名为 draftjs-filters 的 npm 包。它似乎有效，但只要粘贴内容，我的光标位置就会跳回到编辑器的开头。有没有办法使这项工作。很多人提到使用诸如 forceSelection() 之类的 Draft-js 方法来定位光标。我认为 forceSelection() 不适用于 react-rte。

我也很感激有关使用 react-rte 剥离格式的更好方法的建议。

以下是使用带有 react-rte 的 Draft-js 过滤器的代码片段：

import {filterEditorState} from 'draftjs-filter';
import {statetoHTML} from 'draft-js-export-html';

 const [inputValues,setInputValues] = useState(TextEditor.createEmptyValue());

function handleOnChange(value) {
    const shouldFilterPaste =
      value._editorState.getCurrentContent() !==
        inputValues._editorState.getCurrentContent() &&
      value._editorState.getLastChangeType() === 'insert-fragment';

    let filteredState = shouldFilterPaste ? value._editorState : value;

    if (shouldFilterPaste) {
      filteredState = filterEditorState(
        {
          blocks: [
            'header-two','header-three','unordered-list-item','ordered-list-item',],styles: ['BOLD','ITALIC','UNDERLINE'],entities: [
            {
              type: 'IMAGE',attributes: ['src'],allowlist: {
                src: '^http',},{
              type: 'LINK',attributes: ['url'],maxnesting: 1,whitespacedCharacters: ['\n','\t','?'],filteredState,);
      return TextEditor.createValueFromString(
        statetoHTML(filteredState.getCurrentContent()),'html',);
    }
    return filteredState;
  }

N/B：数组中指定的样式（'BOLD'、'ITALIC'、'header-one' 等）是我在粘贴时保留的样式。任何未指定的样式都将被删除。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

draftjsreactjsreactjsreactjsreactjsrte