CODEWITHSUNDEEP
python-3.xautocompleteace-editor
Anand Shrivastava
Anand Shrivastava

Reputation: 137

Web based code editor with auto completion

guys

I'm building the web based code editor for my personal project.I want to make it work like VS code but facing some issues.

I'm using ACE editor.

This is what I get while trying with autocompletion.

enter image description here

I'm getting all the available suggestions while trying to write "os.(something)", rather then just getting the language and package specific suggestions.

What I want is this.

enter image description here

In this pic as you can see I'm getting suggetion related to os package only.

Upvotes: 4

Views: 2441

Answers (2)

ImBIOS
ImBIOS

Reputation: 1057

Depending on your setup with require-js, you may also need to include an additional javascript file in the html for your page. You need to write this simple script to working with the auto completion feature.

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

Demo: https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html

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

Upvotes: 2

user18889997
user18889997

Reputation:

HTML, JS, CSS Based

  1. Create <textarea onkeyup=compile() id=code>. It should be big enaugt for code.
  2. Create <script> </script>
  3. Build the autocomplete
  4. Script: function compile() { document.GetElementById('code').value = document.GetElementById('code').value.replaceAll('snippet1', 'Snippet1Value').replaceAll('snippet2', 'SnippetValue'). ...

E.g.: When you enter _text_ (and you set snippet1 to <input type=text>) then your textarea will write <input type=text>. To create an picker, use a contextmenu-library at json.

I know, this is only an plan how to do is.

Upvotes: 1

Related Questions