Tinymce 图片上传 - 保存到数据库

Question

我已将我的 TinyMCE 配置为使用 images_upload_url 和 images_upload_handler 到 post 到将选定的图像添加到 server-side 页面，该页面将图像保存到我的服务器上的某个位置。此外，此 server-side 页面还将图像的文件名保存为数据库中的一条记录。

然后我有另一个 server-side 页面读取数据库并构建一个 JSON 已上传图像列表。然后使用 image_list 将该 JSON 数据拉入我的 Tinymce 实例，这样我就可以轻松地重复使用以前上传的图像，而不必重新上传相同的图像不止一次。

我的tiny.init()的具体行是：

image_list: 'processes/image-list.php',
image_class_list: [
    {title: 'None', value: ''},
    {title: 'Full width image', value: 'img-responsive'}
  ],
images_upload_url: 'processes/upload-image.php',
images_upload_handler: function (blobInfo, success, failure) {
    var xhr, formData;
  
    xhr = new XMLHttpRequest();
    xhr.withCredentials = false;
    xhr.open('POST', 'processes/upload-image-free.asp');
  
    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(), blobInfo.filename());
  
    xhr.send(formData);
},
image_dimensions: false,

所有这些都按预期工作。

我还想将图片的描述保存到数据库中，这样就可以在之前上传的图片的 JSON 数据中将其作为标题输出。

由于上传功能只允许从文件系统中选择图像，所以我无法使用上传功能：

所以我想我可以利用图像的 替代描述 字段 feature/modal 但这必须通过 JavaScript 触发的事件来完成在提交图片 feature/modal 时触发，该图片将替代描述输入字段中的内容 POST 发送到可以更新数据库的服务器端页面。

除非有另一种方法，否则有人知道我如何在图像功能中的 'save' 按钮上定位 'click' 以在图像 feature/modal 消失之前提取替代描述，并且提取输入字段内容？

从那里我应该能够弄清楚如何将其转到 server-side 页面以更新数据库。

非常感谢

Answer 1

我已经设法解决了这个问题，所以发布了一个解决方案来帮助其他人 - 虽然这不仅仅是一个 hack。

加载 tiny.init 后，首先在我的表单页面上使用以下内容：

document.addEventListener('keyup', logKey);

  function logKey(e) {
    labels = document.querySelectorAll(".tox-label");
    for (i = 0; i < labels.length; ++i) {
      if (labels[i].textContent == "Alternative description"){
        imageDescription = document.getElementById(labels[i].htmlFor).value;
      }
    }
  };

这遍历所有具有 class .toxlabel 的元素（在本例中为标签），如果 textContent 匹配“替代描述”，则在名为 [=24 的变量中捕获值=].

然后在我的 tiny.init 中我有以下内容：

editor.on('ExecCommand', function(e) {
        if (e.command == "mceUpdateImage"){
            var http = new XMLHttpRequest();
            var params = encodeURI('desc=' + imageDescription);
            http.open('POST', 'processes/upload-image-description.asp', true);

            http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

            http.onreadystatechange = function() {//Call a function when the state changes.
                if(http.readyState == 4 && http.status == 200) {
                    console.log(http.responseText);
                }
            }
            http.send(params);
        }
      });

此代码在 mceUpdateImage 模式关闭时执行，它获取存储在 imageDescription 变量中的值并将其发布到更新数据库的服务器端页面。

我相信有更简洁的方法，但它们需要更多的 TinyMce 理解。

Tinymce 图片上传 - 保存到数据库

Tinymce Image upload - save to database

javascript

tinymce