At.js 和 CodeMirror 的结合答案

【问题标题】：Combination of At.js and CodeMirrorAt.js 和 CodeMirror 的结合
【发布时间】：2016-06-01 10:39:11
【问题描述】：

我正在尝试将 CodeMirror 和 At.js 组合成一个“编辑器”。我在当前版本的编辑器中使用 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));
    });

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

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

我自己的猜测是 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>

【问题讨论】：

标签： jquery codemirror key-events

【解决方案1】：

原来是一个愚蠢的问题。 CodeMirror 将自己包裹在 <textarea> 周围，并且对实际放置的 div 不执行任何操作。

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

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

我现在可以让 atWho 绑定，但是它将 html 插入为纯文本。这就是您期望 CodeMirror 做的事情。但是我需要插入实际的 HTML，而不是 HTML 作为纯文本。所以我会研究如何解决这个问题。

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

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

【讨论】：