原文链接：Skulpt搭建Python在线编译器(二)：界面优化 – 每天进步一点点 (longkui.site)
上一节中，我们下载并安装使用了基于Skulpt 的Python在线编译器，实现了基础功能冲，但是原生的页面比较难看，所以我们打算重新修改页面。让页面变得好看一些。
这是效果图: http://python.longkui.site/
1.原生页面解析
<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; //读取用户输入的内容
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'); //执行成功，显示success
},
function(err) {
console.log(err.toString()); //执行失败，在控制台显示 err
});
}
</script>
<!-- 标题部分 -->
<h3>Try This</h3>
<form>
<!-- textarea是用户输入代码的部分，在此区域填写代码，每次运行都会显示 -->
<textarea id="yourcode"cols="80"rows="10">
</textarea><br />
<!-- 按钮：开始执行 -->
<button type="button"onclick="runit()">Run</button>
</form>
<!-- 文字输出部分 -->
<pre id="output"></pre>
<!-- 画图输出部分 -->
<div id="mycanvas"></div>
</body>
</html>
2.CodeMirror美化
CodeMirror是一块支持代码高亮的编辑器，支持多种语法格式
github地址：https://github.com/codemirror/CodeMirror
下载下来的目录界面如下：
addon：存放搜索匹配，折叠代码等插件
lib:核心库，核心CSS
mode:各种语言的风格和语法定义
theme:编辑器主题风格样式
使用CodeMirror必须引入codemirror.css和codemirror.js
<link href="codemirror/lib/codemirror.css"rel="stylesheet"type="text/css">
<script src="codemirror/lib/codemirror.js"></script>
其余的按照你的要求自己选择引用什么，这个地方因为我是在线python编译器，所以我引入了python的语言风格
<!--引入python.js-->
<script src="codemirror/mode/python/python.js"></script>
同时，需要修改codemirror的配置信息：
varCodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
mode: "python", //默认脚本编码,python 模式
lineNumbers: true, //是否显示行号
lineWrapping: true, //是否强制换行
foldGutter:true, // 启用行槽中的代码折叠
matchBrackets:true,// 匹配结束符号，比如"]、}"
autoCloseBrackets: true, // 自动闭合符号
styleActiveLine:true, // 显示选中行的样式
indentUnit: 4, // 缩进单位为4
});
3.界面优化
初始界面显示的比较丑，这个地方我是引入iview，用来美化整个页面。整个代码如下：
<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()">运行</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 事件,用来初始化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制作了一个简单的在线python编译器。但是还是发现一些问题。
问题1：关于turtle部分，画图canvas部分出现一个问题，就是canvas的画图部分太小，而且我经过尝试，不论是修改css 还是直接改canvas都无法让画布变大比较大，这个地方一直没想明白。
