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
    Erik W
    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?

  • Marc Goodson 1584 posts 10551 karma points MVP 6x c-trib
    Jun 27, 2019 @ 23:13
    Marc Goodson
    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

  • Erik W 4 posts 83 karma points
    Jun 28, 2019 @ 07:58
    Erik W
    0

    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

  • Walman Arias 4 posts 73 karma points
    Jan 21, 2021 @ 15:34
    Walman Arias
    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

  • Marc Goodson 1584 posts 10551 karma points MVP 6x c-trib
    Jun 28, 2019 @ 08:08
    Marc Goodson
    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

  • Walman Arias 4 posts 73 karma points
    Jan 20, 2021 @ 16:40
    Walman Arias
    0

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

  • Patrick9650 2 posts 72 karma points
    Mar 11, 2021 @ 16:40
    Patrick9650
    0

    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.

  • Huw Reddick 534 posts 1724 karma points
    Mar 11, 2021 @ 18:05
    Huw Reddick
    0

    have you tried it with doublequotes?

    stylesheets: ["/css/RTE.css"],
    
  • Huw Reddick 534 posts 1724 karma points
    Mar 11, 2021 @ 18:07
    Huw Reddick
    1

    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"
            }
            ]}]
    
  • Patrick9650 2 posts 72 karma points
    Mar 13, 2021 @ 10:39
    Patrick9650
    0

    Hey, thanks for your quick reply!

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

    Thanks anyway!

Please Sign in or register to post replies

Write your reply to:

Draft