TinyMCE 的图像上传处理程序 Servlet/JSP [重复]

Question

我最近了解了 TinyMCE，并将其 4.3 版应用到我的项目中，以帮助保存描述。

出于同样的目的，它还需要上传图像并在编辑器中显示。

经过搜索，我发现创建一个 PHP 或 ASP.NET 项目对我来说很容易，其中有很多关于 TinyMCE 的帮助和插件，但对于 J2EE 或 Servlet/JSP 则没有或很少。

目前我的代码在这里：

TinyMCE 脚本：

tinymce.init({
            selector: '#description',
            plugins: "image link imagetools codesample emoticons paste autoresize textcolor table preview",
            menubar:false,
            statusbar: false,
            toolbar1: 'insertfile undo redo | styleselect | table | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
            toolbar2: 'preview | forecolor backcolor | codesample emoticons',
            automatic_uploads: true,
            paste_data_images: true,
            images_upload_base_path: '/uploaded/images',
            file_picker_handler: function (blobInfo, success, failure) {
                                var xhr, formData;

                                xhr = new XMLHttpRequest();
                                xhr.withCredentials = false;
                                xhr.open('POST', '/uploadFile');

                                xhr.onload = function() {
                                  var json;

                                  if (xhr.status != 200) {
                                    failure('HTTP Error: ' + xhr.status);
                                    return;
                                  }

                                  json = JSON.parse(xhr.responseText);

                                  if (!json || typeof json.location != 'string') {
                                    failure('Invalid JSON: ' + xhr.responseText);
                                    return;
                                  }

                                  success(json.location);
                                };

                                formData = new FormData();
                                formData.append('file', blobInfo.blob(), fileName(blobInfo));

                                xhr.send(formData);
                              }
        });

小服务程序： 创建并测试了FileUploader servlet，路径定义为/uploadFile。

servlet 工作正常并返回 JSON 对象 { location : '/uploaded/images/filename.jpg' }

但是这里的两个代码并没有互相交流。

问题是 TinyMCE 没有内置的文件资源管理器，可以在将其传递到文本区域之前单独上传，它正在获取图像的 URL 并将其直接传递到 <image> 标签而不上传实际文件。

谁能帮我获取 TinyMCE 异步图像上传功能？我尝试浏览this 和this 等给出的链接，但它似乎不起作用。

我也不知道它是如何被标记为How to upload files to server using JSP/Servlet?的，这是一个非常简单的部分，主要问题是How to call *FileUpload* servlet to upload images with TinyMCE in a Java Web App?

如果需要更多解释，请告诉我。

阿西夫

Answer 1

TinyMCE 网站（如您所说）有一个 PHP 示例。基本过程是 TinyMCE 将为每个图像创建一个单独的 HTTP POST。它会将该 HTTP POST 发送到您在 images_upload_url 中提供的 URL。

图像处理程序必须做任何需要做的事情来将图像“存储”在您的应用程序中。这可能意味着：

• 将项目存储在网络服务器上的文件夹中
• 将项目存储在数据库中
• 将项目存储在资产管理系统中

...无论您选择将图像存储在哪里，您的图像处理程序都需要返回一行 JSON，告诉 TinyMCE 图像的新位置。正如 TinyMCE 文档中所引用的，这可能看起来像：

{ location : '/uploaded/image/path/image.png' }

TinyMCE 然后会将图像的 src 属性更新为您返回的值。如果您在 init 中使用 images_upload_base_path 设置，它将被添加到返回的位置。 TinyMCE 页面有更多关于这一切的详细信息：

https://www.tinymce.com/docs/advanced/handle-async-image-uploads/