在Codemirror / emmet中使用javascript扩展缩写

时间:2015-03-17 22:02:07

标签: javascript codemirror emmet

我正在为我的项目使用codemirror和emmet。当交互式完成(CTRL + E)时,emmet缩写的扩展在codemirror编辑器中工作得很好。我想更进一步,通过扩展JavaScript代码中的缩写来创建代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="codemirror/lib/codemirror.css">
        <link rel="stylesheet" type="text/css" href="codemirror/lib/codemirror.css">
        <script type="text/javascript" src="codemirror/lib/codemirror.js"></script>
        <script type="text/javascript" src="codemirror/lib/codemirror.js"></script>
        <script type="text/javascript" src="codemirror/mode/xml/xml.js"></script>
        <script type="text/javascript" src="codemirror/mode/javascript/javascript.js"></script>
        <script type="text/javascript" src="codemirror/mode/css/css.js"></script>
        <script type="text/javascript" src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
        <script type="text/javascript" src="resource/emmet.js"></script>
    </head>
    <body>
        <div id="editorContainer"></div>
        <script type="text/javascript">

            var Test = {};
            Test.editor = null;

            Test.init = function() {
                Test.editor = CodeMirror(document.getElementById('editorContainer'), {
                    autofocus: true,
                    lineNumbers: true,
                    mode: "text/html",
                    profile: 'xhtml', /* define Emmet output profile */
                });
                emmetCodeMirror(Test.editor);
                Test.ol();
            }

            Test.ol = function() {
                Test.editor.getDoc().replaceSelection('ol>li*3', 'end');
                Test.editor.focus();
                emmetCodeMirror.emmet.run('expand_abbreviation', Test.editor);
            };

            Test.init();
        </script>
    </body>
</html>

通过调用Test.ol()插入文本ol>li*3,但执行

emmetCodeMirror.emmet.run('expand_abbreviation', Test.editor);

会产生TypeError: editor.getProfileName is not a function emmet.js:41541

有人可以告诉我我做错了吗?

你可以download the project here

非常感谢!

1 个答案:

答案 0 :(得分:1)

您正在将CodeMirror编辑器实例传递给emmet.run()而不是EmmetEditor。无论如何,最终的解决方案是简单地执行注册的Emmet命令,例如

Test.editor.execCommand('emmet.expand_abbreviation')