Simple angular wrapper for alloy editor (Angular 1.x component)

alloyEditor.js

'use strict';

/**
 * Alloy editor component
 */
angular.module('myApp').component('alloyEditor', {
  template: '<div id="alloyeditor"></div>',
  require: {
    ngModel: 'ngModel'
  },
  controller: function () {
    var ctrl = this,
        alloyEditor = AlloyEditor.editable('alloyeditor'),
        nativeEditor = alloyEditor.get('nativeEditor');

    // model -> view
    // Content of contenteditable element will be set
    var render = function() {
      var content = ctrl.ngModel && ctrl.ngModel.$viewValue;
      nativeEditor.setData(content || '');
    };

    ctrl.$onInit = function () {
      ctrl.ngModel.$render = render;
    };

    // view -> model
    nativeEditor.on('change', function() {
      ctrl.ngModel.$setViewValue(nativeEditor.getData() || '');
    });

    nativeEditor.once('focus', function() {
      ctrl.ngModel.$setTouched();
    });

    ctrl.$onDestroy = function () {
      alloyEditor.destroy();
    };

  }
});

For uploading the images instead of storing them as base64, use something like this:

    var imageId = 1;
    nativeEditor.on('imageAdd', function(e) {
      var file = e.data.file,
          image = angular.element(e.data.el.$);

      file.mediaId = imageId;
      image.attr('id', 'ae-image-' + imageId);

      uploader.addToQueue(file);
      imageId++;
    });

    // change src of image file
    uploader.onSuccessItem = function (item, response) {
      var image = angular.element(nativeEditor.element.$).find('#ae-image-' + item._file.mediaId);

      image.attr('src', response.file.url);
      image.attr('id', 'attachment-' + response.id);
    };