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

Question

我正在尝试使用CodeMirror构建一个简单的浏览器内原型(prototype)工具。和 Emmet ，可以轻松更新到 future 版本的库。它可以工作，但我接下来需要的是允许键盘映射和片段自定义而不触及 lib 文件。

引用http://docs.emmet.io/customization/

Emmet offers wide range of tweaks you can use to fine-tune your plugin experience. Almost all officially developed editor plugins (except PSPad and browser-based) has extensions support: a special folder where you can put json and js files to extend Emmet. Please refer to README file bundled with your editor’s plugin to find out where Emmet looks for extensions.

太棒了!但是...不幸的是，我在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 项目中的文件的副本。

当前版本:

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

你能帮我吗？

下一步尝试

根据谢尔盖的提议，这是我尝试使用 jquery's ajax facility 的方法:

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

使用file:协议(protocol)，页面会引发请求的资源上不存在“Access-Control-Allow-Origin” header 。异常。

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

python -m SimpleHTTPServer

它现在可以在控制台中正确加载，但我的新代码片段不起作用。我从 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 这样的默认代码片段效果很好。

Answer 1

如果你看一下loadExtensions method ，您会看到它实际上读取给定的文件列表，将它们组合起来并传递给 loadUserData method .

所以你有两个选择:

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