Tinymce получить описание изображения с помощью выбора файлов обратного вызова и загрузки изображений

Question

Tinymce получить описание изображения с помощью выбора файлов обратного вызова и загрузки изображений

TL: DR я пытаюсь получить значение поля image_description с помощью javascript, чтобы пропустить его мой запрос post xhr

Оригинальный вопрос ниже

Я использую изображение типа file_picker_callback
https://www.tinymce.com/docs/configure/file-image-upload/#file_picker_callback

Я включил поле ввода image_description в моем

tinymce.init({

     ....,

     image_description: true,

     ...

Все загружается нормально, но я хочу передать поле image_description, а также сохранить в ДБ. Но я не могу захватить данные

Вот мои две функции, взятые непосредственно с сайта 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

518 2

javascript tinymce-4

2 ответов:

Comments

Ничего не найдено.

Nutscracker · Accepted Answer · 2017-04-05 12:41:49

Попробуйте это, чтобы получить значение:

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

Tijo John · Accepted Answer · 2017-04-04 10:33:47

Возможно, вам поможет следующее https://www.tinymce.com

<!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>