Integrating the Ace embeddable code editor for editing HTML, CSS, and JavaScript
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.