Umbraco Forms lets you inherit from Umbraco.Forms.Core.FieldType to create a custom field type, and you can add [Setting] attributes for custom settings.

I've been experimenting with changing the editor for a setting, trying to get TinyMCE working so that form designers can enter formatted text without knowing HTML.

I can get TinyMCE displaying and loading the existing value, but it doesn't save. I can get the scope, the model, the field or the controller but I don't know Angular well enough to get it working. I think it may need ngModel.$setViewValue() but I don't know how to get ngModel.

public class ExperimentalField : FieldType
{
    public ExperimentalField()
    {
        Id = new Guid("8cbb19d4-43ea-4a61-bd19-579853279d60");
        Name = "Experimental field";
        DataType = FieldDataType.LongString;
        FieldTypeViewName = "FieldType.Experimental.cshtml";
        Icon = "icon-autofill";
        HideLabel = true;
        SupportsPrevalues = false;
        SupportsRegex = false;

    }

    [Setting("HTML string setting", view ="experimental")]
    public IHtmlString HTML { get; set; }
}

And /App_Plugins/UmbracoForms/Backoffice/Common/SettingTypes/experimental.html:

<script type="text/javascript" src="/Umbraco_Client/Tinymce3/tiny_mce.js"></script>


<textarea name="textarea" ng-model="setting.value" rows="4" class="myTextEditor"></textarea>


<script type="text/javascript">
tinyMCE.init({
    mode: "specific_textareas",
    editor_selector: "myTextEditor",
    theme: "simple",
    init_instance_callback: function (editor) {
        editor.onChange.add(function (ed, l) {
            console.debug('Editor contents was modified. Contents: ' + l.content);
            var scope = angular.element(".content-type-editor-dialog").scope();
            var controller = angular.element(".content-type-editor-dialog").controller();
            var model = scope.model;
            var field = scope.model.field;
            // ngModel.$setViewValue(l.content);
            if (!scope.$$phase) {
                scope.$apply();
            }
        });
    }
});

Some of the settings editors use their own controller, but when I tried creating a controller by referencing an external script from the experimental.html file, it couldn't find the controller to run it.

Can any Angular experts get this working?