search

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

Toolbar Custom Buttom for Video Uploader #769

Open janainaemilia opened 5 years ago

janainaemilia commented 5 years ago

I created a component to upload video and modify the EditorState adding a video tag, with the blob of video uploaded, in the contentState. But when setting this component in toolbarCustomButtons and trying to upload a video, the editor just show "Your browser does not support the video tag". There is some way to implement a video uploader in the react-draft-wysiwyg with custom components?

Thank you, and awesome job!

jpuri commented 5 years ago

Hey @janainaemilia : the issue appears to be with the implementation of the video functionality: https://stackoverflow.com/questions/39962733/your-browser-does-not-support-the-video-tag

You should be able to support video with custom button and custom block renderer.

janainaemilia commented 5 years ago

Got it, I will review my implementation. Thank you for response :) Just to check, actually the react-draft-wysiwyg has support to video tag?

jpuri commented 5 years ago

@janainaemilia : it has support for embeddable. You can add support for video by adding a custom options.

janainaemilia commented 5 years ago

Ok, i'll try this better. Thank you for all :)

Aid19801 commented 5 years ago

Hi @janainaemilia how far did u get? I'm on the hunt for a text editor that has video links/embed enabled...

janainaemilia commented 5 years ago

Hi @Aid19801 I tried to create a custom component for upload videos, and include it on toolbarCustomButtons, but I didn't have success because, apparently, the react-draft-wysiwyg doesn't have support for video tag.

When I try do to something like that:

let conteudo = draftToHtml(convertToRaw(editorState.getCurrentContent()))
conteudo = conteudo + `<video width="320" height="240" controls><source src="${preview}" type="video/mp4"> Your browser does not support the video tag.</video>`
let contentBlock = htmlToDraft(conteudo)
const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks)

Just the text is included in the content and show in editor. Maybe I'm missing something, but I tried a similar solution with react-froala-wysiwyg and I got success, the only hindrance is that react-froala-wysiwyg is not free :(

Aid19801 commented 5 years ago

@janainaemilia i am also trying to do that. Did you get a local/fork version RDW running okay with npm or yarn link? I'm getting all manner of block is not a blockNode and check how many versions of react you have running errors. Just wondered if you had that or how u configured Webpack to solve it?

jpuri commented 5 years ago

@Aid19801 : this problem usually happens if you are somehow importing multiple versions of react in the project.Are you using react-draft-wysiwyg directly here or you have bundled it into a repo that you are using in another project ?

In either case make sure React does not get included multiple times.

Aid19801 commented 5 years ago

@jpuri hi there - i was using RDW in my webapp, but pulled from a local/clone/fork of your original.

I couldn't find any resolutions to duplicated React instances. V. strange. I'm sure it's something simple but nothing seemed to fix it. (also started getting problems with "cannot find module draft-js", which was bizarre. This was after yarn install). Anyway...

Added in the appropriate tags to Webpack (to always grab deps from top level web app), cloned-forked the repo, took modules out of RDW that i knew were in my webapp (eg React), tried changing version numbers manually to all be the same...

In the end i gave up and wrote an input component to detect whether something is Vimeo/YouTube etc and then append it at the bottom of the document.

But it's far from ideal. At the moment i'm trying to figure out how to insert that html iframe element into the contentState / blocks somehow. 😭 😭

thanks again though, for all your help and effort on this. It's a wonderful package despite my poor programming ability. x

https://stackoverflow.com/questions/54518313/in-draft-js-how-do-i-insert-an-html-iframe-into-my-contentstate