如何在 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.

推荐答案

参见 ace 演示中的第 539-543 行.

基本上你需要加载 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.jscall 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.

这篇关于如何在 ace js 代码编辑器中添加 emmet 支持?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！