Refactoring Ace Editors

Question

I am trying to simplify the following code shown at the bottom of the question. The issues here are the following:

• How to make it so the Ace Editor is created once, instead of once per editor.
• For the setValue of the Ace Editor, each editor pulls in their specific information from an object that was returned from the backend (I have no access to the backend). You can see the object in the code as widgetEditor and featureEditor.
• The code works correctly as it is now, but I believe it can be simplified a lot.
• The only variables between the Ace editors are the setValue, the getSession and the ace.edit option.
• I checked out the following link which helped with the ace.edit option but did not with the other 2 values Can Ace Editor support multiple code editors in one page?

So, what can be done to lower the amount of code here in a way that still makes ace editor work correctly. Basically, on the same page it shows 10 ace editors, 3 for the widgetEditor object and 7 for the featureEditor (As seen on the code).

    $.post(engineUrl, {
        systemDevCall: true,
        engineApiEnabled: engineApiEnabled,
        engineDataSplitter: engineDataSplitter,
        systemDevType: 'widgetCall', 
        systemDevValue: [widgetIdSelected,widgetSelected]
    }, 
    function(data) {
        tabSelected = 'widget';
        if (engineApiEnabled != 1) {
            var dataSplit = data.split(engineDataSplitter);
            var data = dataSplit[1];
        }

        // Parse Data
        var widgetEditor = JSON.parse(data);


        // PHP Editor
        phpeditor = ace.edit("phpcode");
        phpeditor.$blockScrolling = Infinity;
        phpeditor.setValue(widgetEditor.php);
        phpeditor.setShowPrintMargin(false);
        phpeditor.setTheme("ace/theme/monokai");
        phpeditor.getSession().setMode("ace/mode/php");
        phpeditor.setFadeFoldWidgets();
        phpeditor.session.getScrollTop();
        phpeditor.session.setScrollTop(1);
        phpeditor.session.getScrollLeft();
        phpeditor.session.setScrollLeft(1);
        phpeditor.focus();
        phpeditor.navigateFileStart();

        // CSS Editor
        csseditor = ace.edit("csscode");
        csseditor.$blockScrolling = Infinity;
        csseditor.setValue(widgetEditor.css);
        csseditor.setShowPrintMargin(false);
        csseditor.setTheme("ace/theme/monokai");
        csseditor.getSession().setMode("ace/mode/css");
        csseditor.setFadeFoldWidgets();
        csseditor.session.getScrollTop();
        csseditor.session.setScrollTop(1);
        csseditor.session.getScrollLeft();
        csseditor.session.setScrollLeft(1);
        csseditor.focus();
        csseditor.navigateFileStart();

        // JAVASCRIPT Editor
        jseditor = ace.edit("jscode");
        jseditor.$blockScrolling = Infinity;
        jseditor.setValue(widgetEditor.js);
        jseditor.setShowPrintMargin(false);
        jseditor.setTheme("ace/theme/monokai");
        jseditor.getSession().setMode("ace/mode/javascript");
        jseditor.setFadeFoldWidgets();
        jseditor.session.getScrollTop();
        jseditor.session.setScrollTop(1);
        jseditor.session.getScrollLeft();
        jseditor.session.setScrollLeft(1);
        jseditor.focus();
        jseditor.navigateFileStart();                
      });
    });

    $('#featureSelection').on('change',function() {
    $('#featureSelection').addClass('selectOption');
    $('#widgetSelection').removeClass('selectOption');
    $('.featureListOptions').show();
    if ( !$('.featureListOptions li').hasClass('active') ) {
        $('li.memberProfileHeader').addClass('active');  
    }
    var featureSelected = $(this).val();
    var featureIdSelected = $('option:selected', this).data('id');

    selectedOption = featureIdSelected;
    selectSelected = '#featureSelection';

    $('li.memberProfileHeader').on('click',function() {
        memberProfileHeaderCodeEditor.focus();
        memberProfileHeaderCodeEditor.navigateFileStart();
    });

    $('li.memberProfilePage').on('click',function() {
        memberProfilePageCodeEditor.focus();
        memberProfilePageCodeEditor.navigateFileStart();
    });

    $('li.memberProfileFooter').on('click',function() {
        memberProfileFooterCodeEditor.focus();
        memberProfileFooterCodeEditor.navigateFileStart();
    });

    $('li.searchResultHeader').on('click',function() {
        searchResultHeaderCodeEditor.focus();
        searchResultHeaderCodeEditor.navigateFileStart();
    });

    $('li.searchResultPage').on('click',function() {
        searchResultPageCodeEditor.focus();
        searchResultPageCodeEditor.navigateFileStart();
    });

    $('li.searchResultFooter').on('click',function() {
        searchResultFooterCodeEditor.focus();
        searchResultFooterCodeEditor.navigateFileStart();
    });

    $('li.detailPage').on('click',function() {
        detailPageCodeEditor.focus();
        detailPageCodeEditor.navigateFileStart();
    });       

    $.post(engineUrl, {
        systemDevCall: true,
        engineApiEnabled: engineApiEnabled,
        engineDataSplitter: engineDataSplitter,
        systemDevType: 'featureCall', 
        systemDevValue: [featureIdSelected,featureSelected]
    }, 
    function(data) {
        tabSelected = 'feature';
        if (engineApiEnabled != 1) {
            var dataSplit = data.split(engineDataSplitter);
            var data = dataSplit[1];
        }
        // Parse Data
        var featureEditor = JSON.parse(data);

        // Member Profile Header Editor
        memberProfileHeaderCodeEditor = ace.edit("memberProfileHeaderCode");
        memberProfileHeaderCodeEditor.$blockScrolling = Infinity;
        memberProfileHeaderCodeEditor.setValue(featureEditor.memberProfileHeader);
        memberProfileHeaderCodeEditor.setShowPrintMargin(false);
        memberProfileHeaderCodeEditor.setTheme("ace/theme/monokai");
        memberProfileHeaderCodeEditor.getSession().setMode("ace/mode/php");
        memberProfileHeaderCodeEditor.setFadeFoldWidgets();
        memberProfileHeaderCodeEditor.session.getScrollTop();
        memberProfileHeaderCodeEditor.session.setScrollTop(1);
        memberProfileHeaderCodeEditor.session.getScrollLeft();
        memberProfileHeaderCodeEditor.session.setScrollLeft(1);
        memberProfileHeaderCodeEditor.focus();
        memberProfileHeaderCodeEditor.navigateFileStart();
        focusedEditor = memberProfileHeaderCodeEditor;

        // Member Profile Page Editor
        memberProfilePageCodeEditor = ace.edit("memberProfilePageCode");
        memberProfilePageCodeEditor.$blockScrolling = Infinity;
        memberProfilePageCodeEditor.setValue(featureEditor.memberProfilePage);
        memberProfilePageCodeEditor.setShowPrintMargin(false);
        memberProfilePageCodeEditor.setTheme("ace/theme/monokai");
        memberProfilePageCodeEditor.getSession().setMode("ace/mode/php");
        memberProfilePageCodeEditor.setFadeFoldWidgets();
        memberProfilePageCodeEditor.session.getScrollTop();
        memberProfilePageCodeEditor.session.setScrollTop(1);
        memberProfilePageCodeEditor.session.getScrollLeft();
        memberProfilePageCodeEditor.session.setScrollLeft(1);
        memberProfilePageCodeEditor.focus();
        memberProfilePageCodeEditor.navigateFileStart();
        focusedEditor = memberProfilePageCodeEditor;

        // Member Profile Footer Editor
        memberProfileFooterCodeEditor = ace.edit("memberProfileFooterCode");
        memberProfileFooterCodeEditor.$blockScrolling = Infinity;
        memberProfileFooterCodeEditor.setValue(featureEditor.memberProfileFooter);
        memberProfileFooterCodeEditor.setShowPrintMargin(false);
        memberProfileFooterCodeEditor.setTheme("ace/theme/monokai");
        memberProfileFooterCodeEditor.getSession().setMode("ace/mode/php");
        memberProfileFooterCodeEditor.setFadeFoldWidgets();
        memberProfileFooterCodeEditor.session.getScrollTop();
        memberProfileFooterCodeEditor.session.setScrollTop(1);
        memberProfileFooterCodeEditor.session.getScrollLeft();
        memberProfileFooterCodeEditor.session.setScrollLeft(1);
        memberProfileFooterCodeEditor.focus();
        memberProfileFooterCodeEditor.navigateFileStart();
        focusedEditor = memberProfileFooterCodeEditor;

        // Search Result Header Editor
        searchResultHeaderCodeEditor = ace.edit("searchResultHeaderCode");
        searchResultHeaderCodeEditor.$blockScrolling = Infinity;
        searchResultHeaderCodeEditor.setValue(featureEditor.searchResultHeader);
        searchResultHeaderCodeEditor.setShowPrintMargin(false);
        searchResultHeaderCodeEditor.setTheme("ace/theme/monokai");
        searchResultHeaderCodeEditor.getSession().setMode("ace/mode/php");
        searchResultHeaderCodeEditor.setFadeFoldWidgets();
        searchResultHeaderCodeEditor.session.getScrollTop();
        searchResultHeaderCodeEditor.session.setScrollTop(1);
        searchResultHeaderCodeEditor.session.getScrollLeft();
        searchResultHeaderCodeEditor.session.setScrollLeft(1);
        searchResultHeaderCodeEditor.focus();
        searchResultHeaderCodeEditor.navigateFileStart();
        focusedEditor = searchResultHeaderCodeEditor;

        // Search Result Page Editor
        searchResultPageCodeEditor = ace.edit("searchResultPageCode");
        searchResultPageCodeEditor.$blockScrolling = Infinity;
        searchResultPageCodeEditor.setValue(featureEditor.searchResultPage);
        searchResultPageCodeEditor.setShowPrintMargin(false);
        searchResultPageCodeEditor.setTheme("ace/theme/monokai");
        searchResultPageCodeEditor.getSession().setMode("ace/mode/php");
        searchResultPageCodeEditor.setFadeFoldWidgets();
        searchResultPageCodeEditor.session.getScrollTop();
        searchResultPageCodeEditor.session.setScrollTop(1);
        searchResultPageCodeEditor.session.getScrollLeft();
        searchResultPageCodeEditor.session.setScrollLeft(1);
        searchResultPageCodeEditor.focus();
        searchResultPageCodeEditor.navigateFileStart();
        focusedEditor = searchResultPageCodeEditor;

        // Search Result Footer Editor
        searchResultFooterCodeEditor = ace.edit("searchResultFooterCode");
        searchResultFooterCodeEditor.$blockScrolling = Infinity;
        searchResultFooterCodeEditor.setValue(featureEditor.searchResultFooter);
        searchResultFooterCodeEditor.setShowPrintMargin(false);
        searchResultFooterCodeEditor.setTheme("ace/theme/monokai");
        searchResultFooterCodeEditor.getSession().setMode("ace/mode/php");
        searchResultHeaderCodeEditor.setFadeFoldWidgets();
        searchResultFooterCodeEditor.session.getScrollTop();
        searchResultFooterCodeEditor.session.setScrollTop(1);
        searchResultFooterCodeEditor.session.getScrollLeft();
        searchResultFooterCodeEditor.session.setScrollLeft(1);
        searchResultFooterCodeEditor.focus();
        searchResultFooterCodeEditor.navigateFileStart();
        focusedEditor = searchResultFooterCodeEditor;

        // Detail Page Editor
        detailPageCodeEditor = ace.edit("detailPageCode");
        detailPageCodeEditor.$blockScrolling = Infinity;
        detailPageCodeEditor.setValue(featureEditor.detailPage);
        detailPageCodeEditor.setShowPrintMargin(false);
        detailPageCodeEditor.setTheme("ace/theme/monokai");
        detailPageCodeEditor.getSession().setMode("ace/mode/php");
        detailPageCodeEditor.setFadeFoldWidgets();
        detailPageCodeEditor.session.getScrollTop();
        detailPageCodeEditor.session.setScrollTop(1);
        detailPageCodeEditor.session.getScrollLeft();
        detailPageCodeEditor.session.setScrollLeft(1);
        detailPageCodeEditor.focus();
        detailPageCodeEditor.navigateFileStart();
        focusedEditor = detailPageCodeEditor;
      });
    });

Answer 1

You can put them in array, write config with things which are different and iterate through it. Here is example for 7 blocks at the end, you can use same logic for 3 blocks at start of your code, or maybe you can put all 10 in same config:

var configs = {
    1: {name: 'memberProfileHeaderCode', value: featureEditor.memberProfileHeader},
    2: {name: 'memberProfilePageCode', value: featureEditor.memberProfilePage},
    3: {name: 'memberProfileFooterCode', value: featureEditor.memberProfileFooter},
    4: {name: 'searchResultHeaderCode', value: featureEditor.searchResultHeader},
    5: {name: 'searchResultPageCode', value: featureEditor.searchResultPage},
    6: {name: 'searchResultFooterCode', value: featureEditor.searchResultFooter},
    7: {name: 'detailPageCode', value: featureEditor.detailPage}
};
var editor = [];
for (a in configs) {
    var tmp = configs[a],
            name = tmp.name;
    console.log(a, tmp);
    editor[name] = ace.edit(tmp.name);
    editor[name].$blockScrolling = Infinity;
    editor[name].setValue(tmp.value);
    editor[name].setShowPrintMargin(false);
    editor[name].setTheme("ace/theme/monokai");
    editor[name].getSession().setMode("ace/mode/php");
    editor[name].setFadeFoldWidgets();
    editor[name].session.getScrollTop();
    editor[name].session.setScrollTop(1);
    editor[name].session.getScrollLeft();
    editor[name].session.setScrollLeft(1);
    editor[name].focus();
    editor[name].navigateFileStart();
    focusedEditor = editor[name];
}