【不容易】代码高亮输入表单
所有要用到的js文件:https://pagecdn.com/lib/ace
教程:https://github.com/ajaxorg/ace
自己写了个python编辑器的示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#editor {
width: 600px;
height: 400px;
position: absolute;
line-height: 20px;
font-size: 15px;
}
</style>
</head>
<body>
<div id="editor"></div>
<script type="text/javascript" src="https://pagecdn.io/lib/ace/1.4.13/ace.min.js" charset="utf-8"></script>
<script type="text/javascript" src="https://pagecdn.io/lib/ace/1.4.13/theme-vibrant_ink.min.js"></script>
<script type="text/javascript" src="https://pagecdn.io/lib/ace/1.4.13/mode-python.min.js"></script>
<script type="text/javascript">
let editor = ace.edit("editor");
editor.setTheme("ace/theme/vibrant_ink")
let PythonScriptMode = ace.require("ace/mode/python").Mode;
editor.session.setMode(new PythonScriptMode());
</script>
</body>
</html>
有一些可以用到的属性和方法:
editor.getValue(); // 获得表单的内容
editor.setValue("code"); // 设置表单的内容
editor.destroy(); // 移除表单
editor.getReadOnly(); // 查看表单的只读状态
editor.setReadOnly(true); // 设置表单为只读,如果是false的话就解除只读