tinymce as macro parameter

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

Morten Christensen 61 posts 215 karma points

Dec 30, 2016 @ 08:06
1

TinyMCE as macro parameter
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
    }
  ]
}
```
Copy Link
Manish 373 posts 932 karma points

Feb 22, 2017 @ 07:01

0

Hi Morten Christensen

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

Thanks Manish

Copy Link

Morten Christensen 61 posts 215 karma points

Feb 22, 2017 @ 07:09

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.

Copy Link

Søren Kottal 712 posts 4570 karma points MVP 6x c-trib

Mar 16, 2017 @ 09:09

0

Thanks Morten, just what I needed!

Have you though about creating a package for this?

Copy Link
Morten Christensen 61 posts 215 karma points

Mar 16, 2017 @ 12:50

0

Hi Søren,

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

Copy Link
Tim Murphy 7 posts 77 karma points

Mar 27, 2017 @ 07:30

0

That is a thing of beauty!

Copy Link
Manish 373 posts 932 karma points

Feb 22, 2017 @ 08:07

0

Thanks for this Morten

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

Copy Link
Morten Christensen 61 posts 215 karma points

Feb 22, 2017 @ 08:10

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.

Copy Link
Manish 373 posts 932 karma points

Feb 22, 2017 @ 08:19

0

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

Thans

Copy Link
Morten Christensen 61 posts 215 karma points

Feb 22, 2017 @ 08:20

0

Cool! :)

Copy Link
Manish 373 posts 932 karma points

Feb 22, 2017 @ 08:24

0

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

Manish

Copy Link
Morten Christensen 61 posts 215 karma points

Feb 22, 2017 @ 08:26

0

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

Copy Link
Manish 373 posts 932 karma points

Feb 22, 2017 @ 08:30

0

working fine now just left one semicolon in code.

Thank you very much for your help Morten !!

Copy Link
Johan 2 posts 71 karma points

Feb 24, 2017 @ 09:54

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 < and > 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 &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.

Copy Link
Morten Christensen 61 posts 215 karma points

Apr 12, 2017 @ 12:06
0
Does it work if you use:
```
<div>@Html.Raw(Model.MacroParameters["Text"])</div>
```
Copy Link
Stuart Kelly 1 post 71 karma points

Apr 27, 2017 @ 12:11
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.
Copy Link
sharonbn 1 post 71 karma points

Jul 27, 2017 @ 22:23

0

Hey,

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

No matter what I try I still get Html tags .

Thanks.

Copy Link
Chris 92 posts 238 karma points

Nov 20, 2017 @ 15:00

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.

Copy Link
Ed 2 posts 72 karma points

Feb 16, 2018 @ 15:26
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?
Copy Link
Chris 92 posts 238 karma points

Mar 22, 2018 @ 09:07
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.
Copy Link
Erik W 4 posts 83 karma points

Jun 27, 2019 @ 16:46

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

Copy Link
Marc Goodson 2155 posts 14408 karma points MVP 9x c-trib

Jun 27, 2019 @ 23:12
1
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

Thomas Beckert 193 posts 469 karma points

Jun 09, 2021 @ 09:18

To Render RTE Content passed by Macro-Paraemter and also render internal links! use this code (V8):

@using Umbraco.Web.Templates;
@using Umbraco.Web.Composing;
@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{
    HtmlLocalLinkParser htmlLocalLinkParser = new HtmlLocalLinkParser(Current.UmbracoContextAccessor);
    string text = Model.MacroParameters["textFromRTE"].ToString();    
}

@Html.Raw(htmlLocalLinkParser.EnsureInternalLinks(Server.HtmlDecode(text)))

Copy Link

is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?