how can i use rte as a macro parameter in v8 - Templates, (partial) views and macros

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Erik W 4 posts 83 karma points

Jun 27, 2019 @ 11:15

0

How can I use RTE as a macro parameter in V8?

Templates, (partial) views and macros

Umbraco 8

I tried to follow a guide (v7) for adding a RTE as a parameter in a macro: https://our.umbraco.com/forum/templates-partial-views-and-macros/82089-tinymce-as-macro-parameter

When I try to create an instance of this macro I get a 404 error: "Request error: The URL returned a 404(not found)" . It's looking for localhost/umbraco/rte

Anyone who got this to work and could share the solution?

Copy Link
Marc Goodson 2141 posts 14344 karma points MVP 8x c-trib

Jun 27, 2019 @ 23:13
100
Hi Erik

Had a similar issue when updating my Editor Notes package:

https://github.com/marcemarc/EditorNotes/commit/513e25164faef949ab599a46554b46dc9256932b

Try setting the view to be:
```
   view: '/umbraco/views/propertyeditors/rte/rte.html',
```
instead of 'rte'

and the toolbar I think has some different options: try:
```
 editor: {
                    toolbar: ["ace", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "umbmacro", "umbembeddialog"]
```
and after the dimensions, add the new mode setting to be classic:
```
dimensions: {
                    height: 200
                },
                    mode: "classic"
```
I can't think of anything else I had to change...

maybe that will work!

regards

Marc
Copy Link

Erik W 4 posts 83 karma points

Jun 28, 2019 @ 07:58

Yes yes yes! Thanks Marc

The rte has position absolute, so it covers the other parameters, so I added this - macroRte - class:

<div ng-controller="Macro.RichTextMacro">
<div class="macroRte" style="border: 1px solid #ccc">
    <ng-form>
        <umb-editor model="textInput"></umb-editor>
    </ng-form>
</div>

and created a css file:

.macroRte .umb-editor {
position: relative;}

and added it to the manifest:

{
propertyEditors: [{
        alias: "RichTextMacro",
        name: "RichTextMacroEditor",
        isParameterEditor: true,
        editor: {
            view: "~/App_Plugins/RichTextMacro/RichTextMacro.html",
            valueType: "TEXT"
        }
    }
],
javascript: [
    "~/App_Plugins/RichTextMacro/RichTextMacro.controller.js"
],
  css: [ "~/App_Plugins/RichTextMacro/rte.css"]}

enter image description here

Copy Link

Walman Arias 4 posts 73 karma points

Jan 21, 2021 @ 15:34

0

Hi Erick W, can you post the whole solution for umbraco v8. I will appreciate it since I'm getting controller not registered error

Copy Link
Marc Goodson 2141 posts 14344 karma points MVP 8x c-trib

Jun 28, 2019 @ 08:08

0

Great Erik!

Yes, sorry now I remember - that was the other thing I had to tweak - with the old styles it was off the screen!

regards

Marc

Copy Link
Walman Arias 4 posts 73 karma points

Jan 20, 2021 @ 16:40

0

Can you post the whole solution. I tried implementing this but I'm getting an error about the controller not being registered

Copy Link

Patrick9650 2 posts 72 karma points

Mar 11, 2021 @ 16:40

Could I bump this question for a bit?

I got the RTE working in my macro partial but... Now I want to add a RTE.css for some heading styles under 'Formats'.

Does anybody know how to get that fixed?

I have tried this in my RichTextMacro.controller.js

angular.module("umbraco")
.controller("Macro.RichTextMacro",
    function ($scope) {
        $scope.textInput = {
            label: 'bodyText',
            description: '...',
            view: '/umbraco/views/propertyeditors/rte/rte.html',
            value: $scope.model.value,
            config: {
                editor: {
                    toolbar: ["ace", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "umbmacro", "umbembeddialog"],
                    stylesheets: ['/css/RTE.css'],
                    dimensions: {
                        height: 200
                    },
                    mode: "classic"
                }
            }
        };
        $scope.$watch('textInput.value', function (newValue, oldValue) {
            $scope.model.value = newValue;
        });
    });

I thought I needed to set the stylesheet to the correct path (and yes, the file exist ;-)) but that does not seem to work.

Copy Link

Huw Reddick 1737 posts 6098 karma points MVP c-trib

Mar 11, 2021 @ 18:05
0
have you tried it with doublequotes?
```
stylesheets: ["/css/RTE.css"],
```
Copy Link

Huw Reddick 1737 posts 6098 karma points MVP c-trib

Mar 11, 2021 @ 18:07

If that doesn't work, you could try adding them as style-formats instead

style-formats: [
        {
        "title":"Headings",
        "items":[
        {
        "title":"Top Heading",
        "block":"h1"
        },
        {
        "title":"Heading h2",
        "block": "h2"
        },
        {
        "title":"Sub Head h3",
        "block":"h3"
        },
        {
        "title":"Heading h4",
        "block":"h4"
        },
        {
        "title":"Heading h5",
        "block":"h5"
        },
        {
        "title":"Heading h6",
        "block":"h6"
        }
        ]}]

Copy Link

Patrick9650 2 posts 72 karma points

Mar 13, 2021 @ 10:39

0

Hey, thanks for your quick reply!

Both options are not working... Will have to find another workaround.

Thanks anyway!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

How can I use RTE as a macro parameter in V8?