ACEのエディターインスタンスをHTMLエレメントから再取得する
投稿者: ytyng 6年, 7ヶ月 前
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);
});
コメント