未分類
25 4 月 2020

如何在网站中插入一个可以在线的 js 编辑器？

如何在网站中插入一个可以在线的 js 编辑器？

資深大佬 : juventusryp 60

背景：

想开发一个简单的网站，管理员可以添加 JS 题目，然后学生在前端使用在线的编辑器提交代码，然后获取相应份数（类似 LeetCode ）

后端用了 flask，但对前端不熟悉，查了资料，想使用 monaco-editor。

我觉得大致思路应该是前端用 monaco-editor，学生输入代码后点击提交，然后使用相对应的 api 获取输入内容，通过 eval 函数计算结果传给后台，后台再进行计算。

但是不知道具体代码该如何编写，不知道有没有人有类似开发经验或者相关代码可以参考？

大佬有話說 (11)

  • 資深大佬 : mxT52CRuqR6o5

    Vscode 啊

  • 資深大佬 : rrfeng

    现在都是 vscode 了，应该有插件。

    写 angular 查问题几乎每个例子都有 stackbliz 真的无敌

  • 主 資深大佬 : juventusryp

    @mxT52CRuqR6o5 不太明白，我想是在网页中插入在线的编辑器，这个 vscode 也可以吗？

  • 主 資深大佬 : juventusryp

    @rrfeng 能说清楚一点吗，不太明白

  • 資深大佬 : beastk

    https://www.runoob.com/try/try.php?filename=tryhtml_intro 其实很简单，加载一个 iframe，把 js 放到 iframe 里面去执行就行

  • 資深大佬 : lemon6

    你的思路很正确啊，为啥不自己动手试试呢？

  • 資深大佬 : cosmic

    editor.getModels[0].getValue()

  • 資深大佬 : rain0002009

    就用 monaco-editor 就行了 你看他介绍和公司就知道它和 vscode 是啥关系

  • 資深大佬 : KasuganoSoras

    CodeMirror + Eval 不就可以了吗？
    https://codemirror.net/demo/fullscreen.html

  • 資深大佬 : Mutoo

    你这种需要最好直接上开源的 online judgement 系统，也就是 OJ。
    安全上需要有特殊的隔离机制，防止学生提交的代码直接把你系统黑了。

  • 資深大佬 : CallMeReznov

    主想要的类似于 w3cschool 与 runnoob 那种能在线运行简单例子的编译区

    其实你前段用啥都没区别，主要还是编写调试与提交后评分返回的问题