Quilljs反应：嵌入具有'src'属性特定网址的iframe

在Quilljs上我试图插入一个Iframe，它将提供一个包含Iframe的html代码片段。在我的情况下，用户将提供以下例子输入：Quilljs反应：嵌入具有'src'属性特定网址的iframe

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

但由于某种原因，编辑器没有n不显示我插入的iframe。你们有没有想法，我会如何实现这一目标？

来源

2017-06-28 Dimitrios Desyllas

现在你可以使用insertEmbed功能与视频标签：

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

来源

2017-07-03 07:08:52

Quilljs反应：嵌入具有'src'属性特定网址的iframe

回答

相关问题