Hide source input field or change shown url in TinyMCE

Viewed 339

Good day all.

I wanna create direct upload of images via tiny.

https://codepen.io/Cere6ellum/pen/qBdRGmx

    tinymce.init({
  selector: '#editor',
  // images_dataimg_filter: function(img) {
  //     return img.hasAttribute('internal-blob');
  // },

  plugins: 'image code',
  toolbar: 'undo redo | link image | code',
  /* enable title field in the Image dialog*/
  image_title: false,
  image_dimensions: false,
  image_description: false,
  automatic_uploads: false,

  /*here we add custom filepicker only to Image dialog*/
  file_picker_types: 'image',
  /* and here's our custom image picker*/
  file_picker_callback: function (callback, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');

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

      var reader = new FileReader();
      reader.onload = function () {

        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 */
        callback(blobInfo.blobUri(), { title: file.name });

      };
      reader.readAsDataURL(file);
    };

    input.click();
  }
});

How i can hide shown address of added image in the input field (source)?

Or if it's impossible, how i can change this shown (blob:https://) address to something like /images/75bcd4b4-217c-4d8b-91e4-425736223cd1

Or, if it's impossible too, how i can remove input field of source? Can i place only "add image" button in the form?

0 Answers
Related