How to insert text into specific position with ACE Editor from Angular Controller

Question

I'm working on a real-time collaborative editor within Ace editor, and I couldn't find any docs on inserting text at a certain position within the editor.

Actually I want to add text on cursor position when user get click on button.

I have using following code :

<div ui-ace="aceOptions" ng-model="content"></div>

And in angular controller I have used following code ,

 $scope.aceOptions = {
   mode : 'Javascript',
   theme : 'dreamweaver'
 };

 //content of ace editor
 $scope.content = "test";

 //user button click for adding text
 $scope.addTextOnClick = function(){
   //Here i have to get current cursor and needs to insert text
   //Which map to content and insert into it
 }

Please help me to resolve this issue.

Answer 1

You can get cursor position with Edit.getCurrentPosition method.

After, for example, that you can calculate place in the text with that position and insert something to that text.

I also suggest to check out Ace docs .

Here is how to get Editor instance: https://github.com/angular-ui/ui-ace#ace-instance-direct-access .

the $scope.aceLoaded function will be called with the Ace Editor instance as first argument

Check out example below this header.