如何使用 Javascript 和 Ace.JS 将代码单元格添加到 HTML 页面？

Question

是否可以在一个页面中创建多个文本编辑器单元格？我想要的结果是有一个按钮，单击该按钮允许用户添加新的代码单元格，用户可以在其中编写和稍后运行。类似于 Jupyter 笔记本。编辑器本身是从 ace.js 库中导入的。

为此，我想我需要一些函数 add_editor(parent_div) 将新的文本编辑器添加到作为参数给出的 div 中。（我没有实施）

我最初的想法可能是为所有编辑创建一个共享 class 并将其附加到父 div 和 jQuery，但是当我尝试使用 class 而不是设计的 id，编辑器将不会加载。我不太擅长处理 DOM（尤其是没有 React），所以即使这个解决方案对你来说似乎很明显，但对我来说可能不是。

这是我目前拥有的代码的最后一个工作版本

<html lang="en">
   <head>
      <title>ACE in Action</title>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
      <!-- Define the editor's CSS !-->
      <style type="text/css" media="screen">
         #editor {
         width: 100%;
         height: 100%;
         }
      </style>
   </head>
   <body>
      <div class="row">
         <!-- a row of two columns: the first will contain the text editors, the second is irrelevant !-->
         <div class="col-9" style="height:200px;">
            <div class="container" style="">
               <div id="editor">
                  <!-- the div containing the code, has the id "editor" !-->
                  def print_something():
                  print(a)
               </div>
            </div>
         </div>
         <div class="col-3">
            empty column
         </div>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js" type="text/javascript" charset="utf-8"></script>
      <script>
         function configure_editor(){
             var editor = ace.edit("editor");
             editor.setTheme("ace/theme/monokai");
             editor.session.setMode("ace/mode/python");
             editor.getSession().setUseWrapMode(true);
             editor.setShowPrintMargin(false);
         }
         configure_editor()
         
      </script>
   </body>
</html>

非常感谢您的帮助！

编辑：我需要在 Javascript 或 Jquery 中解决此问题，无需 React。

Answer 1

我想我已经通过 jQuery 找到了一些自己的解决方案，尽管它看起来很乱。每次都会添加一个新的编辑器，并增加 id，即：“editor0”、“editor1”、“editor2”等。

这是完整的代码

<html lang="en">
   <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <title>ACE in Action</title>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
      <!-- Define the editor's CSS !-->
   </head>
   <body>
      <div class="row">
         <!-- a row of two columns: the first will contain the text editors, the second is irrelevant !-->
         <div class="col-9" style="height:200px;">
            <div id="editors_container">
            </div>
         </div>
         <div class="col-3">
            <button id="add_editor">Add a new editor</button>
         </div>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js" type="text/javascript" charset="utf-8"></script>
      <script>
          existing_editors = [];
          $(document).ready(function(){
            $("#add_editor").click(function(){
                console.log("reached here!")
                let editor_id = "editor"+existing_editors.length;
                $newDiv = $("<div id="+editor_id+" style=width:100%;height:100%>"+"</div>");
                $("#editors_container").append($newDiv);
                let editor = ace.edit(editor_id);
                editor.setTheme("ace/theme/monokai");
                editor.session.setMode("ace/mode/python");
                editor.getSession().setUseWrapMode(true);
                editor.setShowPrintMargin(false);
                existing_editors.push(editor);
            });
          });

      </script>
   </body>
</html>

Answer 2

更简洁的方法是使用您自己的结构为每个实例分配一个编辑器。随着 jquery:

<div id="instance0"></div><div id="instance1"></div>

<script>

var instances[];

var $rootElement = $('#instance0');
newInstance($rootElement);
var $rootElement = $('#instance1');
newInstance($rootElememt);

function newInstance($rootElement){
    var instance = {};
    instance.id = $rootElement.attr('id');
    instance.$root = $rootElement;
    instance.editor = ace.edit($rootElement[0]);
    instance.editor.instance = instance;
    instances.push(instance);
}
</script>

这为您提供了 1 对 1 的实例与反向指针的编辑器关系。它会在未来为你省去很多焦虑。您可以只切换会话并保持编辑器不变。

如何使用 Javascript 和 Ace.JS 将代码单元格添加到 HTML 页面？

How to add code cells to HTML page with Javascript and Ace.JS?

html

javascript

css

ace-editor