TinyMCE version 5 - upload image file_picker_callback

catyoh
Javascript
PHP

Dans le tuto "Développer un site de A à Z Jour 6", la version de TinyMCE est la 3. Depuis la 5, la fonction "file_browser_callback" est remplacée par la fonction "file_picker_callback" qui n'a pas de paramètre url dans les exemples trouvés sur le site.

Entre autres changements, l'editor.windowManager.open est remplacé par openUrl. Et il n'y a plus de script "tinymce_popup_js". Les popups sont appelées dialogs.

J'ai ajouté dans le code le nouvel editor.windowManager.openUrl.

tinymce.activeEditor.windowManager.openUrl({
title: 'Gallerie',
url: "http://localhost/www/Tuto/pilote/medias/index/", //intégration de code php impossible
width: 420,
height: 400,
resizable: 'yes',
inline: 'no',
close_previous: 'no'
});

Voici le code complet de tinymce init, qui fonctionne, sauf deux problèmes :

  • mon explorateur windows s'ouvre, masquant mon dialog. Je peux le refermer, mais comment shunter cette ouverture ?
  • comment récupérer l'id de mon post dans javascript ?

J'avoue avoir un peu du mal avec js... Quelqu'un pourrait m'aider ?

"tinymce.init({
    selector: 'textarea#inputcontent',
    language: 'fr_FR',
    language_url: '<?php echo Rooter::webroot("js/tinymce/langs/fr_FR.js"); ?>',
    browser_spellcheck: true,
    contextmenu: true,
    plugins : 'advlist autolink link image imagetools media advcode lists charmap print preview insertfile insertdatetime table advtable anchor',
    a11y_advanced_options: true,
    image_advtab: true,
    images_reuse_filename: true,
    images_upload_url: 'upload.php',
    toolbar: 'undo redo | bold italic underline strikethrough | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | link unlink | image | preview',
    file_picker_types: 'image media',

    file_picker_callback: function (cb, value, meta) {

        tinymce.activeEditor.windowManager.openUrl({
            title: 'Gallerie',
            url: "http://localhost/www/Tuto/pilote/medias/index/",
            width: 420,
            height: 400,
            resizable: 'yes',
            inline: 'no',
            close_previous: 'no'
        });

        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*', 'video/*');
        /*
        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();
    },
    content_style: 'body { font-family:Philosopher,Helvetica,Arial,sans-serif; font-size:20p }'
});
"

Merci

Aucune réponse