Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
簡易Pythonエディタ
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor {
position: fixed;
top: 50px;
right: 0%;
bottom: 0%;
left: 0%;
font-size: 14px;
}
</style>
</head>
<body>
<button id="download">ダウンロード</button>
<input type="file" id="file" name="file"/ accept=".py">
<div id="editor"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ext-language_tools.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/mode-python.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/snippets/python.js"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/python");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
//download button
var btn = document.getElementById('download');
btn.addEventListener('click', function() {
// テキストエリアから入力内容を取得する
var content = editor.getValue();;
// テキストファイルをBlob形式に変換する
let blob = new Blob([content]);
// Blobデータに対するURLを発行する
let blobURL = window.URL.createObjectURL(blob);
// URLをaタグに設定する
let a = document.createElement('a');
a.href = blobURL;
// download属性でダウンロード時のファイル名を指定
if (typeof aaresult === "undefined") {
a.download="noname.py";
} else {
a.download = aaresult.name;
};
// Firefoxの場合は、実際にDOMに追加しておく必要がある
document.body.appendChild(a);
// CLickしてダウンロード
a.click();
// 終わったら不要なので要素を削除
a.parentNode.removeChild(a);
});
//ファイル選択ボタン
var el2 = document.getElementById("file");
el2.addEventListener( 'change', function(e) {
var result = e.target.files[0];
aaresult=e.target.files[0];
//FileReaderのインスタンスを作成する
var reader = new FileReader();
//読み込んだファイルの中身を取得する
reader.readAsText( result );
//ファイルの中身を取得後に処理を行う
reader.addEventListener( 'load', function() {
//ファイルの中身をエディター内に表示する
console.log(reader.result);
editor.setValue(reader.result);
})
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment