Copied to clipboard

Flag this post as spam?

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


  • Morten Christensen 61 posts 215 karma points
    Dec 30, 2016 @ 08:06
    Morten Christensen
    1

    Has anyone implemented the richtext editor as a parameter in macros?

    I tried to created a new property editor with the standard rte.html, but it throws a lot of JS errors, and it does not work:

    {
        "propertyEditors": [
        {
          "name": "MacroRichText",
          "alias": "Our.MacroRichText",
          "editor": {
            "valueType": "STRING",
            "view": "~/umbraco/views/propertyeditors/rte/rte.html"
          },
          "isParameterEditor": true
        }
      ]
    }
    
  • Manish 372 posts 907 karma points
    Feb 22, 2017 @ 07:01
    Manish
    0

    Hi Morten Christensen

    Are you able to achieve this? Please share how to do this.

    Thanks Manish

  • Morten Christensen 61 posts 215 karma points
    Feb 22, 2017 @ 07:09
    Morten Christensen
    5

    Hello Manish,

    Yes I actually did! Here is the solution:

    In App_Plugins, create a new Folder called RichTextMacro (or whatever your like).

    package.manifest

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

    RichTextMacro.controller.js

    angular.module("umbraco")
    .controller("Macro.RichTextMacro",
        function ($scope) {
        $scope.textInput = {
            label: 'bodyText',
            description: '...',
            view: 'rte',
            value: $scope.model.value,
            config: {
                editor: {
                    toolbar: ["code", "removeformat", "link", "unlink", "bold", "italic", "underline", "strikethrough"],
                    stylesheets: [],
                    dimensions: {
                        height: 200
                    }
                }
            }
        };
        $scope.$watch('textInput.value', function (newValue, oldValue) {
            $scope.model.value = newValue;
        });
    });
    

    RichTextMacro.html

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

    Now, do an App Recycle in IIS, and clear cache in your browser. The macro can now be added as an macro param.

  • Søren Kottal 465 posts 2955 karma points MVP c-trib
    Mar 16, 2017 @ 09:09
    Søren Kottal
    0

    Thanks Morten, just what I needed!

    Have you though about creating a package for this?

  • Morten Christensen 61 posts 215 karma points
    Mar 16, 2017 @ 12:50
    Morten Christensen
    0

    Hi Søren,

    Yes I did :) But havn't got the time for it yet.

  • Tim Murphy 7 posts 77 karma points
    Mar 27, 2017 @ 07:30
    Tim Murphy
    0

    That is a thing of beauty!

  • Manish 372 posts 907 karma points
    Feb 22, 2017 @ 08:07
    Manish
    0

    Thanks for this Morten

    I have added this code but when i am adding this macro it is showing nothing

    enter image description here

  • Morten Christensen 61 posts 215 karma points
    Feb 22, 2017 @ 08:10
    Morten Christensen
    0

    Do you get any JS errors?

    Also, if you are using Chrome, you will have to do a hard clear cache in the browser.

  • Manish 372 posts 907 karma points
    Feb 22, 2017 @ 08:19
    Manish
    0

    Yes it is appearing now, after i had a cup of coffee.

    Thans

  • Morten Christensen 61 posts 215 karma points
    Feb 22, 2017 @ 08:20
    Morten Christensen
    0

    Cool! :)

  • Manish 372 posts 907 karma points
    Feb 22, 2017 @ 08:24
    Manish
    0

    One more thing that it is showing semi colon default. Can you please guide me on this too

    enter image description here

    Manish

  • Morten Christensen 61 posts 215 karma points
    Feb 22, 2017 @ 08:26
    Morten Christensen
    0

    It looks like you have an extra semicolon in the macro you are adding.

  • Manish 372 posts 907 karma points
    Feb 22, 2017 @ 08:30
    Manish
    0

    working fine now just left one semicolon in code.

    Thank you very much for your help Morten !!

  • Johan 2 posts 71 karma points
    Feb 24, 2017 @ 09:54
    Johan
    0

    Hi I'm totaly new to Umbraco (and razor and Angular) but found this thread after having the same issue. Seems like it works allright except for one thing that I can't really figure out the correct solution for.

    Text that is entered in the editor is rendered undecoded ( the < and > is displayed as &lt; and &gt; etc)

    I only render it in the Partial View Macro as:

    < div>@Model.MacroParameters["Text"]< /div>

    My question is: Do you decode it when rendered or did I miss something when creating the plugin. shouldn't the text be decoded when it is stored and not when rendered?

    And how do you do that ?

    /J

    Edited: To output the html correctly I had to do: new HtmlString(WebUtility.HtmlDecode((string)Model.MacroParameters["Content"]))

    Otherwise the allready encoded text will be encoded again resulting in &amp;lt; when a < is rendered.

    I think the value should allready have been decoded so you only had to do: new HtmlString(Model.MacroParameters["Content"]), but I don't know how to do that.

  • Morten Christensen 61 posts 215 karma points
    Apr 12, 2017 @ 12:06
    Morten Christensen
    0

    Does it work if you use:

    <div>@Html.Raw(Model.MacroParameters["Text"])</div>
    
  • Stuart Kelly 1 post 71 karma points
    Apr 27, 2017 @ 12:11
    Stuart Kelly
    0

    I'm currently struggling with the same problem as Johan, the text in my macro is rendered as text and not HTML. I've tried doing the following to pick out the HTML:

    var text = Model.MacroParameters.ContainsKey("text") != null ? WebUtility.HtmlDecode((string)Model.MacroParameters["text"]) : "";
    

    Which is then used in the template with @text but this still renders as text.

    I also tried your suggestion Morten (Html.Raw) but this gives a partial view script error, I'm not sure if I got the syntax wrong because I'm a bit of an Umbraco beginner.

  • sharonbn 1 post 71 karma points
    Jul 27, 2017 @ 22:23
    sharonbn
    0

    Hey,

    I created the custom macro parameter Successfully from the example above.

    No matter what I try I still get Html tags .

    Thanks.

  • Chris 92 posts 238 karma points
    Nov 20, 2017 @ 15:00
    Chris
    0

    Is there any way to use the mceImage/MediaPicker with this solution?

    Tried to add mceImage to the toolbar:.. parameter but it does not appear there.

    Edit: Nevermind, I was just to stupid to realize that I don't need to add the umbracoAlias to the toolbar parameter, but instead the frontendCommand.

  • Ed 2 posts 72 karma points
    Feb 16, 2018 @ 15:26
    Ed
    0
    <div>@Html.Raw(Model.MacroParameters["Text"])</div>
    

    Will not work as according to https://msdn.microsoft.com/en-us/library/gg568896(v=vs.99).aspx

    "The Razor syntax @ operator HTML-encodes text before rendering it to the HTTP response. This causes the text to be displayed as regular text in the web page instead of being interpreted as HTML markup."

    Any other idea on how to get this to render as I am struggling to find a way?

  • Chris 92 posts 238 karma points
    Mar 22, 2018 @ 09:07
    Chris
    1

    Had the same issue just now. Instead of only using @Html.Raw() use something like this:

    @Html.Raw(HttpUtility.HtmlDecode( @Model.MacroParameters["Text"].ToString() ));
    

    Is bit ugly, but it works.

  • Erik W 4 posts 83 karma points
    Jun 27, 2019 @ 16:46
    Erik W
    0

    Any suggestion how to implement this into v8? They have made some changes, if I follow the instructions above it doesn't work. Error 404 not found for /umbraco/Rte when I try to create an instance of the macro. Thanks

  • Marc Goodson 1112 posts 7458 karma points MVP 4x c-trib
    Jun 27, 2019 @ 23:12
    Marc Goodson
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft