javascript - ACE संपादक में स्वतः पूर्णता




html5 autocomplete (4)

मुझे सिम्मिलर प्रश्न मिला है: ऐस संपादक स्वतः पूर्ण और कई भाषाओं में

लेकिन प्रतिक्रियाएं यह थीं कि ऑटोकंप्लीशन एसीई द्वारा समर्थित नहीं है, और ऐस संपादक के लिए Google समूह के अनुसार "यह ऐस के लिए मेरी इच्छा पर है और हमें क्लाउड 9 के लिए निश्चित रूप से इसकी आवश्यकता है"।

यह पोस्ट एक वर्ष पुरानी है और जैसा कि आप देख सकते हैं, क्लाउड 9 अब स्वत: पूर्णता का समर्थन करता है: https://c9.io/site/features/

तो क्या स्वत: पूर्णता ऐस संपादक में डिफ़ॉल्ट रूप से उपलब्ध है? मुझे इसके बारे में कोई जानकारी नहीं मिल रही है।


चूंकि स्वतः पूर्ण अब ace.c9.io एपीआई का एक हिस्सा है:

1) अपने html के शीर्ष पर ace.js शामिल करें:

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

2) अपने mode (भाषा प्रकार) को भी शामिल करें:

  <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) आईडी एडिटर के साथ अपना div जोड़ें (यह आपका IDE बन जाएगा):

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

6) निम्नलिखित स्क्रिप्ट शामिल करें (उन्हें समझने के लिए मेरी टिप्पणी देखें):

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

नीचे दी गई पंक्ति आपके div को id = "editor" से संपादक में बदल देती है

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

नीचे दी गई लाइन कलर थीम सेट करती है। mode उपलब्ध अन्य थीम ... उन्हें 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>

निम्नलिखित आयात सुनिश्चित करें

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

आवश्यकतानुसार स्निपेट के तहत उपयोग करें

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

स्वत: पूर्णता ऐस के लिए अभी भी मूल रूप से उपलब्ध नहीं है, हालांकि हमने कोडीड आईडीई के लिए एक घटक लागू किया है जो ऐस पर आधारित है और पूरी तरह से खुला स्रोत है। आप Github पर कोड की जांच कर सकते हैं, यह निश्चित रूप से आपको अपना लिखने में मदद करेगा।


स्वतः पूर्ण अब एपीआई का एक आधिकारिक हिस्सा है। इसे सक्षम करने से कोड की 3 लाइनें लगती हैं:

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

आवश्यकता- js के साथ अपने सेटअप के आधार पर, आपको अपने पृष्ठ के लिए HTML में एक अतिरिक्त जावास्क्रिप्ट फ़ाइल शामिल करने की आवश्यकता हो सकती है:

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

आप https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html पर एक डेमो पा सकते हैं

और यहाँ विकी पृष्ठ है जो मैंने अभी इस विषय पर लिखा है:

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





ace-editor