带有 React 的 TinyMCE 编辑器无法访问本地文件

Question

Im using the tinyMCE editor plugin with react js. Im trying to upload files from my local machine to the editor and then to s3. I can drag and drop photos into the editor, however, when I click insert photo button i cannot gain access to my file system. Any suggestions?

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

I wrote a hack for a workaround. Put an input in the html and then grabbed it with an onlick handler

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

Answer 3

This is my updated code. version "@tinymce/tinymce-react": "^3.13.0"

import React, { useRef } from "react";
import { Editor } from "@tinymce/tinymce-react";

export default function App() {
  const editorRef = useRef(null);
  const log = () => {
    if (editorRef.current) {
      console.log(editorRef.current.getContent());
    }
  };
  return (
    <>
      <div style={{ marginTop: 20 }}>
        <Editor
          apiKey="your api key"
          onInit={(evt, editor) => {
              editorRef.current = editor
          }}
          initialValue="<p>This is the initial content of the editor.</p>"
          init={{
            height: 300,
            menubar: true,
            /* enable title field in the Image dialog*/
            image_title: true,
            plugins: [
              "advlist autolink lists link image charmap print preview anchor",
              "searchreplace visualblocks code fullscreen",
              "insertdatetime media table paste image code help wordcount",
            ],
            toolbar:
              "undo redo | formatselect | " +
              "bold italic backcolor | alignleft aligncenter " +
              "alignright alignjustify | bullist numlist outdent indent | " +
              "removeformat | help",
            file_picker_callback: function (cb, value, meta) {
              var input = document.createElement("input");
              input.setAttribute("type", "file");
              input.setAttribute("accept", "image/*");
              input.onchange = function () {
                var file = this.files[0];

                var reader = new FileReader();
                reader.onload = function () {
                  var id = "blobid" + new Date().getTime();
                  var blobCache = editorRef.current.editorUpload.blobCache;
                  var base64 = reader.result.split(",")[1];
                  var blobInfo = blobCache.create(id, file, base64);
                  blobCache.add(blobInfo);

                  /* call the callback and populate the Title field with the file name */
                  cb(blobInfo.blobUri(), { title: file.name });
                };
                reader.readAsDataURL(file);
              };
              input.click();
            },
            content_style:
              "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
          }}
        />
        <button onClick={log}>Log editor content</button>
      </div>
    </>
  );
}