具有React的TinyMCE编辑器无法看到上传的图像

时间:2018-11-19 04:59:13

标签: javascript reactjs tinymce tinymce-4

我使用带有react js的tinyMCE编辑器插件。我可以将文件从本地计算机上传到编辑器,但是当单击“编辑”按钮再次打开编辑器时,我不再看到上传的图像。换句话说,上传图像后再次打开编辑器时,我无法访问图像。有什么建议吗?

<div className="form-group">
      <input id="my-file" type="file" name="my-file" style={{display:"none"}} onChange="" />
        <TinyMCE
          content={editorContent}
          onChange={handleEditorState}
          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,

              }}
        />
      </div>

0 个答案:

没有答案