Giter Club home page Giter Club logo

Comments (2)

butschster avatar butschster commented on August 17, 2024

Source files

compiled version
https://github.com/KodiCMS/kodicms-laravel/tree/dev/public/cms/libs/elfinder

Javascript source
https://github.com/KodiCMS/kodicms-laravel/tree/dev/resources/assets/js/elfinder

from elfinder-nightly-src.

nao-pon avatar nao-pon commented on August 17, 2024

@butschster sorry toooo late.

elFinder 2.1 became easy integration with ACE editor in config commandsOptions.edit.editors

commandsOptions : {
    edit : {
        editors : [
            {
                // Do not set `mimes` for support everything kind of text file
                load : function(textarea) {
                    if (typeof ace !== 'object') {
                        $('head').append($('<script>').attr('src', 'include/js/ace-min-noconflict/ace.js'));
                        $('head').append($('<script>').attr('src', 'include/js/ace-min-noconflict/ext-modelist.js'));
                        $('head').append($('<script>').attr('src', 'include/js/ace-min-noconflict/ext-settings_menu.js'));
                        $('head').append($('<script>').attr('src', 'include/js/ace-min-noconflict/ext-language_tools.js'));
                    }
                    var self = this, editor, editorBase, mode,
                    ta = $(textarea),
                    taBase = ta.parent(),
                    dialog = taBase.parent(),
                    id = textarea.id + '_ace',
                    mimeMode = {
                        'text/x-php'              : 'php',
                        'application/x-php'       : 'php',
                        'text/html'               : 'html',
                        'application/xhtml+xml'   : 'html',
                        'text/javascript'         : 'javascript',
                        'application/javascript'  : 'javascript',
                        'text/css'                : 'css',
                        'text/x-c'                : 'c_cpp',
                        'text/x-csrc'             : 'c_cpp',
                        'text/x-chdr'             : 'c_cpp',
                        'text/x-c++'              : 'c_cpp',
                        'text/x-c++src'           : 'c_cpp',
                        'text/x-c++hdr'           : 'c_cpp',
                        'text/x-shellscript'      : 'sh',
                        'application/x-csh'       : 'sh',
                        'text/x-python'           : 'python',
                        'text/x-java'             : 'java',
                        'text/x-java-source'      : 'java',
                        'text/x-ruby'             : 'ruby',
                        'text/x-perl'             : 'perl',
                        'application/x-perl'      : 'perl',
                        'text/x-sql'              : 'sql',
                        'text/xml'                : 'xml',
                        'application/docbook+xml' : 'xml',
                        'application/xml'         : 'xml',
                        'text/x-markdown'         : 'markdown'
                    },
                    resize = function(){
                        dialog.height($(window).height() * 0.9).trigger('posinit');
                        taBase.height(dialog.height() - taBase.prev().outerHeight(true) - taBase.next().outerHeight(true) - 8);
                    };

                    mode = ace.require('ace/ext/modelist').getModeForPath(self.file.name).name;
                    if (mode === 'text') {
                        if (mimeMode[self.file.mime]) {
                            mode = mimeMode[self.file.mime];
                        }
                    }

                    taBase.prev().append(' (' + self.file.mime + ' : ' + mode.split(/[\/\\]/).pop() + ')');

                    $('<div class="ui-dialog-buttonset"/>').css('float', 'left')
                    .append(
                        $('<button>TextArea</button>')
                        .button()
                        .on('click', function(){
                            if (ta.data('ace')) {
                                ta.data('ace', false);
                                editorBase.hide();
                                ta.val(editor.session.getValue()).show().focus();
                                $(this).find('span').text('AceEditor');
                            } else {
                                ta.data('ace', true);
                                editor.setValue(ta.hide().val(), -1);
                                editorBase.show();
                                editor.focus();
                                $(this).find('span').text('TextArea');
                            }
                        })
                    )
                    .append(
                        $('<button>Ace editor setting</button>')
                        .button({
                            icons: {
                                primary: 'ui-icon-gear',
                                secondary: 'ui-icon-triangle-1-e'
                            },
                            text: false
                        })
                        .on('click', function(){
                            editor.showSettingsMenu();
                        })
                    )
                    .prependTo(taBase.next());

                    editorBase = $('<div id="'+id+'" style="width:100%; height:100%;"/>').text(ta.val()).insertBefore(ta.hide());

                    ta.data('ace', true);
                    editor = ace.edit(id);
                    ace.require('ace/ext/settings_menu').init(editor);
                    editor.$blockScrolling = Infinity;
                    editor.setOptions({
                        theme: 'ace/theme/monokai',
                        mode: 'ace/mode/' + mode,
                        wrap: true,
                        enableBasicAutocompletion: true,
                        enableSnippets: true,
                        enableLiveAutocompletion: false
                    });
                    editor.commands.addCommand({
                        name : "saveFile",
                        bindKey: {
                            win : 'Ctrl-s',
                            mac : 'Command-s'
                        },
                        exec: function(editor) {
                            self.doSave();
                        }
                    });
                    editor.commands.addCommand({
                        name : "closeEditor",
                        bindKey: {
                            win : 'Ctrl-w|Ctrl-q',
                            mac : 'Command-w|Command-q'
                        },
                        exec: function(editor) {
                            self.doCancel();
                        }
                    });
                    dialog.on('resize', function(){ editor.resize(); });
                    $(window).on('resize', function(e){
                        if (e.target !== this) return;
                        dialog.data('resizeTimer') && clearTimeout(dialog.data('resizeTimer'));
                        dialog.data('resizeTimer', setTimeout(function(){ resize(); }, 300));
                    });
                    resize();
                    editor.resize();

                    return editor;
                },
                close : function(textarea, instance) {
                    instance.destroy();
                    $(textarea).show();
                },
                save : function(textarea, instance) {
                    if ($(textarea).data('ace')) {
                        $(textarea).val(instance.session.getValue());
                    }
                },
                focus : function(textarea, instance) {
                    instance.focus();
                }
            }
        ]
    }
}

Thanks! 👍

from elfinder-nightly-src.

Related Issues (3)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.