Ich versuche, CodeMirror und At.js zu einem einzigen "Editor" zu kombinieren. Ich benutze At.js in einer aktuellen Version des Editors, um HTML-Bits einzufügen, die bestimmte Aspekte einer DSL darstellen.Kombination von At.js und CodeMirror
So behandelt at.js im Grunde den Autokomplettierungsteil des Editors. Das alles funktioniert gut. Der Editor benötigt jedoch eine Feinabstimmung (Leinenzahlen, bessere Handhabung der Eingabe usw.).
CodeMirror bietet dies. Es spielt jedoch nicht gut mit At.js. Aus irgendeinem Grund (den ich noch nicht finden kann) registriert At.js keine Ereignisse oder bindet sich an das domElement, an das ich CodeMirror gebunden habe.
Ich habe versucht, die CodeMirror-Ereignisse manuell in das DOM zu bringen, indem die CM-Ereignisse abgefangen und die Ereignisse behoben und diese Ereignisse auf dem genannten domElement ausgelöst werden. Bisher kein Glück.
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));
});kann ich die Veranstaltung fangen, damit ich es funktioniert richtig kennen.
Ich werde sehen, ob ich eine Geige erstellen kann, um meine Situation genau nachzuahmen (was ich danach tun werde). In der Zwischenzeit wäre es großartig, wenn mich jemand in eine allgemeine Richtung weisen könnte.
Meine Vermutung ist, dass CM verhindert, dass Ereignisse sprudeln oder verhindert, dass At.js einige HTML-Elemente anbringt, die es benötigt. Oder dass ich A.js an ein anderes Element binden muss.
Um einen schnellen Überblick über das zu geben, was ich habe (nicht vollständig).
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>