Автозаполнение редактора CodeMirror для предопределенных слов

У меня есть веб-сайт, на котором я использую редактор CodeMirror для ввода данных. Я хочу добавить очень простую функцию автозаполнения: у меня есть слова, начинающиеся с символа @ (@cat, @dog, @bird и т. д.), и я хочу, чтобы редактор показывал раскрывающийся список с этими словами, когда пользователь вводит @ или @c — как мне это сделать? это? Я вижу плагины автозаполнения, но им нужно нажимать ctrl+space и работать со схемами... так что любая помощь будет отличной!

Спасибо!


javascript autocomplete codemirror
person user1859243    schedule 16.02.2015    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Вот как это сделать (при условии, что вы загрузили CodeMirror и дополнение show-hint):

// Dummy mode that puts words into their own token
// (You probably have a mode already)
CodeMirror.defineMode("mylanguage", function() {
  return {token: function(stream, state) {
    if (stream.match(/[@\w+]/)) return "variable";
    stream.next();
    return null;
  }};
});
// Register an array of completion words for this mode
CodeMirror.registerHelper("hintWords", "mylanguage",
                          ["@cat", "@dog", "@bird"]);

// Create an editor
var editor = CodeMirror(document.body, {mode: "mylanguage"});
// When an @ is typed, activate completion
editor.on("inputRead", function(editor, change) {
  if (change.text[0] == "@")
    editor.showHint();
});
person Marijn    schedule 18.02.2015
comment
Привет! Спасибо за помощь! Я добавил аддон «show-hint» и добавил нового помощника, как вы предлагаете. Не могли бы вы помочь мне понять, как это должно работать? :) Я думаю, что я на правильном пути, просто хочу, чтобы это работало)) - person user1859243; 20.02.2015
comment
Проблема была больше в моем примере кода, чем в вашей его интерпретации. Я не прочитал ваш вопрос должным образом, и мой код содержал ошибку. Я исправил и немного расширил его. Обратите внимание, что первый аргумент registerHelper должен соответствовать имени вашего языкового режима, и что ваш режим должен по крайней мере помещать такие конструкции @foo в свой собственный токен, чтобы автодополнение работало. - person Marijn; 21.02.2015
comment
Как объединить это с режимом javascript, потому что я хочу, чтобы подсветка js-синтаксиса оставалась. - person Sercan Ozdemir; 21.02.2016