如何为 codemirror 自定义 Emmet (snippets.json)？

Question

我正在尝试使用CodeMirror 和Emmet 构建一个简单的浏览器内原型设计工具，它可以很容易地更新到未来版本的库。 它可以工作，但我需要做的下一件事是在不接触 lib 文件的情况下允许键盘映射和 sn-ps 自定义。

参考http://docs.emmet.io/customization/

Emmet 提供了广泛的调整，您可以使用这些调整来微调您的插件体验。几乎所有官方开发的编辑器插件（除了 PSPad 和基于浏览器的）都支持扩展：一个特殊的文件夹，您可以在其中放置 json 和 js 文件以扩展 Emmet。请参阅与您的编辑器插件捆绑在一起的 README 文件，以了解 Emmet 在何处查找扩展。

太棒了！但是...不幸的是，我在https://github.com/emmetio/codemirror 中找不到此类信息。等等……好吧，那是“基于浏览器的”。

我在dist/emmet.js 中找到了一个函数loadExtensions: function(fileList)，但我不确定如何使用它，或者它是否是正确的方法。

注意： 在主流 https://github.com/emmetio/emmet 中，sn-ps 现在被移动到一个单独的文件 snippets.json，这听起来很适合维护和参考，但那不是（还？） codemirror 插件的案例。

我试过了：

emmetPlugin.emmet.loadExtensions(['snippets.json']);

（还有文件的完整路径），但得到了：

Uncaught TypeError: Object #<Object> has no method 'readFileSync' emmet.js:18352
_.extend._read emmet.js:18352
_.extend.readText emmet.js:18376
bound emmet.js:2006
next emmet.js:22295
loadExtensions emmet.js:22337
window.onload (index):62

sn-ps 文件只是 emmet 主项目中的一个副本。

当前版本：

• emmet：2014 年 6 月 20 日，SHA 0edf759560353865b9619270752ffec6b2450977
• emmet/codemirror：2014 年 4 月 29 日，SHA 16a52454aeba7ae0520fd85df3079f39f796109c
• CodeMirror：2014 年 8 月 5 日，SHA b4ecdded6357d0364fc9a51240675c9f040f039c

你能帮我吗？

下一次尝试

根据 Sergey 的建议，我尝试了以下方法，使用 jquery's ajax facility：

window.onload = function() {
    // ...
    $.getJSON( "snippets.json", function( data ) {
        emmetPlugin.emmet.loadUserData(data);
    });
    // ...
};

使用file: 协议，页面会引发No 'Access-Control-Allow-Origin' header is present on the requested resource. 异常。

所以它需要从一些 HTTP 服务器加载，比如

python -m SimpleHTTPServer

它现在可以在控制台中正常加载，但我的新 sn-p 不起作用。 我从excellent talk from A. Montalenti 中挑选了它，这让我发现Emmet.io，在他的emmet.js 中，它完美地工作：

{
    "abbreviations": {
         "bootstrap": "html>(head>meta[charset=UTF-8]+title{${1:Bootstrapped}}+link[href=\"../css/lib/bootstrap.css\"]+link[href=\"../css/lib/bootstrap-responsive.css\"]+script[src=\"../js/lib/bootstrap.js\"]+script[src=\"../js/lib/jquery.js\"])+body>div.container",
    }
}

虽然像 doc4 这样的默认 sn-ps 运行良好。

Answer 1

如果您查看loadExtensions method，您会发现它实际上读取了给定的文件列表，将它们组合起来并传递给loadUserData method。

所以你有两个选择：

1. 由于浏览器中没有文件系统，你必须实现自己的，基于 AJAX：见file module description
2. 使用loadUserData、loadSnippets 等方法并传递纯 JSON 文件。