E
E
Eugene2018-07-11 13:46:39
TinyMCE
Eugene, 2018-07-11 13:46:39

TinyMCE how to get images from textarea?

Good day, please tell me how TinyMCE works.
1. I connected the editor to my project:

<script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=a5vmmhkgickdta83413kq8sm0igzmoexjzf9axhppdmqi6g3"></script>

2. Added settings:
<script>tinymce.init({selector: 'textarea', language_url : '/front/js/ru.js', file_browser_callback_types: 'file image media', images_upload_base_path: '/files/images/projects/<?=$projectItem['id']?>', plugins: 'image code table contextmenu paste',
    toolbar: 'undo redo | link image | code', 
image_title: true, 
  // enable automatic uploads of images represented by blob or data URIs
  automatic_uploads: false,
  // URL of our upload handler (for more details check: https://www.tinymce.com/docs/configure/file-image-upload/#images_upload_url)
  // images_upload_url: 'postAcceptor.php',
  // here we add custom filepicker only to Image dialog
  file_picker_types: 'image', 
  // and here's our custom image picker
  file_picker_callback: function(cb, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    
    // Note: In modern browsers input[type="file"] is functional without 
    // even adding it to the DOM, but that might not be the case in some older
    // or quirky browsers like IE, so you might want to add it to the DOM
    // just in case, and visually hide it. And do not forget do remove it
    // once you do not need it anymore.

    input.onchange = function() {
      var file = this.files[0];
      
      var reader = new FileReader();
      reader.onload = function () {
        // Note: Now we need to register the blob in TinyMCEs image blob
        // registry. In the next release this part hopefully won't be
        // necessary, as we are looking to handle it internally.
        var id = 'blobid' + (new Date()).getTime();
        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
        var base64 = reader.result.split(',')[1];
        var blobInfo = blobCache.create(id, file, base64);
        blobCache.add(blobInfo);

        // call the callback and populate the Title field with the file name
        cb(blobInfo.blobUri(), { title: file.name });
      };
      reader.readAsDataURL(file);
    };
    
    input.click();
  }
});</script>

3. The function in the script from the image receives Blob data, and tries to save all these letters and numbers in the mysql database.
4. Question: where to read how to write a handler that would receive this data and load it into a specific folder, I didn’t understand the documentation on the TinyMCE website. Need to parse images from text that comes from a textarea?
Or how it should actually work?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
E
Eugene, 2018-07-12
@kipajek

I did not understand a little how TinyMCE works, I connected the Responsive File Manager to it and it all worked!

V
Vitaly, 2018-07-11
@Anvi-Vt

If you upload a file via input, then you need to receive $_FILE in the controller

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question