Javascript 如何在输入Haml中添加ace编辑器

请帮助，我是haml和ace的新手，但我想将ace合并到一些现有的文本区域。我看到了一个类似的问题，但它是在html中。我不知道如何用haml代码翻译这个解决方案

这是textarea的现有haml代码

        #phoenix_tab.tab-pane.active{ data: { target_id: 'phoenix_tab', role: "tabpanel" }}
            = f.input :phoenix_query_string, label: 'Query String', as: :text, placeholder: 'Enter Phoenix Query String'
            .col-md-offset-2.text-muted{ style: 'margin-top: -1em; text-indent: 10px; font-size: 80%' }
              * Execution type should be set to 'Phoenix or Phoenix (enhanced)' for this to take effect

我已经尝试将这个js添加到代码中

    var editor = ace.edit("bigdata_query_phoenix_query_string");
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/sql")

这就是它的风格

#bigdata_query_phoenix_query_string {
  position: absolute;
  top: 0; 
  right: 0;
  bottom: 0;
  left: 0;
}

我还将ace.js和mode-sql.js添加到我的js文件中，但结果如下图所示

预期结果：Ace编辑器应用于textarea

实际结果：无文本区域可用

---

我不太明白我做错了什么。请帮助

在显示的haml代码段中没有id为bigdata\u query\u phoenix\u query\u字符串的元素，因此它可能是错误的原因。但一般来说，haml本身与问题不太相关，只要确保它生成的html与另一个问题中的html相当即可。您显示的haml代码片段中没有id为bigdata\u query\u phoenix\u query\u字符串的元素，因此可能是错误的原因。但一般来说，haml本身与问题不太相关，只要确保它生成的html与另一个问题中的html相当即可。