At.js 和 CodeMirror 的组合

Question

我正在尝试将 CodeMirror 和 At.js 合并为一个 "editor"。我在当前版本的编辑器中使用 At.js 来插入代表 DSL 某些方面的 HTML 的位。

所以at.js基本上处理了编辑器的自动完成部分。这一切都很好。然而，编辑器需要一些微调（行号、更好地处理输入等）。

CodeMirror 提供了这个。然而，它不能很好地与 At.js 配合使用。出于某种原因（我还找不到）At.js 没有注册事件或绑定到我已将 CodeMirror 绑定到的 domElement。

我试图通过捕获 CM 事件并修复事件并在所述 domElement 上触发这些事件来手动使 CodeMirror 事件在 DOM 中冒泡。到目前为止运气不好。

    cm.on("keyup", function ( editor, e ) {
        e           = $.event.fix(e);
        e.namespace = 'atwhoInner';
        console.warn("cmUp", e);
        $(self.domElement).trigger($.event.fix(e));
    });

    cm.on("keydown", function ( editor, e ) {
        e           = $.event.fix(e);
        e.namespace = 'atwhoInner';
        console.warn("cmDown", e);
        $(self.domElement).trigger($.event.fix(e));
    });

我可以捕捉到事件，所以我知道它工作正常。

我会看看是否可以创建一个 fiddle 来准确模拟我的情况（我将在这之后做）。同时，如果有人能指出我的大致方向，那就太好了。

我自己的猜测是 CM 阻止事件冒泡或阻止 At.js 附加它需要的一些 HTML 元素。或者我需要将 A.js 绑定到不同的元素。

快速概览一下我得到的内容（一点也不完整）。

var domElement = $('#someid');

    //Using domElement directly causes CodeMirror to flipout.
    var cm = CodeMirror(domElement[0], {
        mode:        "htmlmixed",
        extraKeys:   { "Ctrl-Space": "autocomplete" },
        value:       ' <span></span>',
        lineNumbers: true
    });

    cm.on("keyup", function ( editor, e ) {
        e           = $.event.fix(e);
        e.namespace = 'atwhoInner';
        console.warn("cmUp", e);
        $(self.domElement).trigger($.event.fix(e));
    });

    cm.on("keydown", function ( editor, e ) {
        e           = $.event.fix(e);
        e.namespace = 'atwhoInner';
        console.warn("cmDown", e);
        $(self.domElement).trigger($.event.fix(e));
    });

    domElement.atwho({            
            at:         'fancystuff.',
            displayTpl: "${displayTpl}",
            insertTpl:  "${insertTpl}",
            showTheAt:  false,
            limit:      100,
            searchKey:  "searchField",
            suffix:     "",
            data:       [{displayTpl:'some templating', insertTpl: 'some templating', searchField;'stuff to search'},      
                         {displayTpl:'some templating', insertTpl: 'some templating', searchField;'stuff to search'}
                        ]
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='someid' contenteditable='true'></div>

Answer 1

原来是个愚蠢的问题。 CodeMirror 将自己包裹在 <textarea> 周围，并且对它实际放置的 div 不做任何事情。

这段代码解决了我的问题（有点）：

$('.CodeMirror',self.templateDomElement).find('textarea').atwho({stuff: "goeshere"});

我现在可以得到 atWho to bind，但是它将 html 作为明文插入。这就是您希望 CodeMirror 执行的操作。但是我需要插入实际的 HTML，而不是 HTML 作为纯文本。所以我会研究如何解决这个问题。

等我解决了这个问题再回来。

编辑：事实证明这几乎是不可能解决的。 At.js 使用 dom 做了一些时髦的事情来放置一个包含所有可能选项的容器。我最终使用 CodeMirror 的默认功能编写了自己的提示函数。

At.js 和 CodeMirror 的组合

Combination of At.js and CodeMirror

jquery

codemirror

key-events