Using RTE in custom property editor

Questions
,
1

Hi

In v13 we do something like this, to load an instance of TinyMCE in a dialog.


        datatypeResource.getByName('RTEGrid').then(function (result) {
            $scope.model.editorConfig = result;
            //editorService.open(options);


            var options = {
                view: "../app_plugins/grideditors/rte/rteEditor.html",
                dialogData: data,
                editorConfig: $scope.model.editorConfig,
                submit: function (data) {
                    item.rte = data.rte;
                    editorService.close();
                },
                close: function () {
                    editorService.close();
                }
            };
            editorService.open(options);
        });

Can someone point me in the right direction of doing it in v15? (Typescript and Lit)

2

In order to display a TinyMCE RTE you just need to put the HTML element <umb-input-tiny-mce> somewhere (here’s how Umbraco do it in the property editor for reference)

You want to open this in a modal, so you’ll first need to create a new modal which has the RTE in its render function, then hook up a button or something to trigger the modal.

A working example of the modal system in action can be found in the Umbraco UI Examples package. You can see we’re using the uui-input element in this example, that’s where you would swap out for umb-input-tiny-mce

3

Thanks for the answer.
I have figured out how to do the modal part of this. I still have trouble getting the configugration from the datatype called “RTEGrid”, which was done with datatypeResource.getByName(‘RTEGrid’) i angularjs.
Any idea how to get this configuration?