NebulaPanel - Control Interface

✏️ Editing: image.js

$('.btn_upload_dropzone').click(function(e) {
    $('#file_upload_dropzone').click();
});
$('#file_upload_dropzone').change(function(e) {
    $('#form_upload_dropzone').submit();
    $('#form_upload_dropzone').addClass('loading');
});

let editor = top.tinymce.activeEditor, selection = editor.selection, dom = editor.dom;
let selectedElm = selection.getNode();

let list_selected_image = [];
$(document).ready(function(){
    $('.btn_insert_image').click(function(e) {
        e.preventDefault();

let src = $(this).attr('src');
        let caption = $(this).data('caption');
        let width = $(this).data('width');
        let height = $(this).data('height');

let img = '<img src="'+src+'" alt="'+caption+'" width="'+width+'" height="'+height+'" />';

if(caption){
 img += '<figcaption>'+caption+'</figcaption>';
 }

let content = '<figure class="expNoEdit">'+img+'</figure>';
 editor.execCommand('mceInsertContent', false, content);
 editor.undoManager.add();
 editor.save();

editor.windowManager.close();
 return false;
 });
 $('#btn_insert_mul_image').click(function(e) {
 e.preventDefault();
 if(list_selected_image.length <= 0){
 return false;
 }
 let content = '';
 list_selected_image.map(id => {
 let ele = $('#image_mce_'+id);

let src = $(ele).attr('src');
            let caption = $(ele).data('caption');
            let width = $(ele).data('width');
            let height = $(ele).data('height');

let img = '<img src="'+src+'" alt="'+caption+'" width="'+width+'" height="'+height+'" />';

if(caption){
 img += '<figcaption>'+caption+'</figcaption>';
 }

content += '<figure class="expNoEdit">'+img+'</figure>';
 });

editor.execCommand('mceInsertContent', false, content);
        editor.undoManager.add();
        editor.save();

editor.windowManager.close();
        return false;
    });
    $('.checkbox-select-image').change(function (e){
        e.preventDefault();

if($(this)[0].checked === true){
            list_selected_image.push($(this).val());
        }else{
            let newList = [];
            list_selected_image.map(id => {
                if(id != $(this).val()){
                    newList.push(id);
                }
            })
            list_selected_image = newList;
        }
        if(list_selected_image.length > 0){
            $('#btn_insert_mul_image').css('display', 'block');
        }else{
            $('#btn_insert_mul_image').css('display', 'none');
        }
    });
    $('#btn-submit-form-embed').click(function (e){
        e.preventDefault();
        let content = $('textarea[name=embedLink]').val();
        editor.execCommand('mceInsertContent', false, content);
        editor.undoManager.add();
        editor.save();

editor.windowManager.close();
        return false;
    });

let processing = false;
    $('#btn_exe_change_caption').click(function(e){
        if(processing === true){
            return false
        }
        processing = true;

e.preventDefault();
        let data = {
            id: $('input[name=inputId]').val(),
            caption: $('input[name=inputCaption]').val(),
            _csrf: $('input[name=_csrf]').val(),
        }
        $.ajax({
            url: '/tinymce/change-image-caption.html',
            type: 'post',
            dataType: 'json',
            data: data,
            success: function(resp){
                if(resp.error == 0){
                    $('#image_mce_'+data.id).attr('data-caption', data.caption);
                    $('#title_image_'+data.id).html(data.caption);
                }
                $('#btn_off_change_caption').trigger('click');
            },
            complete: function(){
                processing = false;
            }
        })
    });
    $('#btn_off_change_caption').click(function (e){
        e.preventDefault();
        $('input[name=inputId]').val('');
        $('input[name=inputCaption]').val('');
        $('.popup-edit-caption').css('display', 'none');
        return false;
    });

$('.btn_edit_caption').click(function(e){
        e.preventDefault();
        let imageId = $(this).data('id');
        let caption = $('#image_mce_'+imageId).data('caption');

$('input[name=inputId]').val(imageId);
        $('input[name=inputCaption]').val(caption);

$('.popup-edit-caption').css('display', 'block');
        return false;
    });

//thừa
    $('.editable').editable();

$('.tab_btn .btn').click(function(){
        var id = $(this).attr('href');
        if(id=='#tab-1' && $(this).hasClass('red')) $('#file_upload_dropzone').click();
        $('.tab_btn .btn.red').removeClass('red').addClass('blue');
        $(this).addClass('red').removeClass('blue');
        $('.tab_content').addClass('hide');
        $(id).removeClass('hide');

if(id=='#tab-2' || id=='#tab-3') {
            if($('.dz-image-preview').length>0) {
                var is_done = true;
                $('.dz-image-preview').each(function(){if(!$(this).hasClass('dz-success') && !$(this).hasClass('dz-error')) is_done=false;});
                if(is_done) {window.location.href = '?mod=tinymce&act=image&news_id='+news_id+id.replace('#tab-', '&tab='); return true;}
            }
        }

return false;
    });

$('body').on('click', '.btn_Insert', function(event) {
 // $('.btn_Insert').click(function(){
 if(!$(this).parents('.meet-our-team').hasClass('s0')) {
 $(this).parents('.meet-our-team').find('svg:eq(0)').click(); return false;
 }
 let src = $(this).attr('href');
 let caption = $(this).parent().find('.editable').text();
 let width = $(this).attr('data-width');
 let height = $(this).attr('data-height');
 let _width = width; let _height = height;
 if(width>max_width) {
 _width = max_width;
 _height = parseInt(height/(width/max_width));
 }
 let img = '<img src="'+src+'" width="'+_width+'" height="'+_height+'" alt="'+caption+'" />';
 let content = '';

if(caption) img += '<figcaption>'+caption+'</figcaption>';
 content = '<figure class="expNoEdit">'+img+'</figure>';

editor.execCommand('mceInsertContent', false, content);
        editor.undoManager.add();
        editor.save();

editor.windowManager.close();
        return false;
    });

$('#btn_insert_content').click(function(){
 var content = '';
 $.each(array_image, function( key, value ) {
 let e = $('#oneImage_'+value).find('.btn_Insert');
 let src = e.attr('href');
 let caption = e.parent().find('.editable').text();
 let width = e.attr('data-width');
 let height = e.attr('data-height');
 let _width = width; let _height = height;
 if(width>max_width) {
 _width = max_width;
 _height = parseInt(height/(width/max_width));
 }
 let img = '<img src="'+src+'" width="'+_width+'" height="'+_height+'" alt="'+caption+'" />';
 if(caption) img += '<figcaption>'+caption+'</figcaption>';
 content += '<figure class="expNoEdit">'+img+'</figure>';
 });
 editor.execCommand('mceInsertContent', false, content);
 editor.undoManager.add();
 editor.save();

editor.windowManager.close();
        return false;
    });
});

✏️ Editing: image.js

🚀 NebulaPanel