web-dev-qa-db-ja.com

ACEエディターでのオートコンプリート

同様の質問を見つけました： Ace Editorのオートコンプリートと複数の言語

しかし、応答はACEがオートコンプリートをサポートしていないというものでした。 Ace EditorのGoogleグループ 「Aceの私の願いであり、Cloud9には間違いなく必要です」。

この投稿は1年前のもので、ご覧のとおり、cloud9はオートコンプリートをサポートしています： https://c9.io/site/features/

Ace Editorでデフォルトでオートコンプリートを利用できますか？私はそれに関する情報を見つけることができません。

javascripthtml5autocompletesyntax-highlightingace-editor
35
Wojciech Danilo

オートコンプリートは現在、APIの公式部分です。有効にするには、3行のコードが必要です。

ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setOptions({
    enableBasicAutocompletion: true
});

Require-jsでの設定に応じて、ページのhtmlに追加のjavascriptファイルを含める必要がある場合があります。

<script src="ace/ext-language_tools.js"></script>

https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html でデモを見つけることができます

そして、このトピックについて書いたばかりのwikiページは次のとおりです。

https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor

51
hwjp

オートコンプリートは [〜＃〜] ace [〜＃〜] apiの一部になったため：

1）HTMLの先頭に ace.js を含めます：

  <script type="text/javascript" src="js/ace.js"></script>

2）また、 モード （言語タイプ）を含めます：

  <script type="text/javascript" src="js/mode-yaml.js"></script>

3） theme ：も含めてください

  <script type="text/javascript" src="js/theme-monokai.js"></script>

4） ex-language_tools.js も含めます：

  <script src="js/ext-language_tools.js"></script>

5）IDエディターでdivを追加します（これは [〜＃〜] ide [〜＃〜] になります）：

  <div id="editor"></div>

6）次のスクリプトを含めます（理解するには、コメントを参照してください）。

  <script>
    var langTools = ace.require("ace/ext/language_tools");

以下の行は、id = "editor"のdivをエディターに変換します

  var editor = ace.edit("editor");

以下の行は、カラーテーマを設定します。利用可能な他のテーマ here ...試してみてください here

editor.setTheme("ace/theme/monokai");

以下の行は、プログラミング言語に基づいてモードを設定します...他のモードはここにあります：

editor.getSession().setMode("ace/mode/yaml");


    editor.setShowPrintMargin(false);

以下の行は、リアルタイムでオートコンプリートをオンにします。

editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: false
});

したがって、全体を次のように分類できます：

<!DOCTYPE html>
<html>
<head>
  <title>IDE AUTOCOMPLETE</title>
  <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css">
  <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/ace.js"></script>
  <script type="text/javascript" src="js/mode-yaml.js"></script>
  <script type="text/javascript" src="js/theme-monokai.js"></script>
  <script src="js/ext-language_tools.js"></script>
</head>
<body>
  <!-- EDITOR SECTION BELOW! -->
  <div id="editor"></div>
  <script>
    var langTools = ace.require("ace/ext/language_tools");
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/yaml");
    editor.setShowPrintMargin(false);
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: false
    });
  </script>
  <!-- EDITOR SECTION ABOVE -->
</body>
</html>
13
maudulus

オートコンプリートはまだAceでネイティブに利用できませんが、Aceと完全なオープンソースに基づいている Codiad IDE でそれを行うコンポーネントを実装しました。 Github でコードを確認できます。独自のコードを作成するのに役立ちます。

11
Flolagale

AjaxOrgは、次のメッセージとともにCloud9リポジトリにコミットをプッシュしました：

コード補完プラグイン

これがこの質問の答えになると思います。

here はコミットです。

また、 this は私たちを助けることができる良いプロジェクトだと思います。

詳細については、 この問題がCloud9リポジトリで開かれた からのメッセージをたどることができます。

3
Ionică Bizău

次のインポートがあることを確認してください

require('ace/ext/language_tools');
require('ace/multi_select');

必要に応じてスニペットの下で使用

editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
1
Dhruv Pal

現在、どの形式でも利用できません。この問題によると： https://github.com/ajaxorg/ace/issues/1031

オートコンプリートはCloud9でのみ利用可能IDE（ACEに基づく））、別のプラグインとして利用可能later ACE Editorの場合。

0
Inferpse