jpuri / react-draft-wysiwyg

A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
MIT License
6.42k stars 1.16k forks source link

I want to create a custom toolbar to add html #786

Open sanjitbauli opened 5 years ago

sanjitbauli commented 5 years ago
addVideo = (videoid, height, width) => {
        const { editorState, onChange } = this.props;
        const HTMLToInsert = this.videoPlayer(videoid);
        console.log(HTMLToInsert, HTMLToInsert);
        const contentState = Modifier.replaceText(
            editorState.getCurrentContent(),
            editorState.getSelection(),
            convertFromHTML(HTMLToInsert),
            editorState.getCurrentInlineStyle(),
        );
        console.log("contentState",contentState);
        onChange(EditorState.push(editorState, contentState, 'insert-fragment'));
        this.doCollapse();
    };
    videoPlayer(video_id'){
       return '<div id="ktp1test" data-widget="videoplayer" data-videoid="'+video_id+'" data-videotype="kaltura"><a href="">Watch the video</a></div>'
    }

It is showing RAW HTML code as output.

jpuri commented 5 years ago

@sanjitbauli : the code above is not good, plz refer embeddable feature for details https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/controls/Embedded/index.js