Web based code editor with auto completion

user_7623956 0
Viewed 434

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.

ace-editor autocomplete python-3.x
2 Answers

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

user_132187170

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.

user_188899970
Related