java - TinyMCE 的图像上传处理程序 Servlet/JSP

Question

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

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

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

目前我的代码在这里:

TinyMCE Script:

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);
                              }
        });

Servlet: Created and tested FileUploader servlet with path defined as /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。

图像处理程序必须执行任何需要执行的操作才能将图像“存储”在应用程序中。这可能意味着:

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

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

{ 位置:'/uploaded/image/path/image.png' }

然后，TinyMCE 会将图像的 src 属性更新为您返回的值。如果您在 init 中使用 images_upload_base_path 设置，该设置将被添加到返回的位置之前。 TinyMCE 页面提供了有关所有这些的更多详细信息:

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