RTE in custom property editor Umbraco 10 -> 13 Umbraco #help-with-umbraco

RTE in custom property editor Umbraco 10 -> 13

Wiggy

07/26/2024, 3:03 PM

I have a custom property editor in Umbraco 10 which renders a lovely RTE:

Copy code

html
<div ng-controller="HotspotEditor.HotspotRTE.Controller" class="">
  <form>
    <umb-property-editor class="umb-property-editor umb-rte" model="RichtTextEditor" />
  </form>
</div>

Copy code

js
$scope.RichtTextEditor = {
        label: 'bodyText',
        description: '',
        view: '/umbraco/views/propertyeditors/rte/rte.html',
        config: {
            editor: {
                toolbar: ["ace", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "unlink"],
                stylesheets: ["rte"],
                dimensions: {},
                mode: "classic"
            }
        },
        value: $scope.model.value.hiddenContent
    };

I have migrated the application to Umbraco 13 and the RTE no longer renders. The rest of my custom property editor is fine. Does anybody know if something would have changed between 10 -> 13? I can't find any documentation or examples anywhere of how to use backoffice UI elements for v13. Should I be looking in the Umbraco src code or existing packages for this? Any help of where to start looking would be really appreciated!

Janae

07/26/2024, 4:24 PM

What happens if rather than declaring the whole view for

view: '/umbraco/views/propertyeditors/rte/rte.html'

you instead use

view: 'rte'

? TinyMCE did get changed between v10 and v11 - it got updated from TinyMCE 4 to 6, and there are some fixes you have to do. The docs talk about them here: https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor

Wiggy

07/26/2024, 4:27 PM

Changing the view to

view: 'rte'

doesn't do anything 😦 I'll read through the docs, thanks @Janae .

Janae

07/26/2024, 4:28 PM

I hope they help! We recently had to render an RTE in a custom section in v13 - I can try to grab that code for you when I’m back from camping but it won’t be until Tuesday. Ping me if you want me to and I’ll try to remember!

Wiggy

07/26/2024, 4:31 PM

If you could that would be awesome! It feels like I'll still be trying to figure this out by then!

Janae

07/26/2024, 4:36 PM

I’ve set myself a reminder but please feel free to ping me on Tuesday. Hopefully between them both I’ll remember haha

Janae

07/30/2024, 8:03 PM

Okay, this is what I have in our repository. Inside of the controller is this:

Copy code

let disclaimerRteTools = [
    'code', 'fullscreen', 'preview', '|',
    'undo', 'redo', '|',
    'blocks', '|',
    'link', 'umbmediapicker', '|',
    'umbmacro', 'umbembeddialog', '|',
    'image', '|',
    'table', '|',
    'bold', 'italic', 'backcolor', 'forecolor', '|',
    'alignleft', 'aligncenter', 'alignright', 'alignjustify', '|',
    'bullist', 'numlist', 'outdent', 'indent', '|',
    'removeformat', '|',
    'help',
];

vm.ratesDisclaimerRte = {
    view: 'rte',
    value: vm.disclaimerText || { markup: '' },
    config: {
        editor: {
            toolbar: disclaimerRteTools,
            stylesheets: [],
            dimensions: { height: 300 },
            mode: 'classic'
        }
    }
};

And then inside the view we have this:

Copy code

<div class="umb-pane">
    <section>
        <ng-form val-form-manager>
            <umb-rte-property-editor model="vm.ratesDisclaimerRte"></umb-rte-property-editor>
        </ng-form>
    </section>
</div>

If I remember right, having the form wrapped around it was very important - it wouldn't load without it. I don't know if a form without

ng-form

works or not!

Janae

08/02/2024, 2:54 PM

We actually had to make an edit to the instantiation of the RTE because it wasn't working fully (only if a value was already set). Here's what we had to do:

Copy code

vm.ratesDisclaimerRte = {
    view: 'rte',
    value: vm.disclaimerValue || { markup: '', blocks: { } },
    config: {
        editor: {
            toolbar: disclaimerRteTools,
            stylesheets: [],
            dimensions: { height: 300 },
            mode: 'classic'
        }
    }
};

The change is specifically here:

{ markup: '', blocks: { } }

. The value of the RTE has to have both empty

markup

in the object and an empty

blocks

object, which likely has to do with the fact that blocks can be called in the RTE now. Once we added the blocks object, it worked 🙂

Wiggy

08/19/2024, 3:02 PM

Thanks for sharing your code @Janae ! Fortunately the only change I had to make was to the HTML. My

<umb-rte />

was wrapped in a

<form>

tag which needed updating to

<ng-form val-form-manager>

and adding the val-form-manager attribute. Simples once I'd found a comparable example!

Janae

08/19/2024, 3:40 PM

Yay I’m so glad you got out working!!!

149 Views

Previous Next