如何自定义CodeMirror

时间:2016-10-13 08:27:20

标签: javascript autocomplete codemirror

我想为Codemirror定制自动完成功能。

所以我构建了这段代码:

    CodeMirror.commands.autocomplete = function (cm) {
    var arrayTabNONDefault = new Array();
    var stringaCampi = null;
    var arrayTabellaCampo = null;
    var textVal = cm.getValue();
    textVal = textVal.toUpperCase();

    var res = textVal.match("SELECT(.*)FROM");
    if (res != null) {
    stringaCampi = res[1];
    arrayTabellaCampo = stringaCampi.split(",");
    var nomeTab = null;
    for (var i = 0; i < arrayTabellaCampo.length; i++) {
        nomeTab = (arrayTabellaCampo[i].split(".")[0]).trim();
        if (hintTables[nomeTab] == null)
        hintTables[nomeTab] = new Array();
    } //FINE FOR
    } //FINE IF

    CodeMirror.showHint(cm, CodeMirror.hint.sql, {
    tables: hintTables
    });

    cm.on("beforeChange", function (cm, change) {
    var before = cm.getRange({ line: 0, ch: 0 }, change.from);
    var text = cm.getRange(change.from, change.to);
    var after = cm.getRange(change.to, { line: cm.lineCount() + 1, ch: 0 });
    if (before.indexOf("FROM") !== -1)
    //                            alert("Ho scritto FROM");
        console.log("before change", before, text, after);
    });

    cm.on("change", function (cm, change) {
    var from = change.from;
    var text = change.text.join("\n");
    var removed = change.removed.join("\n");
    var to = cm.posFromIndex(cm.indexFromPos(from) + text.length);

    var before = cm.getRange({ line: 0, ch: 0 }, from);
    var after = cm.getRange(to, { line: cm.lineCount() + 1, ch: 0 });

    if (before.indexOf("FROM") !== -1)
        console.log("after change", before, removed, text, after);
    });


} //FINE ESTENSIONE

这是hintTables的内容

var hintTables = { "#T_TF_FilesList": ["FilesListHeaderID", "NumRecord", "FileTypeID", "FileID", "FilesListHeaderID", "NumRecord"],
            "#T_TF_SelectedItems": ["EventHeaderID", "ItemType", "ItemID1", "ItemID2", "EventHeaderID", "ItemType", "ItemID1", "ItemID2"],
            "#T_TFT_CacheSearchCriteriaHeaders": ["ID", "SyncDate", "FileTypeID", "CriteriaExpressionString", "CriteriaExpressionHash", "PageRecordsNumber", "PageNumber", "NumFiles"]
        };

所以我希望系统在写FROM之后应该提出这个表的列表,否则系统应该在我写EXECUTE之后提出一个存储过程列表。

可以这样做吗?

1 个答案:

答案 0 :(得分:0)

您是否尝试自定义SQL提示插件?如果是这样,您应该在sql-hint.js内进行更改(在codemirror / addon / hint下)。

基本上你应该做的是:

1.在app.js(主要逻辑的js文件)中,在editor.showHint({hint: CodeMirror.hint.sql)事件上致电"change";

2.Inside sql-hint.js,当用户键入FROM或EXECUTE时返回{list: hintTables, from: somePos, to: somePos},这可以通过正则表达式检测或检查该行的标记。我编写了一些代码供您参考:

var cursor = editor.getCursor();
var tokenAtCursor = editor.getTokenAt(cursor);
if (tokenAtCursor.type == "FROM-and-EXECUTE")
  return {list: hintTables, 
          from: CodeMirror.Pos(cur.line, tokenAtCursor.start), 
          to: CodeMirror.Pos(cur.line, tokenAtCursor.end)};

如果我误解了您的问题且这个答案没有帮助,请告诉我,我会将其删除。