Quill.js：插入嵌入时创建嵌套块元素

【问题标题】：Quill.js: Create nesting block elements when inserting embedsQuill.js：插入嵌入时创建嵌套块元素
【发布时间】：2017-09-09 11:56:01
【问题描述】：

我希望在嵌入视频时采用这种结构：

<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>

我可以轻松地将<iframe> 与quill.insertEmbed(range.index + 1, 'video', url, Quill.sources.USER); 插入。但是我该如何将iframe 附加到div 中？

【问题讨论】：

标签： rich-text-editor quill

【解决方案1】：

它实际上非常简单，尽管是手动的（认为会有一些 Quill 的方式来做这种事情......）。如果有更好的方法，请高人指教！

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;
  }
 }

【讨论】：