Specify font family or families and font size?

[andrewboni]

I didn't see an easy way to do this. I tried the obvious, with no luck:

  $scope.uiAceConfig =
    useWrapMode : true
    showGutter: true
    theme: 'twilight'
    mode: 'html'
    fontFamily: 'Inconsolata'
    fontSize: '16px'

<div ui-ace="uiAceConfig" ng-model="content.html"></div>

Anyone find a way to do this? Thanks!

[orbitbot]

I haven't read through the source of this project in any detail, but I think it's not possible to set arbitrary options the way you're trying to do it. However, you can get access to the Editor object if you define a onLoad callback and a method on your controller:

some.html

<div ui-ace="{
  onLoad: aceLoaded
}"></div>

controller:

$scope.aceLoaded = function() {
  return {
    onLoad: function (_editor) {
      _editor.setOptions({
        fontSize: 10
      });
    }
  };
};

You should be able to set the font similarly. For other options, have a look here: https://github.com/ajaxorg/ace/wiki/Configuring-Ace

[kbsymanz]

The source shows that it does have an option for advanced configuration for other options such as fontsize, etc. This is done with the advanced element in the configuration for ui-ace.

Using your example:

$scope.uiAceConfig = {
    useWrapMode : true,
    showGutter: true,
    theme: 'twilight',
    mode: 'html',
    advanced: {
        fontFamily: 'Inconsolata',
        fontSize: '16px'
    }
};

[PowerKiKi]

Thanks @kbsymanz for providing an answer

[andrewboni]

@kbsymanz were you actually able to get it working? I have:

    $scope.uiAceConfig =
      useWrapMode : true
      showGutter: true
      theme: 'solarized_dark'
      mode: 'html'
      onLoad: $scope.aceLoaded
      onChange: $scope.aceChanged
      workerPath: '/assets/lib/jsoneditor/ace'
      advanced:
        fontFamily: 'Inconsolata'
        fontSize: '22px'

But the advanced: {} property isn't getting picked up, as the font-family and font-size css properties are the same. Was anyone able to get this working?

[kbsymanz]

@andrewboni : Yes it is working for me. Here is the entire template file that I am using it in and the fontSize setting definitely changes the font-size.

<div id="editorWrapper" ng-hide="editorHidden">
  <div id="editorInstance" ng-model="selectedNote.note" ui-ace="{
  useWrapMode: true,
  showGutter: true,
  theme: 'solarized_light',
  mode: 'markdown',
  onLoad: aceLoaded,
  onChange: aceChanged,
  advanced: {
    fontSize: 40
  }
}"></div>
</div>

I am using Angular 1.3.13 and angular-ui-ace 0.2.3.