Menambahkan Upload Foto di TinyMCE Laravel

Muhammad Fajar, 13-07-2024

Script src:



Script:

$(document).ready(function() {
        tinymce.init({
            // paste_data_images: false,
            selector: 'textarea#body',
            skin: ($("body[data-bs-theme='dark']")[0] != undefined) ?
                "oxide-dark" : "oxide",
            content_css: ($("body[data-bs-theme='dark']")[0] != undefined) ?
                "dark" : "default",
            init_instance_callback : function(editor) {
                var freeTiny = document.querySelector('.tox .tox-notification--in');
                freeTiny.style.display = 'none';
            },
// IMAGE UPLOAD image_class_list: [{ title: 'img-fluid', value: 'img-fluid' }, ], height: 500, setup: function(editor) { editor.on('init change', function() { editor.save(); }); }, plugins: [ "advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table contextmenu paste imagetools" ], toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image ", image_title: true, automatic_uploads: true, images_upload_url: '/upload', file_picker_types: 'image', file_picker_callback: function(cb, 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.readAsDataURL(file); reader.onload = function() { var id = 'black-hive-studio-image-id-' + (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); cb(blobInfo.blobUri(), { title: file.name }); }; }; input.click(); } }); });