React-ace: Вопрос: документация по автозаполнению

@ Eric24 они являются частью ace.js https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor

включив language_tools как в этом примере https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor, вы можете включить их. Что касается добавления пользовательских дополнений, вероятно, есть способ сделать это, открыв редактор. Когда в редакторе включено автозаполнение, он имеет доступный completers который вы можете нажать что-то вроде rhymecompleter в этом примере http://plnkr.co/edit/6MVntVmXYUbjR0DI82Cr?p=preview из ace.js

Мне нужен был редактор html-кода с базовым автозаполнением, автозаполнением в реальном времени и предложением фрагмента, и мне удалось достичь своей цели таким образом:

Используемые пакеты

"react-ace": "^5.8.0",
"react": "^16.2.0",

Импорт

import AceEditor from 'react-ace';
import 'brace/mode/html';
import 'brace/theme/xcode';
import 'brace/snippets/html';
import 'brace/ext/language_tools';

Оказывать

<AceEditor
  mode="html"
  theme="xcode"
  name="content"
  onChange={this.onContentChange}
  showPrintMargin={true}
  showGutter={true}
  highlightActiveLine={true}
  value={form.content}
  editorProps={{$blockScrolling: Infinity}}
  setOptions={{
    enableBasicAutocompletion: true,
    enableLiveAutocompletion: true,
    enableSnippets: true,
    showLineNumbers: true,
    tabSize: 2
  }}
/>

Выход

Я считаю, что для других языков, следуя этим путем, можно добиться аналогичного результата.

Надеюсь, это поможет.

@ anindya-dhruba Как написать собственный режим? Ваш пример ясно показывает режим добавления, который находится в скобках, но что, если я хочу добавить свой собственный?

@oakland , я не являюсь автором этого репо, но, думаю, вам нужно написать его самостоятельно и импортировать вместо встроенного. Я не знаю, как написать собственный режим. В этом случае вам может помочь автор @securingsincity .

Благодарю.

Я до сих пор не могу найти никаких документов о том, что является живым и основным?

@Obiwarn, насколько я понимаю, «базовый» - это режим завершения, который нужно запускать вручную, нажав ctrl + пробел, а «live» - это тот, который отображает предложения по мере ввода.

Всем привет! Я пытаюсь включить автозаполнение и добавить свои собственные переменные, но у меня возникают проблемы. Я пытаюсь объединить код из этих двух источников:
http://plnkr.co/edit/PNvznZCXwr8nJAHwhxA2?p=preview

https://github.com/securingsincity/react-ace/blob/master/docs/FAQ.md#how -do-i-add-language-snippets

Вот в основном то, что у меня есть на данный момент:

Импорт:

import AceEditor from 'react-ace';
import 'brace/mode/java';
import 'brace/theme/textmate';
import CustomMode from "./customMode.js"; //This is because I'm making my own mode, I think you can ignore it
import "brace/ext/language_tools";

Оказывать:

//The text editor:
    renderWidget(args) {
        Object.assign(args, {
            ref: "aceEditor",
            mode: "java",
            fontSize: 16,
            theme: "textmate",
            showPrintMargin: false,
            showGutter: true,
            readOnly: false,
            wrapEnabled: true,
            editorProps: {$blockScrolling: true},
            setOptions: {
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true,
                enableSnippets: true,
                showLineNumbers: true,
                tabSize: 2,
                }
        });

        return <AceEditor {...args}/>;
    }

Другой:

componentDidMount() {
   const customMode = new CustomMode(); //Has to do with custom mode
   this.refs.aceEditor.editor.getSession().setMode(customMode); //Has to do with custom mode
   language_tools.addCompleter(staticWordCompleter);
}

Я получаю ошибку типа: language_tools is not defined

Любая помощь будет оценена по достоинству!

Всем привет! Я пытаюсь включить автозаполнение и добавить свои собственные переменные, но у меня возникают проблемы. Я пытаюсь объединить код из этих двух источников:
http://plnkr.co/edit/PNvznZCXwr8nJAHwhxA2?p=preview

https://github.com/securingsincity/react-ace/blob/master/docs/FAQ.md#how -do-i-add-language-snippets

Вот в основном то, что у меня есть на данный момент:

Импорт:

import AceEditor from 'react-ace';
import 'brace/mode/java';
import 'brace/theme/textmate';
import CustomMode from "./customMode.js"; //This is because I'm making my own mode, I think you can ignore it
import "brace/ext/language_tools";

Оказывать:

//The text editor:
    renderWidget(args) {
        Object.assign(args, {
            ref: "aceEditor",
            mode: "java",
            fontSize: 16,
            theme: "textmate",
            showPrintMargin: false,
            showGutter: true,
            readOnly: false,
            wrapEnabled: true,
            editorProps: {$blockScrolling: true},
            setOptions: {
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true,
                enableSnippets: true,
                showLineNumbers: true,
                tabSize: 2,
                }
        });

        return <AceEditor {...args}/>;
    }

Другой:

componentDidMount() {
   const customMode = new CustomMode(); //Has to do with custom mode
   this.refs.aceEditor.editor.getSession().setMode(customMode); //Has to do with custom mode
   language_tools.addCompleter(staticWordCompleter);
}

Я получаю ошибку типа: language_tools is not defined

Любая помощь будет оценена по достоинству!
Откажитесь от старого железа, кастом он не поддерживает!

@ anindya-dhruba работал как шарм <3

забыл языковые инструменты, спасибо, чувак

Примечание из Readme-файла react-ace:

ПРИМЕЧАНИЕ ДЛЯ ВЕРСИИ 8! : Мы прекратили поддержку Brace и теперь используем Ace-сборки. Прочтите документацию о том, как выполнить миграцию. Примеры обновляются.

Пример с автозаполнением здесь .

Следующий метод может добавить пользовательское завершение кода.

import { addCompleter } from 'ace-builds/src-noconflict/ext-language_tools';

componentDidMount() {
    addCompleter({
        getCompletions: function(editor, session, pos, prefix, callback) {
            callback(null, [
                {
                    name: 'test',
                    value: 'test',
                    caption: 'test',
                    meta: 'local',
                    score: 1000,
                },
            ]);
        },
    });
}

Вы также можете сделать что-то вроде:

const customCompleter = (editor, session, pos, prefix, cb) => {
    cb(null, [...])
}

<AceEditor
    ...
    setOptions={{
        ...,
        enableBasicAutocompletion: [customCompleter],
        enableLiveAutocompletion: true
    }}
/>