Блог

Я пробовал несколько разных способов прикрепить изображение в черновике-js.

Мои попытки следовали примеру из руководстваhttps://www.draft-js-plugins.com/plugin/image. Для «Примера кнопки добавления изображения», полный источник которого можно найти здесь https://github.com/draft-js-plugins/draft-js-plugins/tree/master/docs/client/components/pages/Image/AddImageEditor . Я также попытался следовать этой статье medium, в которой плагин image не используется для выполнения аналогичных действий https://medium.com/@siobhanpmahoney/building-a-rich-text-editor-with-react-and-draft-js-part-2-4-persisting-data-to-server-cd68e81c820 .

Если я установлю начальное состояние с уже встроенным изображением, оно отобразится. Однако при использовании механизма, который добавляет его позже, похоже, он не работает. Я прочитал несколько упоминаний о различных версиях плагинов / draft.js возникли проблемы.
Мои версии:

«черновик-js-image-plugin»: «^ 2.0.7», «черновик-js»: «^ 0.11.6»,

 import { EditorState } from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createInlineToolbarPlugin, { Separator } from 'draft-js-inline-toolbar-plugin';
import createImagePlugin from 'draft-js-image-plugin';
import 'draft-js/dist/Draft.css';
import 'draft-js-inline-toolbar-plugin/lib/plugin.css';
import {
  ItalicButton,
  BoldButton,
  UnderlineButton,
  HeadlineOneButton,
  CodeButton,
  UnorderedListButton,
  OrderedListButton,
  BlockquoteButton,
} from 'draft-js-buttons';

interface TextEditorProps {
  label?: string;
  value: EditorState;
  onChange?: (editorState: EditorState) => void;
  className?: string;
  disabled?: boolean;
}

const useStyles = makeStyles((theme) => ({
  label: {
    margin: theme.spacing(1)
  },
  editor: {
    boxSizing: 'border-box',
    border: '1px solid #ddd',
    cursor: 'text',
    padding: '16px',
    borderRadius: '2px',
    marginBottom: '2em',
    boxShadow: 'inset 0px 1px 8px -3px #ABABAB',
    background: '#fefefe',
    minHeight: '50vh'
  }
}));
const inlineToolbarPlugin = createInlineToolbarPlugin();
const imagePlugin = createImagePlugin();
const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin, imagePlugin];
const TextEditor:React.FunctionComponent<TextEditorProps> = ({label, value, onChange, className, disabled }: TextEditorProps) => {
  const editor = React.useRef(null);
  const focusEditor = () => {
    editor.current.focus();
  }
  React.useEffect(() => {
    focusEditor()
  }, []);
  const classes = useStyles();
  const insertImage = () => {
    onChange(imagePlugin.addImage(value, "https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"));
  }
  return (
    <Box className={className} onClick={focusEditor}>
      {label amp;amp; <InputLabel className={classes.label}>{label}</InputLabel>}
      <div className="menuButtons">
          <button className="inline styleButton">
            <i
              className="material-icons"
              style={{
                fontSize: "16px",
                textAlign: "center",
                padding: "0px",
                margin: "0px"
              }}
              onClick={insertImage}
            >
              image
            </i>
          </button>
        </div>
      <Box className={!disabled amp;amp; classes.editor} >
        <Editor
          ref={editor}
          editorState={value}
          onChange={onChange}
          plugins={plugins}
          spellCheck={true}
          readOnly={disabled}
        />
        {<InlineToolbar>
          {(externalProps) => (
            <>
              <BoldButton {...externalProps} />
              <ItalicButton {...externalProps} />
              <UnderlineButton {...externalProps} />
              <CodeButton {...externalProps} />
              <Separator {...externalProps} />
              <UnorderedListButton {...externalProps} />
              <OrderedListButton {...externalProps} />
              <BlockquoteButton {...externalProps} />
              <HeadlineOneButton {...externalProps} />
            </>
          )}  
        </InlineToolbar>}
      </Box>
    </Box>
  )
}
  

Изменение editorState переопределяет изменение из insertImage. Вы запускаете focusEditor вместе с onClick insertImage

Не нужны дополнительные плагины, если вы не против запачкать руки и научиться вставлять в контент.

            <i
              className="material-icons"
              style={{
                fontSize: "16px",
                textAlign: "center",
                padding: "0px",
                margin: "0px"
              }}
              onClick={() => insertImage('https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg')}
            >
  

пользовательская функция insertImage, в вашем случае editorState должна быть заменена на ‘value’

 import { EditorState, AtomicBlockUtils } from “draft-js”; //<-- need add this import

const insertImage = ( url ) => {
    const contentState = editorState.getCurrentContent();
    const contentStateWithEntity = contentState.createEntity(
        'IMAGE',
        'IMMUTABLE',
        { src: url },)
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const newEditorState = EditorState.set( editorState, { currentContent: contentStateWithEntity });
onChange(AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, '')) //Update the editor state
};
  

загрузка изображения с помощью draftjs