使用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标准库之sqlite3使用实例
Nov 25 Python
python实现连接mongodb的方法
May 08 Python
Python的Django框架中自定义模版标签的示例
Jul 20 Python
Python中正则表达式详解
May 17 Python
Django框架多表查询实例分析
Jul 04 Python
win10系统下Anaconda3安装配置方法图文教程
Sep 19 Python
面向初学者的Python编辑器Mu
Oct 08 Python
对python多线程与global变量详解
Nov 09 Python
利用Python如何实现一个小说网站雏形
Nov 23 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
Jul 22 Python
tensorflow之并行读入数据详解
Feb 05 Python
django使用JWT保存用户登录信息
Apr 22 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
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
药物学专业学生的自我评价
2013/10/27 职场文书
优秀生推荐信范文
2013/11/28 职场文书
卫生安全检查制度
2014/02/04 职场文书
预备党员转正意见
2015/06/01 职场文书
出生证明格式
2015/06/15 职场文书
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
yolov5返回坐标的方法实例
2022/03/17 Python
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA