how can i use rte as a macro parameter in v8

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?

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 2157 posts 14434 karma points MVP 9x 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 2157 posts 14434 karma points MVP 9x 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 1932 posts 6722 karma points MVP 2x c-trib

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

Huw Reddick 1932 posts 6722 karma points MVP 2x 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...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies

Flag this post as spam?

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