使用TinyMCE将图像上传到后端

时间:2020-06-10 19:17:17

标签: reactjs image flask tinymce blob

我正在尝试将富文本编辑器TinyMCE用于当前正在使用的博客平台。 我也在Flask后端使用React。一种 用户应该能够使用编辑器创建博客条目,也可以使用/上传图像。 我已经完成所有设置,但是我不知道如何将图像存储在后端中,因此您可以保存包含所有内容的博客。 我从他们的文档中获得了此回调函数,但我真的不了解那里发生了什么,是否足以将文件对象发送到后端并将其存储在数据库中。

sudo composer install

这是console.log(文件)的输出

       file_picker_callback: function (cb, value, meta) {
                var input = document.createElement("input");
                input.setAttribute("type", "file");
                input.setAttribute("accept", "image/png , image/jpg");

                input.onchange = function () {
                  var file = this.files[0];

                  var reader = new FileReader();
                  reader.onload = function () {
                    var id = "blobid" + new Date().getTime();
                    var blobCache =
                      window.tinymce.activeEditor.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);
                  console.log(file);
                };

0 个答案:

没有答案