const youTubeVideoHandler = () => {
const editor = quillRef.current.getEditor();
let url = prompt("Enter Video URL: ");
url = getVideoUrl(url);
// console.log("URL", url);
const newHTML = `<iframe class="ql-video" frameborder="0" allowfullscreen="true" src=${url}></iframe>`;
let range = editor.getSelection();
editor.clipboard.dangerouslyPasteHTML(range, newHTML);
// if (url != null) {
// editor.insertEmbed(range, "video", url);
// }
};
I am using quill-upload to allow users to upload their own videos and images to the editor (works great) but I also wanted them to be able to embed YouTube links and this is where things get crazy.
I have a button for this, and the code for the handler is above.
The clipboard.dangerouslyPasteHTML and the commented-out insertEmbed methods both fail for me in spectacular ways that I don't understand.
For dangerouslyPasteHTML, if 'newHTML' was something benign like Hello
then it works as expected. With my example however quill completely ignores that I want an iframe and gives me a video instead with the "quill-upload-video" class which makes it useless as I can't embed the YouTube link at this point as it requires an iframe.For insertEmbed, the same thing happens. It gives me a element with the "quill-upload-video" class.
I am certain that something about the quill-upload package is telling Quill to do this but I can't understand what. Is there a hacky-way to force raw HTML in some other way or override what quill-upload is doing to influence this?