微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

我试图在粘贴内容时从 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 举报,一经查实,本站将立刻删除。