Integrating the Ace embeddable code editor for editing HTML, CSS, and JavaScript

Question

I am currently implementing the Ace-editor embeddable code editor. In to my application.

I use a div with a certain class(example: editor_js) to render the editor the div also gets a data attribute (data-key) corresponding with the name (example: Site[tagmanager]) of a textarea. The session from the div get stored in the textarea and saved. You can see my complete Javascript code below for all three editors(html, css and Javascript). Everything seems to work, but I feel that there is a lot of room for improvement en optimization. So I was wondering if you could look it over and give me some tips and/or suggestions on how I can improve it and make more maintainable.

The html

<textarea id="editor_js" class="form-control" **name="Site[tagmanager]"** style="display: none;"></textarea>
<div **class="editor_js"** **data-key="Site[tagmanager]"**></div>

The Javascript

$(function () {

//Html editor
ace.require("ace/ext/language_tools");
$('.editor_html').each(function (index) {
    var type = $(this).attr("data-key"); // This is the name of the target textarea
    var textarea = $('textarea[name="' + type + '"]').hide(); // the textare is hidden because the editor is loaded in a div
    ace.require("ace/ext/emmet");
    var editor = ace.edit(this);
    editor.setTheme("ace/theme/chrome");
    editor.getSession().setMode("ace/mode/html");
    editor.getSession().setValue(textarea.val());
    editor.getSession().on('change', function(){
        textarea.val(editor.getSession().getValue());
    });
});

//CSS editor
$('.editor_css').each(function (index) {
    var type = $(this).attr("data-key");
    var textarea = $('textarea[name="' + type + '"]').hide();
    var editor = ace.edit(this);
    editor.setTheme("ace/theme/chrome");
    editor.getSession().setMode("ace/mode/css");
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
    });
    editor.getSession().setValue(textarea.val());
    editor.getSession().on('change', function(){
        textarea.val(editor.getSession().getValue());
    });
});

//javascript editor
$('.editor_js').each(function (index) {
    var type = $(this).attr("data-key");
    var textarea = $('textarea[name="' + type + '"]').hide();
    var editor = ace.edit(this);
    editor.setTheme("ace/theme/chrome");
    editor.getSession().setMode("ace/mode/javascript");
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
    });
    editor.getSession().setValue(textarea.val());
    editor.getSession().on('change', function(){
        textarea.val(editor.getSession().getValue());
    });
});

});

Answer 1

Isolate what varies, and abstract out what's repeated:

$(function () {

ace.require("ace/ext/language_tools");
ace.require("ace/ext/emmet");  // I moved this out of html block, not sure if that matters

//Html editor
var htmlCallback = makeEditorCallback('html', false);
$('.editor_html').each(htmlCallback);

//CSS editor
var cssCallback = makeEditorCallback('css', true);
$('.editor_css').each(cssCallback);

//javascript editor
var jsCallback = makeEditorCallback('javascript', true);
$('.editor_js').each(jsCallback);

function makeEditorCallback(mode, useAutoComplete) {
  return function() {
    var type     = $(this).attr("data-key"),
        textarea = $('textarea[name="' + type + '"]').hide(),
        editor   = ace.edit(this),
        options  = useAutoComplete ? 
                   {
                     enableBasicAutocompletion: true, 
                     enableSnippets: true, 
                     enableLiveAutocompletion: true
                   } : {};
    editor.setTheme("ace/theme/chrome");
    editor.getSession().setMode("ace/mode/" + mode);
    editor.setOptions(options);
    editor.getSession().setValue(textarea.val());
    editor.getSession().on('change', function() {
      textarea.val(editor.getSession().getValue());
    });
  }
}
});

This code is untested, but the basic idea is what's important. You should be able to make any tweaks or changes that you need.

Also, note that you weren't using the index argument, so I removed it.