原文鏈接：Skulpt搭建Python在線編譯器(二)：界面優(yōu)化 – 每天進(jìn)步一點(diǎn)點(diǎn) (longkui.site)
上一節(jié)中，我們下載并安裝使用了基于Skulpt 的Python在線編譯器，實(shí)現(xiàn)了基礎(chǔ)功能沖疗绣，但是原生的頁(yè)面比較難看，所以我們打算重新修改頁(yè)面烈钞。讓頁(yè)面變得好看一些。
這是效果圖:?http://python.longkui.site/
1.原生頁(yè)面解析
<html>
<head>
????<script src="skulpt.min.js"type="text/javascript"></script>???
????<script src="skulpt-stdlib.js"type="text/javascript"></script>
</head>
<body>
????<script type="text/javascript">
????????functionoutf(text) {
????????????varmypre = document.getElementById("output");? //
????????????mypre.innerHTML = mypre.innerHTML + text;? //文字輸出
????????}
????????functionbuiltinRead(x) {
????????????if(Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
????????????????throw"File not found: '"+ x + "'";
????????????returnSk.builtinFiles["files"][x];
????????}
????????functionrunit() {
????????????console.log("runit is going")
????????????varprog = document.getElementById("yourcode").value; //讀取用戶輸入的內(nèi)容
????????????varmypre = document.getElementById("output");?? //獲取輸出框
????????????mypre.innerHTML = '';
????????????Sk.pre = "output";
????????????Sk.configure({ output: outf, read: builtinRead, __future__: Sk.python3 });
????????????(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
????????????varmyPromise = Sk.misceval.asyncToPromise(function() {
????????????????returnSk.importMainWithBody("<stdin>", false, prog, true);
????????????});
????????????myPromise.then(function(mod) {
????????????????console.log('success');??? //執(zhí)行成功，顯示success
????????????},
????????????????function(err) {
????????????????????console.log(err.toString());?? //執(zhí)行失敗，在控制臺(tái)顯示 err
????????????????});
????????}
????</script>
????<!-- 標(biāo)題部分 -->
????<h3>Try This</h3>?
????<form>
????????<!-- textarea是用戶輸入代碼的部分远荠，在此區(qū)域填寫代碼，每次運(yùn)行都會(huì)顯示 -->
????????<textarea id="yourcode"cols="80"rows="10">
????????</textarea><br />
????????<!-- 按鈕：開始執(zhí)行 -->
????????<button type="button"onclick="runit()">Run</button>
????</form>
????<!-- 文字輸出部分 -->
????<pre id="output"></pre>
????<!-- 畫圖輸出部分 -->
????<div id="mycanvas"></div>
</body>
</html>
2.CodeMirror美化
CodeMirror是一塊支持代碼高亮的編輯器失息，支持多種語(yǔ)法格式
官網(wǎng)鏈接：https://codemirror.net/
github地址：https://github.com/codemirror/CodeMirror
下載下來(lái)的目錄界面如下：
addon：存放搜索匹配譬淳，折疊代碼等插件
lib:核心庫(kù)，核心CSS
mode:各種語(yǔ)言的風(fēng)格和語(yǔ)法定義
theme:編輯器主題風(fēng)格樣式
使用CodeMirror必須引入codemirror.css和codemirror.js
<link href="codemirror/lib/codemirror.css"rel="stylesheet"type="text/css">
<script src="codemirror/lib/codemirror.js"></script>
其余的按照你的要求自己選擇引用什么盹兢，這個(gè)地方因?yàn)槲沂窃诰€python編譯器邻梆，所以我引入了python的語(yǔ)言風(fēng)格
<!--引入python.js-->
<script src="codemirror/mode/python/python.js"></script>
同時(shí)，需要修改codemirror的配置信息：
varCodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
???????????????????mode: "python",? //默認(rèn)腳本編碼,python 模式
???????????????????lineNumbers: true,?? //是否顯示行號(hào)
???????????????????lineWrapping: true, //是否強(qiáng)制換行
???????????????????foldGutter:true, // 啟用行槽中的代碼折疊
???????????????????matchBrackets:true,// 匹配結(jié)束符號(hào)绎秒，比如"]浦妄、}"
???????????????????autoCloseBrackets: true, // 自動(dòng)閉合符號(hào)
???????????????????styleActiveLine:true, // 顯示選中行的樣式
???????????????????indentUnit: 4,???????? // 縮進(jìn)單位為4
???????????????});
3.界面優(yōu)化
初始界面顯示的比較丑，這個(gè)地方我是引入iview见芹，用來(lái)美化整個(gè)頁(yè)面剂娄。整個(gè)代碼如下：?????
<html>
<head>
????<meta charset="utf-8">
????<script src="skulpt.min.js" type="text/javascript"></script>
????<script src="skulpt-stdlib.js" type="text/javascript"></script>
????<link href="codemirror/lib/codemirror.css" rel="stylesheet" type="text/css">
????<link href="codemirror/theme/monokai.css" rel="stylesheet" type="text/css">
????<link href="codemirror/addon/display/fullscreen.css" rel="stylesheet" type="text/css">
????<script src="codemirror/lib/codemirror.js"></script>
????<script src="codemirror/mode/python/python.js"></script>
????<link href="css/index.css" rel="stylesheet" type="text/css">
????http://unpkg.com/view-design/dist/styles/iview.css">
????http://vuejs.org/js/vue.min.js">
????http://unpkg.com/view-design/dist/iview.min.js">
????<title>Python-Online</title>
</head>
<body>
<div id="app" >
?????<div? class="function">
?????????<i-button type="primary" icon="md-play" onclick="runit()">運(yùn)行</i-button>
????????<i-button type="error" icon="ios-trash" @click="clear">清除所有</i-button>
????</div>
????<div id="" class="page">
????????<div id="" css="workbench">
????????????<form class="index-form">
????????????????<textarea id="yourcode" class="index-form">import turtle
turtle.begin_fill()
turtle.fillcolor('red')
for x in range(4):
????turtle.forward(100)
????turtle.right(90)
turtle.end_fill()
turtle.hideturtle()
turtle.done()
print("Hello World")
????????????????</textarea>
????????????</form>
????????????<div? class="outputd">
????????????????<div id="mycanvas" class="canvas-ouput" ></div>
????????????????<div class="output">
????????????????????<pre id="output"> </pre>
????????????????</div>
????????????</div>
????????</div>
????</div>
</div>
????<script>
????????new Vue({
????????????el: '#app',
????????????data: {
????????????},
????????????methods: {
????????????????clear:function(event){
????????????????????CodeMirrorEditor.setValue("");
????????????????????var mypre = document.getElementById("output");
????????????????????mypre.innerHTML = "";
????????????????},
????????????}
????????})
????????//新增window.onload 事件,用來(lái)初始化codemirror
????????//???? window.onload = function () {
????????//???????? //console.log("onload is going")
????????//???????? // 添加codemirror 模式
????????????????var myTextarea = document.getElementById('yourcode');
????????????????var CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
????????????????????mode: "python",????????
????????????????????lineNumbers: true,?????
????????????????????lineWrapping: true,????
????????????????????foldGutter:true,???????
????????????????????matchBrackets:true,???
????????????????????autoCloseBrackets: true ,
????????????????????styleActiveLine:true,??
????????????????????indentUnit: 4,?????????
????????????????});
????????????????CodeMirrorEditor.setSize("100%","100%");?
????????// }
????????function outf(text) {
????????????var mypre = document.getElementById("output");
????????????mypre.innerHTML = mypre.innerHTML + text;
????????}
????????function builtinRead(x) {
????????????if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
????????????????throw "File not found: '" + x + "'";
????????????return Sk.builtinFiles["files"][x];
????????}
????????function runit() {
????????????var prog =CodeMirrorEditor.getValue();
????????????var mypre = document.getElementById("output");
????????????mypre.innerHTML = '';
????????????Sk.pre = "output";
????????????Sk.configure({ output: outf, read: builtinRead, __future__: Sk.python3 });
????????????(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
????????????var myPromise = Sk.misceval.asyncToPromise(function () {
????????????????return Sk.importMainWithBody("<stdin>", false, prog, true);
????????????});
????????????myPromise.then(function (mod) {
????????????????console.log('success');
????????????},
????????????????function (err) {
????????????????????console.log(err.toString());
????????????????????mypre.innerHTML=err.toString();
????????????????});
?????????}
????</script>
</body>
</html>
4.問題
上面雖然我們使用skulpt和codemirror制作了一個(gè)簡(jiǎn)單的在線python編譯器。但是還是發(fā)現(xiàn)一些問題玄呛。
問題1：關(guān)于turtle部分阅懦，畫圖canvas部分出現(xiàn)一個(gè)問題，就是canvas的畫圖部分太小徘铝，而且我經(jīng)過(guò)嘗試耳胎，不論是修改css 還是直接改canvas都無(wú)法讓畫布變大比較大惯吕，這個(gè)地方一直沒想明白。
