basictomonokai/acepython.html

## acepython.html
<!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>
	<!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>