Quilljs React：嵌入具有 'src' 属性特定 url 的 iframe

Question

在 Quilljs 上，我试图插入一个 Iframe，它将提供一个包含 Iframe 的 html 片段。在我的例子中，用户将提供以下示例输入：

<iframe src="https://www.google.gr/?gfe_rd=cr&ei=tmlTWbjwJpTEXpSNhYgM&gws_rd=ssl#q=Hello"></iframe>
<iframe src="https://ellak.org/%cf%83%cf%85%ce%bc%ce%bc%ce%b5%cf%84%ce%bf%cf%87%ce%ae-%cf%83%cf%84%ce%bf-mediterranean-science-festival-2017/"></iframe>
<iframe src="http://example.com/xyx/samplepage.php"></iframe>

现在我有以下代码可以实现以下功能：

import React, { Component } from 'react';
import ReactQuill from 'react-quill';

import '../node_modules/quill/dist/quill.snow.css';


const CustomToolbar = () => (
  <div id="toolbar">
    <select className="ql-header">
      <option value="1"></option>
      <option value="2"></option>
      <option selected></option>
    </select>
    <button className="ql-bold"></button>
    <button className="ql-italic"></button>
    <button className="ql-strike"></button>
    <button className="ql-underline"></button>
    <select className="ql-color">
      <option value="red"></option>
      <option value="green"></option>
      <option value="blue"></option>
      <option value="orange"></option>
      <option value="violet"></option>
      <option value="#d0d1d2"></option>
      <option selected></option>
    </select>
    <button className="ql-iframe">
        <span>Insert Iframe</span>
    </button>    
  </div>
)

/**
 * Basic Editor
 */
class MyEditor extends Component {

    constructor(props) {
        super(props)
        this.state={text:''}

        var self=this;//Usefull to bind the method
        this.modules = {
          toolbar: {
            container: "#toolbar",
            'image-tooltip': true,
            'link-tooltip': true,
            handlers:{
              iframe: this.insertIframe.bind(self)
            }
          }
        }

        this.reactQuillRef=null;
    }

    onTextChange(value) { 
        this.setState({text:value})
    }

    insertIframe() {
      // console.log('Embedding video',this);
      let embedHtml = prompt('Please Enter the Html Embed');

      //I use regex to filter XSS
      if (embedHtml && embedHtml.match(/<iframe[^>]*?src="(?![^"]*(examle | google | ellak)).*?<\/iframe>/gim)) {
        const editor = this.reactQuillRef.getEditor();
        const index = editor.getSelection().index || 0;
        console.log(embedHtml);
        editor.clipboard.dangerouslyPasteHTML(index,embedHtml);
      }
    }

    render(){
      return (
        <div>
         <CustomToolbar />
         <ReactQuill
            ref = { (el) => { this.reactQuillRef = el; } }
            value = {this.state.body}
            onChange = {this.handleChange}
            modules = {this.modules}
            formats = {MyEditor.formats}
            theme="snow"
          />
        </div>
      )
    }

}

MyEditor.formats = [
  'header', 'font', 'size',
  'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent',
  'link', 'image', 'color',
]

export default MyEditor;

但是由于某些原因，编辑器没有显示我插入的 iframe。你们知道我将如何实现吗？

Answer 1

现在您可以将 insertEmbed 功能与视频标签一起使用：

const editor = this.reactQuillRef.getEditor();
const index = editor.getSelection().index || 0;
editor.insertEmbed(index, 'video', '^video_url^');

Quilljs React：嵌入具有 'src' 属性特定 url 的 iframe

Quilljs React: Embed iframes that have 'src' attributes specific urls

reactjs

quill