CODEWITHSUNDEEP
javascriptangularjsace-editor
Deepak Bandela
Deepak Bandela

Reputation: 163

how to get modified text from angular ace editor

I'm using angular js Ace plugin with a directive

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

I have setup the file content to fileContent variable on a scope.

I can see the editor showing up with data. But I'm not able to get the modified file content in the editor. How do I get the changed content of that fileContent model.

I'm also getting. when I set the actual value to the model.

Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.3.2/$rootScope/inprog?p0=%24digest
    at REGEX_STRING_REGEXP (http://127.0.0.1:8080/vendor/angular/angular.js:80:12)
    at beginPhase (http://127.0.0.1:8080/vendor/angular/angular.js:14553:15)
    at Scope.$get.Scope.$apply (http://127.0.0.1:8080/vendor/angular/angular.js:14297:11)
    at link.executeUserCallback (http://127.0.0.1:8080/vendor/angular/angular-ui-ace/ui-ace.js:199:19)
    at Array.link.listenerFactory.onChange (http://127.0.0.1:8080/vendor/angular/angular-ui-ace/ui-ace.js:237:15)
    at r._signal (http://127.0.0.1:8080/vendor/angular/ace-builds/src-min-noconflict/ace.js:1:48755)
    at onChange (http://127.0.0.1:8080/vendor/angular/ace-builds/src-min-noconflict/ace.js:1:149653)
    at r._signal (http://127.0.0.1:8080/vendor/angular/ace-builds/src-min-noconflict/ace.js:1:48755)
    at insertInLine (http://127.0.0.1:8080/vendor/angular/ace-builds/src-min-noconflict/ace.js:1:120507)
    at insert (http://127.0.0.1:8080/vendor/angular/ace-builds/src-min-noconflict/ace.js:1:119301)

Upvotes: 0

Views: 2103

Answers (1)

Scott
Scott

Reputation: 1615

The onLoad and onChange functions are available as part of the ui-ace object. These functions return an editor object. That editor object has a session, which contains functions to gather the information you need (.getSession() and .getValue()).

So the view:

<div ui-ace="{onLoad:aceLoaded, onChange:aceChanged}" id="build-editor"></div>

And the controller:

//Runs every time the value of the editor is changed
$scope.aceChanged = function(_editor){
  console.log('Ace editor changed');
  // Get Current Value
  var currentValue = _editor.getSession().getValue();
  // Set value
  //_editor.getSession().setValue('This text is now in the editor');
};

// Runs when editor loads
$scope.aceLoaded = function(_editor){
  console.log('Ace editor loaded successfully');
  var _session = _editor.getSession();
  _session.setUndoManager(new ace.UndoManager());
  // Editor Events
  // _session.on("change", function(){
  //   console.log('[EditorCtrl] Session changed:', _session);
  // });
};

You can use also the event emitter that I have commented out in the aceLoaded() function instead of the aceChanged() function if you would like, but I personally like the separate function. More about this can be found within the ui-ace readme.

Side Note: You might want to add some sort of deboucer (maybe a $timeout) to the aceChanged() function so it does not keep running if a large amount of changes are made all in succession (continuous typing).

Upvotes: 2

Related Questions