Quilljs Réagir: Intégrer les iframes ayant des attributs spécifiques à 'src'

Question

Sur Quilljs, j'essaie d'insérer un Iframe qui fournira un fragment html contenant un Iframe. Dans mon cas, l'utilisateur fournira les entrées exemple suivant:

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

Pour l'instant je le code suivant qui permet les fonctionnalités suivantes:

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; 

Mais pour une raison quelconque, l'éditeur ne n ot montre l'iframe que j'insère. Est-ce que vous avez des Idées comment j'achèverai cela?

Answer 1

Pour l'instant, vous pouvez utiliser la fonction insertEmbed avec la balise vidéo:

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