使用React的TinyMCE编辑器无法访问本地文件

Question

Im使用tinyMCE编辑器插件和反应js。我试图从我的本地机上传文件到编辑器，然后到S3。我可以将照片拖放到编辑器中，但是，当单击插入照片按钮时，我无法访问我的文件系统。有什么建议么？

class Editor extends React.Component{ 

    handleEditorChange = (e) => { 
     console.log('e',e); 
     console.log('Content was updated:', e.target.getContent()); 
    } 


    render(){ 
     return(
      <TinyMCE 
       content="<p>This is the initial content of the editor</p>" 

       config={{ 
       height:600, 
       paste_data_images: true, 
       plugins: [ 
        'advlist autolink lists link image charmap print preview anchor', 
        'searchreplace wordcount visualblocks code fullscreen', 
        'insertdatetime media table contextmenu paste code' 
        ], 
        toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',    file_picker_types: 'file image media', 
       paste_data_images:true, 
       file_browser_callback_types: 'image', 
       images_upload_handler: function (blobInfo, success, failure) { 
        console.log('blobInfo',blobInfo); 
      }, 

       selector: 'textarea', // change this value according to your HTML 
       file_picker_callback: function(callback, value, meta) { 
       if (meta.filetype == 'file') { 
        //callback('mypage.html', {text: 'My text'}); 
       } 
       if (meta.filetype == 'image') { 

       } 
       if (meta.filetype == 'media') { 
        //callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'}); 
        } 
       } 
       }} 

       onChange={this.handleEditorChange} 
      /> 

     ) 
    } 
} 

export default Editor 

Answer 1

我写了一个解决办法的黑客。放在HTML的输入，然后用点击数处理器

import React from 'react'; 
import TinyMCE from 'react-tinymce'; 


class Editor extends React.Component{ 

    handleEditorChange = (e) => { 
     console.log('e',e); 
     console.log('Content was updated:', e.target.getContent()); 
    } 


    render(){ 

     return(
      <div> 
      <input id="my-file" type="file" name="my-file" style={{display:"none"}} onChange="" /> 

      <TinyMCE 
       content="<p>This is the initial content of the editor</p>" 

       config={{ 
       // selector: '.post-article #' + editorId, 
       height: 400, 
       plugins: [ 
        'advlist autolink lists link image charmap print preview anchor', 
        'searchreplace wordcount visualblocks code fullscreen', 
        'insertdatetime media table contextmenu paste code' 
       ], 
       toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', 
       content_css: '//www.tinymce.com/css/codepen.min.css', 
       file_browser_callback_types: 'image', 
       file_picker_callback: function (callback, value, meta) { 
       if (meta.filetype == 'image') { 
        var input = document.getElementById('my-file'); 
        input.click(); 
        input.onchange = function() { 
         var file = input.files[0]; 
         var reader = new FileReader(); 
         reader.onload = function (e) { 
          console.log('name',e.target.result); 
          callback(e.target.result, { 
           alt: file.name 
          }); 
         }; 
         reader.readAsDataURL(file); 
        }; 
       } 
      }, 
       paste_data_images: true, 

       }} 

       onChange={this.handleEditorChange} 
      /> 
     </div> 

     ) 
    } 
} 

export default Editor 

抓住它