How to insert Videos react-draft-wysiwyg by toolbarCustomButtons

78 views Asked by At

How to upload videos by custom toolbar in react-draft-wysiwyg?

because the react-draft-wysiwyg toolbar does not have the option of upload video.

my react-draft-wysiwyg vision is 1.13.2

I tried to create the new ContentBlock add EditorState, but not success.

 addVideo(url) {
    const { editorState, onChange } = this.props;
    const contentState = editorState.getCurrentContent();
    const selection = editorState.getSelection();

    const entityKey = contentState.createEntity('VIDEO', 'MUTABLE', { src: url }).getLastCreatedEntityKey();

    const videoBlock = new ContentBlock({
       key: genKey(),
       type: 'video',
       text: '\u200B', // 使用零宽空格作为占位符
       characterList: List.of(CharacterMetadata.create({ entity: entityKey })),
     });

    const blockArray = [videoBlock];
    const blockMap = BlockMapBuilder.createFromArray(blockArray);

    const afterRemoval = selection.isCollapsed()
       ? contentState
       : Modifier.removeRange(contentState, selection, 'backward');
    const newContentState = Modifier.replaceWithFragment(
       afterRemoval,
       afterRemoval.getSelectionAfter(),
       blockMap,
     );
    onChange(EditorState.push(editorState, newContentState, 'insert-characters'));
  }
0

There are 0 answers