像Khanacademy JavaScript这样的文本编辑器_Javascript_Jquery_Html

像Khanacademy JavaScript这样的文本编辑器

javascript jquery html

像Khanacademy JavaScript这样的文本编辑器,javascript,jquery,html,Javascript,Jquery,Html,我在想我该怎么做像Khanacademy那样的东西如果您查看下面的链接，它们基本上有一个文本框，您可以在其中输入文本，然后根据您输入的“关键字”将突出显示它们，例如，如果您键入function，它将返回蓝色的单词function。但是如果你做了rect（）之类的事情，它会在屏幕旁边画一个矩形。我想这样做，但与HTML，所以如果你把某些关键字，它会使它成为一个特定的颜色，然后它会输出你的代码在屏幕旁边的实际HTML。我猜你可以为输出做一些类似iFrame的事情，但不确定其他的链接：我在网上查

我在想我该怎么做像Khanacademy那样的东西

如果您查看下面的链接，它们基本上有一个文本框，您可以在其中输入文本，然后根据您输入的“关键字”将突出显示它们，例如，如果您键入function，它将返回蓝色的单词function。但是如果你做了rect（）之类的事情，它会在屏幕旁边画一个矩形。我想这样做，但与HTML，所以如果你把某些关键字，它会使它成为一个特定的颜色，然后它会输出你的代码在屏幕旁边的实际HTML。我猜你可以为输出做一些类似iFrame的事情，但不确定其他的

链接：

我在网上查过东西，但找不到类似的东西

另一件事是codecademy.com上的代码编辑器

如果你需要更多信息，请告诉我

这是我最后的选择，我已经找了2个月了D:

一个好的语法高亮工具是CodeMirror（）。它很容易实现，从中获取文本，更改颜色等

我知道您也希望能够允许在文本框中进行编程。在不创建自己的代码解析器的情况下实现这一点的一个简单方法是在文本框中使用javascript代码。然后可以对文本框中的文本使用javascript的

eval（）

函数来执行此javascript

然后，您只需将自己的函数（如

rect（）

）编码为html页面中的javascript函数。对于

rect（）

等绘图函数，您已经可以使用HTML5画布对象（）。然后，您可以像建议的那样在iframe中绘制此画布，或者只需在另一个div中绘制

我希望这会给你一些启发或让你开始

编辑：我提供了一个小示例：（您的浏览器必须支持HTML5才能工作）


.code镜像{高度：自动；宽度：500px；边框：1px实心#ddd；}
.CodeMirror滚动{最大高度：200px；}
.CodeMirror预{左填充：7px；线高度：1.25；}
#图纸{位置：绝对；左侧：550px；顶部：10px；边框：1px实心#ddd；宽度：500px；高度：400px；}
//拉伸试验
Rect（20,20100100）；


var editor=CodeMirror.fromTextArea（document.getElementById（“代码”）{
行号：对，
模式：“文本/javascript”，
对
});
函数矩形（x、y、宽度、高度）
{
var c=document.getElementById（“画布”）；
var ctx=c.getContext（“2d”）；
ctx.rect（x，y，宽度，高度）；
ctx.stroke（）；
}

<html>

<link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>

<style>
  .CodeMirror { height: auto; width: 500px; border: 1px solid #ddd; }
  .CodeMirror-scroll { max-height: 200px; }
  .CodeMirror pre { padding-left: 7px; line-height: 1.25; }
  #drawing { position:absolute; left:550px; top:10px; border: 1px solid #ddd; width:500px; height: 400px; }
</style>

<textarea id=code>
// Drawing test
Rect(20,20,100,100);
</textarea>

<div id="drawing">
    <canvas id="canvas" width="500" height="400"></canvas>
</div>

<br><input type="button" onclick="eval(editor.getValue())" value="Run" />

<script>
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
      lineNumbers: true,
      mode: "text/javascript",
      matchBrackets: true
    });
</script>

<script>
<!-- Your functions go here -->
function Rect(x,y,width,height)
{
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.rect(x,y,width,height);
    ctx.stroke(); 
}
</script>

</html>