V13 - How to use a custom RTE for a fieldtype setting in a Forms Field type

[GunsRoseSS]

Hi All,

I have implemented the following Field type for Umbraco Forms:

public class CheckboxPolicy : FieldType
{
    public CheckboxPolicy()
    {
        Id = new Guid("001ad4a9-b815-40c1-a29f-62b3f17a1952");
        Name = "CheckboxPolicy";
        Description = "A checkbox for policy";

        Icon = "icon-checkbox";
        DataType = FieldDataType.String;

        Category = "Simple";
        SortOrder = 110;
    }

    [Setting(
        "Body Text",
        Description = "Enter your copy text",
        //View = "RichText",
        View = "~/App_Plugins/FormsAddOns/Backoffice/SettingTypes/richdisplayedtext.html",
        SupportsHtml = true
    )]
    public string? BodyText { get; set; }

    public override string GetDesignView() => "~/App_Plugins/FormsAddOns/Backoffice/FieldTypes/richdisplayedtext.html";

    public override bool HideLabel => false;

    public override bool StoresData => false;

    public override IEnumerable<object> ProcessSubmittedValue(Field field, IEnumerable<object> postedValues, HttpContext context)
    {
        var returnValue = new List<object>();
        if (postedValues.ToList().Count > 0)
        {
            returnValue.Add("true");
        }
        else
        {
            returnValue.Add("false");
        }

        return returnValue;
    }

For the Body Text setting, I would like to use a custom RTE, because we only want to give a few markup options for the user. I’ve used a custom view and Angular controller to render the RTE.

HTML:

<div ng-controller="formsaddons.richdisplayedtext.controller" data-umb-setting-alias="BodyText">
    <ng-form val-form-manager>
        <umb-rte-property-editor model="rteModel"></umb-rte-property-editor>
    </ng-form>
</div>

JS:

(function () {
    "use strict";

    angular.module("umbraco")
        .controller("formsaddons.richdisplayedtext.controller",
            [
                "$scope",
                function (scope) {
                    let toolbarOptions = [
                        "link",
                        "charmap"
                    ];

                    scope.rteModel = {
                        view: 'rte',
                        value: scope.setting.value || { markup: scope.setting.defaultValue, blocks: { } },
                        config: {
                            editor: {
                                toolbar: toolbarOptions,
                                stylesheets: [],
                                dimensions: { height: 200 },
                                mode: 'classic'
                            }
                        }
                    };
                }
            ]);

}());

The RTE renders in successfully. However, the value that is entered into the RTE does not get saved. When using the standard view (RichText), the values do get saved. So I feel like I’m missing something…

Does anyone else have an example for me of implementing a custom RTE?

Cheers,

Richard

[AndyButland]

There is a configuration setting for this, where you can indicate which data type you want to use. So if you create an RTE data type with the required functions, you can tell Forms to use this.

[GunsRoseSS]

Hi Andy,

Sorry for the late reply. In the end we ended up using the standard RTE, as we did not want to limit the RTE functionality in other places. Thanks for the insight though.

Richard