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

Question

我正在尝试使用CodeMirror和埃米特构建一个简单的浏览器内原型工具，它可以很容易地更新到未来版本的库中。它可以工作，但我需要的下一件事是允许键映射和片段定制，而不需要接触lib文件。

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

Emmet提供广泛的调整，您可以使用微调您的插件体验。几乎所有官方开发的编辑器插件(除了PSPad和基于浏览器的插件)都有扩展支持:一个特殊的文件夹，您可以在其中放置json和js文件来扩展Emmet。请参考与您的编辑器插件捆绑在一起的自述文件，找出Emmet在哪里寻找扩展。

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

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

注意:在主流https://github.com/emmetio/emmet中，片段现在被移动到一个单独的文件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

片段文件只是主emmet项目中的一个副本。

当前版本

• emmet: 2014年6月20日，沙0edf 759560353865b9619270752ffec6b2450977
• emmet/codemirror: 2014年4月29日，沙16a52454 aeba7ae0520fd85df3079f39f796109c
• CodeMirror: 2014年8月5日，沙b4ecdded6357d0364fc9a51240675c9f040f039c

你能帮我吗？

下一次尝试

按照Sergey的建议，下面是我尝试过的，使用jquery的ajax工具

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

它现在在控制台中没有错误地加载，但是我的新代码片段不能工作。我从A. Montalenti的精彩演讲中挑选了它，它让我在他的emmet.js中发现了http://emmet.io/，在那里它工作得非常完美：

{
    "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这样的默认代码片段工作得很好。

Answer 1

如果您查看方法，您将看到它实际上读取给定的文件列表，组合它们并传递给方法。

所以你有两个选择：

1. 由于浏览器中没有文件系统，所以您必须实现自己的基于AJAX的文件系统:请参阅文件模块描述。
2. 使用loadUserData、loadSnippets等方法，并传递普通的JSON文件。