--- slug: "ace-widget-access-instance" title: "ACEのエディターインスタンスをHTMLエレメントから再取得する" description: "Django-ACE で ACE を使ってて、Ctrl + S ( Command + S )で保存のショートカットキーを使いたかった。" url: "https://www.ytyng.com/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: "ja" --- # ACEのエディターインスタンスをHTMLエレメントから再取得する

Django-ACE で ACE を使ってて、Ctrl + S ( Command + S )で保存のショートカットキーを使いたかった。

Django-ACE は、 widget.js で 

editor = ace.edit(div)

こんな感じで、editor インスタンスを作ってるけど、function内のローカル変数なので function外からはアクセスできない。

そんな時は、div.env.editor に参照があるのでアクセスできる。

Django Admin で ACE を使っている場合、editor への参照へのアクセスを jQuery で書くと

$('div.django-ace-widget')[0].firstChild.env.editor

こんな感じ。

Ctrl + S ( Command + S ) のショートカットをバインドするには

$('div.django-ace-widget')[0].firstChild.env.editor.commands.addCommand({
  Name : "save",
  bindKey: {
    win : "Ctrl-S",
    mac : "Command-S"
 },
 exec: function(editor) {
   alert('Save!');
   }
});

このように書ける。

Django の Admin 用 JS にするとこんな

// 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);
});