1
私はCodeMirrorとAt.jsを1つの "エディタ"に結合しようとしています。私は現在のバージョンのエディタでAt.jsを使用して、DSLの特定の側面を表すHTMLのビットを挿入しています。At.jsとCodeMirrorの組み合わせ
したがって、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>