使用CodeMirror实现Python3在线编辑器的示例代码


Posted in Python onJanuary 14, 2019

一、编写页面

主要是引入相关的css文件和js文件,这里采用简单插入link和script标签的形式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="codemirror/lib/codemirror.css" rel="external nofollow" >
  <link rel="stylesheet" href="codemirror/addon/fold/foldgutter.css" rel="external nofollow" >
  <link rel="stylesheet" href="codemirror/addon/hint/show-hint.css" rel="external nofollow" >
  <link rel="stylesheet" href="codemirror/addon/lint/lint.css" rel="external nofollow" >
  <link rel="stylesheet" href="leetcode.css" rel="external nofollow" > 
</head>
<body>
  <form action="">
    <textarea id="editor" class="editor"></textarea>
  </form>  
  <button id="test">click</button>
</body>
</html>
<script src="codemirror/lib/codemirror.js"></script>

<script src="codemirror/addon/comment/comment.js"></script>

<script src="codemirror/addon/selection/active-line.js"></script>

<script src="codemirror/keymap/sublime.js"></script>

<script src="codemirror/addon/hint/show-hint.js"></script>
<script src="codemirror/mode/python/python.js"></script> 

<script src="codemirror/addon/fold/foldcode.js"></script>
<script src="codemirror/addon/fold/foldgutter.js"></script>
<script src="codemirror/addon/fold/brace-fold.js"></script>
<script src="codemirror/addon/fold/indent-fold.js"></script>
<script src="codemirror/addon/fold/comment-fold.js"></script>

<script src="codemirror/addon/edit/closebrackets.js"></script>
<script src="codemirror/addon/edit/matchbrackets.js"></script>

<script src="axios.js"></script>

<script src="index.js"></script>

二、配置CodeMirror

在index.js中配置CodeMirror

window.onload = function () {
  var el = document.getElementById("editor");
  var version = "# version: Python3\n\n";
  var codeAreaTip = "# please edit your code here:\n";
  var codeStart = "# code start\n\n";
  var codeEnd = "# code end\n\n";
  var codeTip = "'''\nThis function is the entry of this program and\nit must be return your answer of current question.\n'''\n";
  var code = "def solution():\n\tpass";
  var initValue = version + codeAreaTip + codeStart + codeEnd + codeTip + code;
  var myCodeMirror = CodeMirror.fromTextArea(el, {
    mode: "python", // 语言模式
    theme: "leetcode", // 主题
    keyMap: "sublime", // 快键键风格
    lineNumbers: true, // 显示行号
    smartIndent: true, // 智能缩进
    indentUnit: 4, // 智能缩进单位为4个空格长度
    indentWithTabs: true, // 使用制表符进行智能缩进
    lineWrapping: true, // 
    // 在行槽中添加行号显示器、折叠器、语法检测器
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"], 
    foldGutter: true, // 启用行槽中的代码折叠
    autofocus: true, // 自动聚焦
    matchBrackets: true, // 匹配结束符号,比如"]、}"
    autoCloseBrackets: true, // 自动闭合符号
    styleActiveLine: true, // 显示选中行的样式
  });
  // 设置初始文本,这个选项也可以在fromTextArea中配置
  myCodeMirror.setOption("value", initValue);
  // 编辑器按键监听
  myCodeMirror.on("keypress", function() {
    // 显示智能提示
    myCodeMirror.showHint(); // 注意,注释了CodeMirror库中show-hint.js第131行的代码(阻止了代码补全,同时提供智能提示)
  });
  var test = document.getElementById("test");
  test.onclick = function() {
    var value = myCodeMirror.getValue();
    axios.post("http://localhost/api/runcode", {
      code: value
    }).then(function(res) {
      console.log(res);
    });
  };
};

三、后台调用python shell

过程如下:

  • 在接收的代码字符串后面添加print(solution())用于打印结果
  • 将第一步处理后的字符串写入一个文件中这里是code/code.py
  • 使用child_process模块的exec方法调用shell执行python code/code.py命令,获取打印结果
const express = require("express");
const { exec } = require("child_process");
const router = express.Router();
router.post("/api/runcode", (req, res) => {
  let code = req.body.code;
  fs.writeFile("code/code.py", code+"\nprint(solution())", (err) => {
    let command = "python code/code.py";
    exec(command, (err, stdout, stdin) => {
      if(err){
        let reg = /[\d\D]*(line\s\d)[\d\D]*?(\w*(?:Error|Exception).*)/im;
        let matchArr = reg.exec(err.message);
        matchArr.shift();
        res.send(matchArr.join(", "));
      }
      else
        res.send(stdout);
    });
  });
});

效果:

使用CodeMirror实现Python3在线编辑器的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python多线程编程(五):死锁的形成
Apr 05 Python
Python字符串详细介绍
May 09 Python
python将文本中的空格替换为换行的方法
Mar 19 Python
python 多维切片之冒号和三个点的用法介绍
Apr 19 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
Apr 27 Python
用Python将mysql数据导出成json的方法
Aug 21 Python
python3 实现验证码图片切割的方法
Dec 07 Python
对python中词典的values值的修改或新增KEY详解
Jan 20 Python
Python常用模块之requests模块用法分析
May 15 Python
pyqt5移动鼠标显示坐标的方法
Jun 21 Python
Python paramiko模块使用解析(实现ssh)
Aug 30 Python
Python 3.9的到来到底是意味着什么
Oct 14 Python
python 根据时间来生成唯一的字符串方法
Jan 14 #Python
python ipset管理 增删白名单的方法
Jan 14 #Python
python 监听salt job状态,并任务数据推送到redis中的方法
Jan 14 #Python
在python 不同时区之间的差值与转换方法
Jan 14 #Python
Python常见数据结构之栈与队列用法示例
Jan 14 #Python
解决nohup执行python程序log文件写入不及时的问题
Jan 14 #Python
nohup后台启动Python脚本,log不刷新的解决方法
Jan 14 #Python
You might like
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
新版PHP极大的增强功能和性能
2006/10/09 PHP
php实现递归的三种基本方式
2020/07/04 PHP
微信支付的开发流程详解
2016/09/13 PHP
Javascript Select操作大集合
2009/05/26 Javascript
jQuery 加上最后自己的验证
2009/11/04 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
关于Django外键赋值问题详解
2017/08/13 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
详解Django配置优化方法
2019/11/18 Python
Python绘制动态水球图过程详解
2020/06/03 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
编写strcpy函数
2014/06/24 面试题
投标人廉洁自律承诺书
2014/05/26 职场文书
借名购房协议书范本
2014/10/06 职场文书
测量员岗位职责
2015/02/14 职场文书
教师节主持词开场白
2015/05/29 职场文书
2016年寒假见闻
2015/10/10 职场文书
大学生干部培训心得体会
2016/01/06 职场文书