我正在尝试使用CodeMirror和Emmet构建一个简单的浏览器内原型制作工具,可以轻松更新到未来版本的库。 它的工作原理,但我接下来需要的是允许键盘和片段自定义,而无需触及lib文件。
参考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中,片段现在被移动到单独的文件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项目中的一个副本。
当前版本:
你能帮帮我吗?
按照谢尔盖的提议,这是我尝试过的,使用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
现在它在控制台中加载时没有错误,但我的新代码片段不起作用。 我从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
这样的默认代码段效果很好。
答案 0 :(得分:1)
如果您查看loadExtensions
method,您会看到它实际上会读取给定的文件列表,将它们合并并传递给loadUserData
method。
所以你有两个选择:
loadUserData
,loadSnippets
等方法并传递普通的JSON文件。