Javascript Tinymce使用文件选择器回调和图像上传器获取图像描述_Javascript_Tinymce 4

Javascript Tinymce使用文件选择器回调和图像上传器获取图像描述

javascript

Javascript Tinymce使用文件选择器回调和图像上传器获取图像描述,javascript,tinymce-4,Javascript,Tinymce 4,TL:DR我正在尝试使用javascript获取image\u description字段的值，以通过我的post xhr请求下面的原始问题我正在使用文件\u选择器\u回调类型映像我在我的中启用了图像描述输入字段 tinymce.init({ ...., image_description: true, ... 一切都很好上传，但我想通过图像描述字段以及存储在数据库中。但我无法获取数据这里是我的两个功能，直接从tinymce网站获取 file_pic

TL:DR我正在尝试使用javascript获取image\u description字段的值，以通过我的post xhr请求

下面的原始问题

我正在使用文件\u选择器\u回调类型映像

我在我的中启用了图像描述输入字段

tinymce.init({
     ....,
     image_description: true,
     ...

一切都很好上传，但我想通过图像描述字段以及存储在数据库中。但我无法获取数据

这里是我的两个功能，直接从tinymce网站获取

  file_picker_callback: function(cb, value, meta) {

    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');

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

      console.log( meta ); //I thought it might be here in the meta bt it isn't

     console.log( $('#mceu_62').val() ); //I tried to get it from its id but it returns undefined i think that field is created after this function is created.



      var id = file.name;
      var blobCache = tinymce.activeEditor.editorUpload.blobCache;
      var blobInfo = blobCache.create(id, file);
      blobCache.add(blobInfo);


      // call the callback and populate the Title field with the file name
      cb(blobInfo.blobUri(), { title: file.name });
    };

    input.click();
  },
  images_upload_handler: function (blobInfo, success, failure) {
      var xhr, formData;

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

      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());
      formData.append('description', /*but i can't get the value*/);

      xhr.send(formData);
    }

@卡尔·莫里森（Karl Morrisons）

尝试以下方法获得价值：

images_upload_handler: function (blobInfo, success, failure) {
      var xhr, formData;

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

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


      var description = '';

      jQuery(tinymce.activeEditor.dom.getRoot()).find('img').not('.loaded-before').each(
    function() {
        description = $(this).attr("alt");
        $(this).addClass('loaded-before');
    });

      formData = new FormData();
      formData.append('file', blobInfo.blob(), blobInfo.filename());
      formData.append('description', description); //found now))

      xhr.send(formData);
    }

以下内容可能会对您有所帮助


init（{选择器：'textarea'}）；
接下来，获得一个免费的TinyMCE云API密钥！

返回body/text区域的数据我正在寻找图像描述弹出字段的数据这是什么魔法，你知道了。我没有意识到描述窗口字段是alt标记。“之前加载的”在哪里？不知道在哪里。我还以为你在骗我呢，邦蒂，你赚的不错。非常感谢。当临时URL被添加时，虽然“get data:image/jpeg；base64，undefined net:：ERR_INVALID_URL”抛出了一个错误（你知道怎么做吗？@artSir answer再次升级）。尝试新代码wersion@artSir“加载之前”-我的自定义类。在我们处理完图片之后，我们应该添加这个类。如果图片中没有类，则这是最后下载的图片。当我们想将多个图像加载到articleTrolling时，此功能是否适用于这种情况？这只是小菜一碟

<!DOCTYPE html>
<html>
<head>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
<textarea>Next, get a free TinyMCE Cloud API key!</textarea>
</body>
</html>