Last active
December 13, 2017 08:27
-
-
Save basictomonokai/dc2aa0315211a082adf7f1e1981749d0 to your computer and use it in GitHub Desktop.
簡易Pythonエディタ(プロ生版)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>ACE in Action</title> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
<style type="text/css" media="screen"> | |
#editor { | |
position: fixed; | |
top: 50px; | |
right: 0%; | |
bottom: 0%; | |
left: 0%; | |
font-size: 14px; | |
} | |
.ace_scroller { | |
background-image : url(http://dimg.azurewebsites.net/320x240/272822); | |
background-repeat: no-repeat; | |
background-position: right bottom | |
} | |
.ace_marker-layer { | |
background-color: rgba( 0, 0, 0, 0.3 ); | |
} | |
</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); | |
}) | |
}) | |
// 画像を設定 | |
var imgchg = function(){ | |
var min = 310 ; | |
var max = 330 ; | |
var a = Math.floor( Math.random() * (max + 1 - min) ) + min ; | |
var gazourl = "url(http://dimg.azurewebsites.net/"+a+"x240/272822)" | |
$('.ace_scroller').css('background-image', gazourl); | |
} | |
imgchg(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment