React-ace: Pertanyaan: Dokumentasi tentang AutoComplete

@ Eric24 mereka adalah bagian dari ace.js https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor

dengan memasukkan language_tools seperti dalam contoh ini https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor Anda dapat mengaktifkannya. Sejauh menambahkan pelengkap kustom mungkin ada cara untuk melakukannya dengan mengakses editor. Saat editor mengaktifkan pelengkapan otomatis, tersedia completers yang dapat Anda masukkan seperti pelengkap rima dalam contoh ini http://plnkr.co/edit/6MVntVmXYUbjR0DI82Cr?p=preview dari ace.js

Saya membutuhkan editor kode html dengan pelengkapan otomatis dasar, pelengkapan otomatis langsung, dan saran cuplikan, dan saya telah berhasil mencapai tujuan saya dengan cara ini:

Paket digunakan

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

Impor

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

Memberikan

<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
  }}
/>

Keluaran

Saya yakin, untuk bahasa lain, dengan mengikuti cara ini, hasil serupa dapat dicapai.

Semoga membantu.

@ anindya-dhruba Bagaimana cara menulis mode kustom? Contoh Anda menunjukkan dengan jelas tentang menambahkan mode yang ada di brace, tetapi bagaimana jika saya ingin menambahkan mode saya sendiri?

@oakland , saya bukan pembuat repo ini, tapi saya rasa, Anda perlu menulisnya sendiri dan mengimpornya alih-alih yang built-in. Saya tidak tahu cara menulis mode kustom. Penulis @securingsincity mungkin dapat membantu Anda dalam kasus ini.

Terima kasih.

Saya masih tidak dapat menemukan dokumen apa pun tentang apa itu live dan basic?

@Obiwarn sejauh yang saya mengerti, "dasar" adalah mode penyelesaian yang harus dipicu secara manual dengan menekan ctrl + spasi, dan "langsung" adalah yang menampilkan saran saat Anda mengetik.

Hai yang disana! Saya mencoba mengaktifkan pelengkapan otomatis dan menambahkan variabel khusus saya sendiri, tetapi saya mengalami masalah. Saya mencoba menggabungkan kode dari dua sumber ini:
http://plnkr.co/edit/PNvznZCXwr8nJAHwhxA2?p=preview

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

Pada dasarnya inilah yang saya dapatkan sejauh ini:

Impor:

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";

Memberikan:

//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}/>;
    }

Lain:

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);
}

Saya mendapatkan kesalahan tipe: language_tools is not defined

Bantuan apa pun akan dihargai!

Hai yang disana! Saya mencoba mengaktifkan pelengkapan otomatis dan menambahkan variabel khusus saya sendiri, tetapi saya mengalami masalah. Saya mencoba menggabungkan kode dari dua sumber ini:
http://plnkr.co/edit/PNvznZCXwr8nJAHwhxA2?p=preview

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

Pada dasarnya inilah yang saya dapatkan sejauh ini:

Impor:

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";

Memberikan:

//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}/>;
    }

Lain:

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);
}

Saya mendapatkan kesalahan tipe: language_tools is not defined

Bantuan apa pun akan dihargai!
Menyerahkan besi tua, itu tidak mendukung kebiasaan!

@ anindya-dhruba bekerja seperti pesona <3

lupa alat bahasa, terima kasih kawan

Catatan dari react-ace Readme:

CATATAN UNTUK VERSI 8! : Kami telah menghentikan dukungan untuk Brace dan sekarang menggunakan Ace-build. Silakan baca dokumentasi tentang cara bermigrasi. Contoh sedang diperbarui.

Contoh dengan pelengkapan otomatis di sini .

Metode berikut dapat menambahkan pelengkapan kode kustom.

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,
                },
            ]);
        },
    });
}

Anda juga dapat melakukan sesuatu seperti:

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

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