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

一、编写页面

主要是引入相关的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);
    });
  });
});

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Python实现的文本编辑器功能示例

    Python实现的文本编辑器功能示例

    本文实例讲述了Python实现的文本编辑器功能.分享给大家供大家参考,具体如下: wxpython实现的文本编辑器 效果如下: 主要功能: 1.编辑保存文本,打开修改文本 2.常用快捷键,复制,粘贴,全选等 3.支持撤销功能 4.支持弹出式菜单 代码如下: #encoding=utf-8 import wx import os class MyFrame(wx.Frame): def __init__(self): self.file='' self.content=[] self.count=

  • Python的Flask框架中集成CKeditor富文本编辑器的教程

    CKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写.具备功能强大.配置容易.跨浏览器.支持多种编程语言.开源等特点.它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了CKeditor. 下载CKeditor 访问CKeditor官方网站,进入下载页面,选择Standard Package(一般情况下功能足够用了),然后点击Download CKEditor按钮下载ZIP格式的安装文件.如果你想尝试更多的功能,可以选择下载Full

  • 好用的Python编辑器WingIDE的使用经验总结

    好用的Python编辑器WingIDE的使用经验总结

    WingIDE的使用 好的工具可以让你做事时,事半功倍!这一点在写代码的过程中尤为明显,使用Pyhton写程序有一年多了!各类编辑器IDE也使用了不少,如Pycharm,sublime,Qtcreator等等,最近开始使用WingIDE,发现使用起来非常顺手,而且支持目前所有主流操作系统!这篇博文用来记录总结,在安装和使用WingIDE过程中的一些有用的经验,技巧! 官网下载链接:http://wingware.com/downloads WingIDE的安装 在windows平台下的安装 1:

  • Python的Flask站点中集成xhEditor文本编辑器的教程

    Python的Flask站点中集成xhEditor文本编辑器的教程

    xhEditor简介 xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器,基于网络访问并且兼容IE 6.0+, Firefox 3.0+, Opera 9.6+, Chrome 1.0+, Safari 3.22+. xhEditor曾经是我比较喜欢的编辑器,也是率先支持拖拽上传的编辑器之一.xhEditor在当年是优秀的编辑器,功能足够强大,使用体验也相当好,拖拽上传是我最喜欢的功能,只可惜已经停止开发了.xhEditor最后的稳定版本是1.1.14,至今已超过

  • 基于Python代码编辑器的选用(详解)

    基于Python代码编辑器的选用(详解)

    Python开发环境配置好了,但发现自带的代码编辑器貌似用着有点不大习惯啊,所以咱们就找一个"好用的"代码编辑器吧,网上搜了一下资料,Python常用的编辑器有如下一些: 1. Sublime Text 2. Vim 3. PyScripter 4. PyCharm 5. Eclipse with PyDev 6. Emacs 7. Komodo Edit 8. Wing 9. The Eric Python IDE 10. Interactive Editor for Python

  • 面向初学者的Python编辑器Mu

    面向初学者的Python编辑器Mu

    Meet Mu,一个开放源码编辑器,使学生们更容易学习编写Python代码. Mu一个开源编辑器,是满足学生可以轻松学习编写Python代码的工具.作为初学程序员的Python编辑器,旨在使学习体验更加愉快.它使学生​​能够在早期体验Python的编程,而这对于初学者学习新知识的很重要. 如果你曾试图教年轻人如何编程,你会立即掌握Mu的重要性.大多数编程工具都是由开发人员为开发人员编写的,并不适合初学程序员,无论他们的年龄如何.然而,Mu是由老师为学生而设计的工具. Mu是由Nicholas T

  • python写的一个文本编辑器

    复制代码 代码如下: #!/usr/bin/env python#-*- coding: utf-8 -*-#=============================================================================#     FileName:#         Desc:#       Author: ToughGuy#      Version: 0.0.1#   LastChange: 2013-02-20 14:52:11#      H

  • 使用Python读写文本文件及编写简单的文本编辑器

    学习raw_input和argv是学习读取文件的前提,你可能不能完全理解这个练习,所以认真学习并检查.如果不认真的话,很容易删除一些有用的文件. 这个练习包含两个文件,一个是运行文件ex15.py,一个是ex15_sample.txt.第二个文件不是脚本文件,只包括一些文本,如下: This is stuff I typed into a file. It is really cool stuff. Lots and lots of fun to have in here. 我们要做的就是打开这

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

    一.编写页面 主要是引入相关的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">

  • python3获取url文件大小示例代码

    在python3中,urllib2被替换为urllib.requeset,因此头文件中添加 import urllib.request as urllib2 def getRemoteFileSize(url, proxy=None): """ 通过content-length头获取远程文件大小 url - 目标文件URL proxy - 代理 """ opener = urllib2.build_opener() if proxy: if ur

  • 深入浅析python3 依赖倒置原则(示例代码)

    场景 针对园区停车信息,需要对各个公司提供的停车数据进行整合并录入自家公司的大数据平台 数据的录入无外乎就是对数据的增删改查 下面上一个常规的写法(未符合依赖倒置),整合来自 长安和丰田 的停车数据 class Changan(object): def __init__(self): self.type = 'changan' def ca_add(self): print('%s 新增' % self.type) def ca_del(self): print('%s 删除' % self.t

  • Vue+Element使用富文本编辑器的示例代码

    Vue+Element使用富文本编辑器的示例代码

    富文本编辑器在任何项目中都会用到,在Element中我们推荐vue-quill-editor组件,现在我就把它提供给大家,希望对大家有用.具体截图如下: 安装编辑器组件 具体方法:npm install vue-quill-editor --save 编写组件 首先我们在components文件夹里创建ue.vue组件,效果图如下: 组件 <!-- 组件代码如下 --> <template> <div> <script id="editor"

  • Spring MVC 使用支付宝接口完成在线支付的示例代码

    Spring MVC 使用支付宝接口完成在线支付的示例代码

    项目中要使用到在线支付功能 目前常用的在线支付手段主要是 支付宝 和微信. 这里我使用的是支付宝支付,支付宝有个好处就是他有一个沙箱模式 即使没有申请渠道的资格也可以体验一把在线支付. 第一步:完善沙箱信息 进入支付宝的开发者中心 就可以看到有个沙箱环境 使用支付宝提供的秘钥生成工具 生成对应的秘钥 一定要保存好.支付宝推荐使用RSA2(SHA256)秘钥 把自己的公钥填上去就可以了. 第二步 阅读在线支付开发文档 里面需要的配置信息 对应的使用沙箱环境的信息 第三步 环境搭建 下载服务端SDK

  • yii2实现Ueditor百度编辑器的示例代码

    今天在网上看了下有关图片上传的教程,历经挫折才调试好,现在把相关代码及其说明贴出来,以供初次使用的朋友们参考. 资源下载 yii2.0-ueditor下载路径:yii2-ueditor-jb51.rar 效果演示: 安装方法: 1.下载yii2-ueditor 2.将下载的yii2-ueditor-master 修改 ueditor (注意:修改成其他文件名请修改插件内对应的命名空间) 3.将文件方在 根目录/common/widgets 下即可 调用方法: 在backend/controlle

  • python3调用R的示例代码

    由于工作需要,在做最优分箱的时候,始终写不出来高效的代码,所以就找到了R语言中的最优分箱的包,这个时候考虑到了在python中调用R语言,完美结合.在国内的中文网站搜了半天,搭建环境的时候一直出现" R_user not defined"这个错误,简直恼人,最后在Stack Overflow网站上找打了解决办法. 我的环境是:win7 : 使用anaconda3 : (一)首先你要有个anaconda包: 这个就不多说了. (二)你要有个R语言的软件 本人使用的微软开发的这个.当然你使

  • Java使用TCP实现在线聊天的示例代码

    Java使用TCP实现在线聊天的示例代码

    客户端的代码: package tcp.http; import java.io.*; import java.net.*; import java.util.Scanner; public class Client{ public static void main(String[] args) throws IOException{ Scanner scanner=new Scanner(System.in); //1.创建Socket Socket tcpClientSocket=new S

  • ASP下使用FCKeditor在线编辑器的方法

    先说一下我的测试环境:XPSP2,IIS5.1,FCKeditor2.0 在IIS上建立一个新的站点,我直接取名为FCKeditor 在DW里建立一个相对应的站点,测试服务器为本机,支持VBScript 下载FCKeditor2.0,这个东西是开源的,网上能下到的地方很多,自己找去-- 下载下来的应该是压缩包,解压到FCKeditor站点根目录,什么都不需要更改,直接就可以开始调用了.等你会了的时候,会发现简单得要死去! 在站点根目录下,新建一个index.asp页面,段内加如下代码(调用编辑器

  • python3.x提取中文的正则表达式示例代码

    实例一: 读取txt文件中含有中文的字符 import re ##此处使用的编辑器是python3.x d="[\u4e00-\u9fa5]+" #中文匹配的符号 f=open('test.txt','rb') #这里以二进制读取,方便中文的转义 ,不设置回报错 这里的TXT文档 #文档内容: Hello world China 你好,你好好 This is a txt File s2f程序员杂志一2d3程序员杂志二2d3程序员杂志三2d3程序员杂志四2d3 #此处涉及到文本的读取工作

随机推荐