Question

我正在尝试将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>

Answer 1

原来是一个愚蠢的问题。 CodeMirror围绕<textarea>进行自我封装，并且不对实际放置的div执行任何操作。

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

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

我现在可以得到绑定，但是它将html作为明文插入。您期望CodeMirror做什么。但是我需要插入实际的HTML，而不是HTML作为纯文本。因此，我将研究如何处理这个问题。

当我解决它时，我会回到这个问题。

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

At.js和CodeMirror的组合

1 个答案: