React-ace: 質問：オートコンプリートに関するドキュメント

@ Eric24これらはhttps://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor

この例https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editorのようにlanguage_toolsを含めることで、それらを有効にできます。 カスタムコンプリーターを追加する限り、エディターにアクセスして追加する方法がおそらくあります。 エディターがオートコンプリートをオンにすると、 completers使用可能になり、この例のrhymecompleterのようなものをプッシュできますhttp://plnkr.co/edit/6MVntVmXYUbjR0DI82Cr?p=preview from ace.js

基本的なオートコンプリート、ライブオートコンプリート、スニペットの提案をが必要でしたが、次のようにして目標を達成することができました。

使用したパッケージ

"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 、私はこのリポジトリの作成者ではありませんが、作成者

ありがとう。

ライブで基本的なものについてのドキュメントがまだ見つかりませんか？

@Obiwarn私が理解している限り、「基本」はctrl + spaceを押して手動でトリガーする必要がある完了モードであり、「ライブ」は入力時に提案を表示するモードです。

こんにちは！ オートコンプリートをオンにして独自のカスタム変数を追加しようとしていますが、問題が発生しています。 私はこれらの2つのソースからのコードを組み合わせようとしています：
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

どんな助けでもいただければ幸いです！

こんにちは！ オートコンプリートをオンにして独自のカスタム変数を追加しようとしていますが、問題が発生しています。 私はこれらの2つのソースからのコードを組み合わせようとしています：
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

言語ツールを忘れて、ありがとう

react-ace Readmeからのメモ：

バージョン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
    }}
/>