Блог

Это вопрос о том, как работать с вставленным изображением с помощью draftjs в случае японского режима ввода.

В последнее время я использую Draft.js в качестве текстового редактора. Иногда нам нужно вставить изображение в редактор, например, скопировать изображение и вставить изображение в область редактора.

Все идет хорошо, но странная вещь происходит, когда я пытаюсь ввести японские слова вместе с вставленным изображением.

Как показано на рисунке выше, после ввода японских слов я нажал клавишу «Ввод», чтобы подтвердить японские слова. Но после того, как я нажал клавишу «Ввод», возникают следующие ошибки.

Я думаю, что проблема связана с тем, что японский диалог ввода уничтожил ключ сущности Draft.js

Не мог бы кто-нибудь подсказать мне, как решить эту проблему?

Мой код следующий.

 import React, {useState} from 'react';
import './App.css';
import {Editor, EditorState, convertFromRaw, ContentBlock} from 'draft-js';

function App() {
  const initData = convertFromRaw({
    blocks: [
      {
        key: "98pea",
        text: "https://dummyimage.com/100x100/000/fff",
        type: "atomic",
        depth: 0,
        inlineStyleRanges: [],
        entityRanges: [
          {
            offset: 0,
            length: 1,
            key: 0,
          },
        ],
        data: {},
      },
      {
        key: "16d04",
        text: "testtest。",
        type: "unstyled",
        depth: 0,
        inlineStyleRanges: [],
        entityRanges: [],
        data: {},
      },
    ],
    entityMap: {
      0: {
        type: "image",
        mutability: "IMMUTABLE",
        data: { src: "https://dummyimage.com/100x100/000/fff" },
      },
    },
  });

  const initState = EditorState.createWithContent(initData)
  const [editorState,setEditorState] = useState(initState)

  const Image = (props:any) => {
    return <img src={props.src} alt="" />;
  };

  const Media = (props:any) => {
    const entity = props.contentState.getEntity(props.block.getEntityAt(0));
    const { src } = entity.getData();

    const type = entity.getType();

    let media;
    if (type === "image") {
      media = <Image src={src} />;
    }

    return media;
  };

  const myBlockRenderer = (block:ContentBlock) => {
    if (block.getType() === "atomic") {
      return {
        component: Media,
        editable: false,
      };
    }
    return null
  }

  return (
    <div className="App">
      <div>
        <Editor editorState={editorState} onChange={setEditorState} blockRendererFn={myBlockRenderer} />
      </div>
    </div>
  );
}

export default App;