无法以编程方式将Src嵌入到iframe中

Question

我正在研究可以记录屏幕并将记录的视频加载到主轴编辑器的要求。

[现在，当我尝试将视频嵌入到iframe时，看不到嵌入iframe的任何src值。

但是当我使用浏览器的inspect元素更改src时，视频正在羽毛笔编辑器中加载：

下面是我的代码。

 let range = tempEditor.getSelection(true);
 tempEditor.insertEmbed(range.index, 'video', tempSrc, 'user');

这里tempSrc的值为blob:http://localhost:4100/4ab588cf-7ed7-4c08-8852-6c03895ae47a

在上述语句之后，我可以在编辑器中看到iframe，但看不到src值。

当我尝试在检查浏览器中如上所述更新源时，视频正在正常播放

Answer 1

我正在使用以下代码段将iframe（即YouTube视频）嵌入到Quill中。

确保导入类位于类文件import Quill from 'quill';的顶部

const id = '123456' //Just a unique id
const vendorLower = 'youtube';
const editorRef = this.quillEditorRef;
const range = editorRef.getSelection();
let index = 0;

if (range !== null) {
  index = range.index;
} else {
  index = editorRef.container.innerText.length + 1;
}

const BlockEmbed = Quill.import('blots/block/embed');
class MediaBlot extends BlockEmbed {
  static create(value) {
    const node = super.create();
    node.setAttribute('src', 'https://www.youtube.com/embed/XXXXXXXXX');
    node.setAttribute('frameborder', '0');
    node.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
    node.setAttribute('allowtransparency', true);
    node.setAttribute('allowfullscreen', true);
    node.setAttribute('scrolling', '0');
    node.setAttribute('width', '100%');
    node.setAttribute('height', '315px');
    return node;
  }

  static value(node) {
    return node.dataset.id;
  }
}

MediaBlot.blotName = vendorLower;
MediaBlot.tagName = 'iframe';
Quill.register(MediaBlot);
this.quillEditorRef.insertEmbed(index + 1, vendorLower, id);

希望有人会发现这很有用。

干杯！