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

编码器

正在为我的项目使用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

有人可以告诉我我在做什么错吗?

您可以在此处下载该项目

非常感谢!

谢尔盖·基库诺克(Sergey Chikuyonok)

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

CodeMirror 使用 JQuery 展开

获取在CodeMirror的特定行中使用的缩进

如何为Codemirror自定义Emmet(snippets.json)?

如何在Python中使用Selenium编辑CodeMirror?

从@ ctrl / ngx-codemirror库中,如何使用typeScript和angular 5获取codeMirror实例

使用JavaScript提交Codemirror数据无法正常工作

Codemirror搜索使用javascript模拟CTRL + F键

Codemirror 自动完成对 javascript 不起作用

使用require.js设置codemirror.js

在编辑器textarea上使用jQuery .keyup的CodeMirror

使用CSS调整CodeMirror编辑器的大小无效

CodeMirror使用多个提示源进行自动完成

使用Keyup而不是CodeMirror中的keypress进行高级键映射

CodeMirror MarkText

如何在Codemirror文本编辑器中使用onchange,onmouseup事件

在CodeMirror中使用自定义键进行自动完成时,如何打印已按下的键?

如何在Codemirror编辑器中使用cypress .type()进行键入?

ngx-codemirror-无法在XML消息中使用折叠装订线

使用Emmet扩展Sublime Text 3中的多值缩写

當我重新加載服務器時,將 CodeMirror 與 Vuejs/Nuxtjs 一起使用會導致錯誤“CodeMirror”未定義

我可以与codemirror一起使用任何库来实现自动完成吗?

使用Codemirror的React Component不会在提交表单时发送所有数据

使用带有缩进的angular-ui-codemirror进行代码美化

当htmlMode true与Codemirror配合使用时,Summernote html代码视图无法正常工作

使用Codemirror的简单模式的奇怪正则表达式行为

Codemirror设置GutterMarker样式

如何杀死CodeMirror实例?

CodeMirror从按钮更改主题

Firepad 和 CodeMirror 6