logo标签列表

如何在网页中嵌入一个代码编辑器？

javascriptpython
9

问题 

I want to create a page with a code editor embedded in it.I looked up codemirror
but i am having problems using it as i am new to java script.

我正在寻找一种简单的方法将代码编辑器嵌入到页面中（使用 JavaScript 或 Python）。请问有人可以提供相关链接/教程或方法吗？

3个回答
13
Trunecek，非常感谢您的帮助。但我在理解一些内置命令时遇到了一些问题，能否给我一些相关文档链接呢？ - advocateofnone
在他们的页面上，你需要的一切都有（我猜）。API参考在这里：http://ace.ajax.org/#nav=api，如何指南在这里：http://ace.ajax.org/#nav=howto。如果你有具体的问题，请尝试在这里提问（新问题）或通过评论，我会尽力回答你。祝你有美好的一天。 - Jakub Truneček
10

我知道这是一篇旧文章， 以下是我在开发在线代码编辑器时所采用的方法， 你可以使用ace编辑器。

从ace中查看此示例。

<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
    #editor { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
</head>
<body>

<div id="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/javascript");
</script>
</body>
</html>

9

还有一个可以嵌入的JavaScript代码编辑器：CodeJar

它只有2 kB，而且具有出色的功能。

.editor {
    color: #fff;
    background: #282a36;
    border-radius: 6px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    font-family: monospace;
    font-size: 14px;
    font-weight: 400;
    min-height: 240px;
    letter-spacing: normal;
    line-height: 20px;
    padding: 10px;
    tab-size: 4;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>CodeJar</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-twilight.min.css" rel="stylesheet" />
</head>
<body>
<div class="editor language-js">function fibonacci(n) {
 let num;

 if (n >= 2) {
  num = fibonacci(n - 1) + fibonacci(n - 2);
 } else {
  num = n
 }

 return num;
}</div>

<script type="module" id="code">
  import {CodeJar} from "https://medv.io/codejar/codejar.js?"

  const jar = new CodeJar(
    document.querySelector(".editor"), 
    Prism.highlightElement
  )
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接