https://discord.umbraco.com
Join Discord
RTE in custom property editor Umbraco 10 -> 13
# help-with-umbraco
w
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!
j
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
w
Changing the view to 
view: 'rte'
doesn't do anything 😦 I'll read through the docs, thanks @Janae .
j
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!
w
If you could that would be awesome! It feels like I'll still be trying to figure this out by then!
j
I’ve set myself a reminder but please feel free to ping me on Tuesday. Hopefully between them both I’ll remember haha
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!
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 🙂
w
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!
j
Yay I’m so glad you got out working!!!
147 Views
PreviousNext
Powered by

Umbraco

A hub and casual space for you to interact with fellow community members and learn more about Umbraco!

Powered by