Quill.js: Erstellen verschachtelnden Elemente Block, wenn embeds

Question

Einsetzen würde ich mit dieser Struktur enden, wie wenn ein Video Einbetten:

<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.2493%;"> 
    <iframe src="https://www.youtube.com/embed/8zHdLF3-coA?rel=0&showinfo=0" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen scrolling="no"> 
    </iframe> 
</div> 

I leicht die mit den quill.insertEmbed(range.index + 1, 'video', url, Quill.sources.USER); einfügen kann. Aber wie hänge ich dann die iframe in eine div wie oben an?

Answer 1

Es ist eigentlich sehr einfach, wenn auch manuelles (dachte, es wäre Quill Art, so etwas zu tun ...). Jemand bitte beraten, ob es einen besseren Weg gab!

export default class CustomVideoBlot extends BlockEmbed { 

static create(url) { 
    const node = super.create(); 
    const vidWrapper = <HTMLDivElement>document.createElement('div'); 
    // Set attributes on the iframe 
    node.setAttribute('frameborder', '0'); 
    node.setAttribute('allowfullscreen', true); 
    node.setAttribute('src', this.sanitize(url)); 
    // Set styles to the video wrapper 
    Object.assign(vidWrapper.style, WRAPPER_ATTRIBUTES); 
    // Append iframe as a child of the wrapper 
    vidWrapper.appendChild(node); 

    return vidWrapper; 
    } 
}