Question

我使用tinyMCE编辑器插件与react 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中输入一个输入，然后使用onlick处理程序

抓取它

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

Answer 2

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={{
                image_advtab: true,
                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

你需要 image_advtab: true, 它允许您打开文件资源管理器或拖动到其输入 in tinymce docs

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

2 个答案: