如何在Ace JS代码编辑器中添加Emmet支持？

Question

我正在尝试在我的项目中嵌入 ace代码编辑器。 我正在使用以下代码初始化我的代码编辑器，现在我想启用 emmet js功能。 我可以看到ext-emmet.js扩展已经在ace.js 预打包版本的src目录中。

我需要帮助启用 emmet扩展功能。 这是我的初始化代码。

  var e = ace.edit("editorId"); // id of the code editor div 
  e.setTheme("ace/theme/monokai");
  e.getSession().setMode("ace/mode/html");
  e.setBehavioursEnabled(true);
  e.getSession().setTabSize(2);

很明显，我正在页面顶部添加ace.js。如果需要，我可以提供更多细节。

- ʞɹᴉʞ ǝʌɐp

Answer 1

请参考ace demo中的539-543行代码。

基本上，您需要加载emmet源脚本（例如从https://github.com/nightwing/emmet-core/blob/master/emmet.js）和ace扩展程序/src/ext-emmet.js。调用require("ace/ext/emmet");以便执行脚本。
之后调用editor.setOption("enableEmmet", true);。
请参见jsbin.com/ace-emmet/1/edit以获取实时演示。

- a user

---

我已经尝试添加了扩展和emmet.js，并按照您提到的将选项设置为true，但什么也没有发生。我已经在我的HTML页面头部添加了来自您链接中的ace.js、ext-emmet.js和emmet.js，并确保它们正在加载。它甚至没有抛出任何错误。我认为这其中还有更多问题。 - ʞɹᴉʞ ǝʌɐp

请添加 require("ace/ext/emmet"); 以便 requirejs 执行该脚本。 - a user

是的，谢谢。它有效了。我刚刚编辑了你上面的答案和你提供的示例。 - ʞɹᴉʞ ǝʌɐp