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

Question

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

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

My initial thoughts are perhaps to create a shared class for all of the editors and append it to the father div with jQuery, but when I tried using a class instead of an id for the design,the editor won't load. 我不太擅长处理 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 实例与编辑器关系。 它将为您节省很多未来的焦虑。 您可以只切换会话并保留编辑器 static。

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

问题描述

2 个解决方案

解决方案1
1 2022-01-29 11:14:38

解决方案2
0 2022-01-31 19:24:52

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

问题描述

2 个解决方案

解决方案1 1 2022-01-29 11:14:38

解决方案2 0 2022-01-31 19:24:52

解决方案1
1 2022-01-29 11:14:38

解决方案2
0 2022-01-31 19:24:52