Загруженное изображение не добавляется как встроенное в текстовом редакторе, когда в React-draft-wyswyg также добавлен пользовательский рендеринг блоков. - PullRequest
Новая
       37

Загруженное изображение не добавляется как встроенное в текстовом редакторе, когда в React-draft-wyswyg также добавлен пользовательский рендеринг блоков.

0 голосов
/ 06 декабря 2018

У меня есть текстовый редактор, созданный с использованием Reaction-draft-wysiwyg.Я создал пользовательскую функцию blockrendering, которая позволяет при добавлении пользовательского блока.

Код редактора: 

<Editor
    blockRenderMap={extendedBlockRenderMap}
    blockRendererFn={blockRendererFn}
    editorState={this.state.editorState}
    onEditorStateChange={this.onEditorStateChange}
    toolbarCustomButtons={[<FileAttachmentButton onAddFile={this.onAddFile} />]}
    toolbar={{
        options: ['inline', 'fontSize', 'fontFamily',
             'list', 'textAlign', 'colorPicker',
             'link', 'image'],
        link:{
            defaultTargetOption:'_blank',
            showOpenOptionOnHover:true
        },
        image:{
            urlEnabled: true,
            uploadEnabled:true,
            uploadCallback:this.uploadImageCallBack,
            alignmentEnabled: true,
            defaultSize: {
                height: 'auto',
                width: 'auto',
            }
        }
    }}
/>

RenderMap 

const RenderMap = new Map({
  FileAttachment: {
    element: 'div'
  }
}).merge(DefaultDraftBlockRenderMap);
const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(RenderMap);

Функция BlockRendering 

function blockRendererFn(contentBlock) {
  const type = contentBlock.getType();
  if (type === 'FileAttachment') {
    return {
      component: FileAttachment,
      editable: false,
      props: {}
    };
  }
}

Функция обратного вызова изображения 

uploadImageCallBack(file){
    let uploadedImages = this.state.uploadedImages;
    const imageObject = {
      file: file,
      localSrc: URL.createObjectURL(file),
    }
    uploadedImages.push(imageObject);
    this.setState({uploadedImages: uploadedImages})
    return new Promise(
      (resolve, reject) => {
        resolve({ data: { link: imageObject.localSrc } });
      }
    )
}

Рендеринг пользовательских блоков работает, как я и ожидал.Но когда я включаю пользовательский блок рендеринга, загрузка изображений не работает должным образом.Добавленное изображение не добавлено в строке.

Когда я пытаюсь добавить Image, я получаю и атомарный, и FileAttachment в качестве типа contentBlock, который может ограничивать встроенную функциональность изображения.Когда я проверял содержимое редактора, там был тег рисунка, но к тегу рисунка не был прикреплен тег img

Может ли кто-нибудь помочь мне найти решение?

...