file_picker_callback usage

[kcaporaso]

Hello, Thanks for the bundle, made it simple to get started. Have you dove into the "file_picker_callback" stuff using this method of enabling the editor?

The only documentation I find about the file_picker_callback is using the tinymce.init({}) approach with the callback being defined as such and not using <tinymce-editor ...>:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  file_picker_callback: function(callback, value, meta) {
    // Provide file and text for the link dialog
    if (meta.filetype == 'file') {
      callback('mypage.html', {text: 'My text'});
    }

    // Provide image and alt text for the image dialog
    if (meta.filetype == 'image') {
      callback('myimage.jpg', {alt: 'My alt text'});
    }

    // Provide alternative source and posted for the media dialog
    if (meta.filetype == 'media') {
      callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
    }
  }
});

I've tried something like this, without any luck and of course then defining the callback function in my JS.

           ->add('ArticleContent', TinymceType::class, [
                'label' => 'Article Content HTML',
                'attr' => [
                    'toolbar' => 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                    'plugins' => 'advlist autolink lists link image charmap preview anchor pagebreak',
                    'file_picker_types' => 'image',
                    'file_picker_callback' => 'file_picker_callback',
                    'images_upload_route' => 'blog_upload_image',
                    'images_upload_handler' => 'tiny_image_upload_handler',
                    'images_upload_base_path' => '/uploads',
                ],
            ])

I never see an icon to give me the ability to pick a file form my local drive.

Just wondering if you've bothered working with uploading real images files from a file picker with your bundle and would you have an example of how you made it work?

Thank you.

[EmilePerron]

Hi Kevin!

As far as I'm aware, we haven't used the file picker with the TinyMCE web component used in this bundle before.

The way you're going about it (defining attributes to configure the editor) would've been my guess as well. We've definitely done this before to configure things like images_upload_url and that has worked without any issues (as a matter of fact, I did that exact implementation just yesterday!).

However, as you say, file_picker_callback isn't documented in TinyMCE's Web Component documentation, so perhaps they don't support it that way quite yet.

Their web component docs state that for options that aren't configurable via attributes, you should define a global configuration variable in Javascript and provide the name of that config variable via an attribute to your element. Here's the specific section of the docs that talks about it: https://www.tiny.cloud/docs/tinymce/6/webcomponent-ref/#setting-additional-configuration-options

And here's their example, for future onlookers for whom the docs may not exist anymore:

<script>
window.myConfig = {
  height: 500,
  template_selected_content_classes: 'selcontent',
  templates: [
    {
      title: 'My Template',
      description: 'This is my template.',
      content: '<p>Hello, <span class="selcontent">this statement will be replaced.</span></p>'
    }
  ],
  spellchecker_dialog: true,
  spellchecker_ignore_list: ['Ephox', 'Moxiecode']
};
</script>
<tinymce-editor
  config="myConfig"
  width="50%"
  toolbar="undo redo | bold italic | forecolor backcolor | template | alignleft aligncenter alignright alignjustify | bullist numlist | link | spellchecker"
  plugins="lists link searchreplace table template tinymcespellchecker wordcount"
></tinymce-editor>

Good luck, and please do let me know how it goes :)

[kcaporaso]

Hi Emile! Your reply is spot-on. I was able to add the following to the form type's attr[]:

 'config' => 'tinyMCEConfig',

Then in my JS add:

window.tinyMCEConfig = {
    file_picker_types: 'image',
    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();
    },
};

And now I get the file picker icon and can put images in the tinymce editor.
This code actually embeds the image data in the content like so:

<img src="data:image/png;base64....">

Big help, thank you!

[EmilePerron]

Outstanding! 🎉 Glad I could help!