无法在react-draft-wysiwyg富文本编辑器中选择文本

Question

我在使用 React-draft-wysiwyg 富文本编辑器的 React 版本（react：^18.2.0，）应用程序中遇到问题。问题是我无法在编辑器中选择文本。基本上我正在研究反应流（反应流：^11.9。”，）

React 流程提供了一个窗格/游乐场，我们可以通过抓取移动到该窗格/游乐场，当我的编辑器打开编辑器的实际行为时，当光标位于富文本编辑器中时，我能够抓取文本编辑器，但无法选择其中写入的文本,

我尝试向编辑器提供 z-index 添加一些 css

cursor: text !important;
user-select: text !important;

这是组件代码

import { Icon } from '@iconify/react';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import { convertToHTML } from 'draft-convert';
import {stateFromHTML} from 'draft-js-import-html';

import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

// eslint-disable-next-line react/display-name
const TextBody = React.forwardRef((props, ref) => {
  const {comp, components, setComp, type} = props;
  const [convertedContent, setConvertedContent] = useState(comp.props.value === 'Add something here' ? '' : comp.props.value);
  let contentState = stateFromHTML(convertedContent);
  const [editorState, setEditorState] = useState(() => EditorState.createWithContent(contentState));
  useEffect(() => {
    let html = convertToHTML(editorState.getCurrentContent());
    setConvertedContent(html);
  }, [editorState]);

  useEffect(() => {
    const arr = components?.map((item) => {
      if (item.order === comp.order) {
        item.props = {
          ...item.props,
          value: convertedContent
        }
      }
      return item
    });
    setComp(arr);
  }, [convertedContent]);

  const deleteNode = () => {
    if (components.length === 1) {
      alert("Node should contain atleast 1 widget!");
      return;
    }
    const newData = components.filter((data) => data.order !== comp.order);
    setComp(newData);
  }
  
  useEffect(() => {
    if (ref) {
      ref.current.focusEditor();
    }
  }, [ref]);

  return(
    <>
      <Box
          display="flex"
          justifyContent="space-between"
      >
        <Box
            width="93%"
            // position={"relative"}
            // zIndex={"9999999"}
        >
          <Editor
          editorStyle={{ zIndex: 9999 }}
              editorClassName="editor-class"
              editorState={editorState}
              onEditorStateChange={setEditorState}
              placeholder="Add text here"
              ref={ref}
              toolbar={{
                  image: {
                    alt: { present: true, mandatory: false },
                    previewImage: true,
                    inputAccept: 'svg',
                  },
                  options: ['inline', 'link'],
                  inline: {
                    inDropdown: false,
                    options: ['bold', 'italic', 'underline', 'strikethrough'],
                  },
                  link: {
                    inDropdown: false,
                    options: ['link'],
                  },
                }}
              toolbarClassName="toolbar-class"
              toolbarCustomButtons={[
                <div style={{
                  display: 'flex',
                  alignItems: 'center'
                }}
                >
                  <div
                      className="insert-entity"
                      onClick={() => alert('Coming Soon!')}
                  >
                    Insert Entity
                  </div>
                </div>,
                ]}
              wrapperClassName="wrapper-class"
          />
        </Box>

        <Box
            cursor="pointer"
            onClick={() => deleteNode()}
        >
          <Icon
              color='hsla(0, 0%, 85%, 1)'
              icon="ic:outline-delete"
          />
        </Box>
      </Box>

      <Box marginTop="10px">
        <Checkbox
            color="text.body"
            iconColor='blue.400'
            iconSize='1rem'
            onChange={() => alert('Coming Soon!')}
        >
          Question
        </Checkbox>
      </Box>

      {type === "customer_response_node" ? <>
        <Box
            marginTop="10px"
            width="93%"
        >
          <Text
              color="text.body"
              fontSize="xs"
          >
            Triggered Intent
          </Text>

          <Input
              borderRadius="0.3125rem"
              placeholder="Intent Name"
              size="sm"
          />
        </Box>

        <Box
            marginTop="10px"
            width="93%"
        >
          <Text
              color="text.body"
              fontSize="xs"
          >
            Add Entity
          </Text>

          <Input
              borderRadius="0.3125rem"
              placeholder="Entity name"
              size="sm"
          />
        </Box>
      </> : null}

      <Divider
          borderColor="#D8D8D8"
          marginTop="10px"
          width="93%"
      />                

      <Box
          display="flex"
          justifyContent="right"
          marginTop="10px"
          width="93%"
      >
        <Button
            _hover={{ backgroundColor: 'primary.90' }}
            backgroundColor="primary.100"
            color="white"
            onClick={() => alert('Coming Soon!')}
            size="sm"
            width="118px"
        >
          Add Variant
        </Button>
      </Box>
    </>
  )
});

export default TextBody;

Answer 1

听起来您在使用 Draft.js 实现的文本编辑器的行为与 React Flow 库期望的鼠标交互之间遇到了冲突。 React Flow 捕获鼠标事件的方式可能会干扰 Draft.js 的正常行为。

在编辑器中，您也可以自定义工具栏。

您需要做的就是通过以下操作禁用拖动属性

nopan nodrag

将两个课程添加到您的

editorClassName

和

toolbarClassName

中，您就可以开始了。