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

的Servlet：创建并测试了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。

图像处理程序必须做任何需要做的事情来存储＆＃34;应用程序中的图像。这可能意味着：

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

...无论您选择存储图像的位置，您的图像处理程序都需要返回一行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/

图像上传Handler Servlet / JSP for TinyMCE

1 个答案: