如何在ace js代码编辑器中添加emmet支持?

问题描述:

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

I am trying to embed ace code editor in my project. I am initializing my code editor with following code and now I want to enable emmet js features. I can see the ext-emmet.js extension is already their in the src directory of ace.js pre-packaged version

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

I need help in enabling emmet extension features. So here is my initialization code.

  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.如果需要,我可以提供更多详细信息.

Obviously I am adding the ace.js on top of the page. I can provide more details if needed.

请参见基本上,您需要加载emmet源脚本(例如,从 https: //github.com/nightwing/emmet-core/blob/master/emmet.js )和/src/ext-emmet.js中的ace扩展 调用require("ace/ext/emmet");,以便requirejs执行脚本
然后调用editor.setOption("enableEmmet", true);.
有关实时演示,请参见jsbin.com/ace-emmet/1/edit.

Basically you need to load emmet source script (e.g. from https://github.com/nightwing/emmet-core/blob/master/emmet.js) and ace extension from /src/ext-emmet.js call require("ace/ext/emmet"); so that requirejs executes the script
And after that call editor.setOption("enableEmmet", true);.
See jsbin.com/ace-emmet/1/edit for live demo.