---
slug: "ace-widget-access-instance"
title: "Retrieve the ACE Editor Instance from an HTML Element"
description: "I wanted to use the save shortcut key (Ctrl + S / Command + S) while using ACE in Django-ACE."
url: "https://www.ytyng.com/en/blog/ace-widget-access-instance"
publish_date: "2017-09-25T09:42:48Z"
created: "2017-09-25T09:42:48Z"
updated: "2026-02-27T01:17:35.994Z"
categories: ["HTML", "Javascript"]
keywords: ""
featured_image_url: "https://media.ytyng.com/resize/20230812/d5113e0789a2454290f6422e27a6e368.png.webp?width=768"
has_video: false
has_music: false
video_urls: []
music_urls: []
lang: "en"
---

# Retrieve the ACE Editor Instance from an HTML Element

<p>I wanted to use the save shortcut key (Ctrl + S / Command + S) while using ACE in Django-ACE.</p>

<p>Django-ACE creates an editor instance like this in <code>widget.js</code>:</p>
<pre>editor = ace.edit(div)</pre>
<p>However, since it's a local variable within a function, you can't access it from outside the function.</p>

<p>In such cases, you can access it via <strong>div.env.editor</strong>.</p>

<p>When using ACE in Django Admin, you can write the reference access to the editor using jQuery like this:</p>
<pre>$('div.django-ace-widget')[0].firstChild.env.editor</pre>

<p>To bind the shortcut for Ctrl + S (Command + S), you can write it like this:</p>
<pre>$('div.django-ace-widget')[0].firstChild.env.editor.commands.addCommand({<br />  name: "save",<br />  bindKey: {<br />    win: "Ctrl-S",<br />    mac: "Command-S"<br /> },<br />  exec: function(editor) {<br />    alert('Save!');<br />  }<br />});</pre>

<p>If you want to include this in Django's Admin JS, you can write it like this:</p>
<pre>// Admin ACE Save
$(function() {
    setTimeout(function() {
        var aces = $('div.django-ace-widget');
        if (!aces.length) {
            return;
        }
        var editor = aces[0].firstChild.env.editor;
        if (!editor) {
            return;
        }
        var continueButton = $('input[type="submit"][name="_continue"]');
        if (!continueButton.length) {
            return;
        }

        editor.commands.addCommand({
            name: "save",
            bindKey: {
                win: "Ctrl-S",
                mac: "Command-S"
            },
            exec: function(editor) {
                continueButton.click();
            }
        });
    }, 2000);
});</pre>
