I'm trying to create a Razor macro that will render within the TinyMCE editor. I can insert it in, and it asks me to enter in the parameters, but once I click OK it shows up in the editor as:
"No macro content available for WYSIWYG editing."
Also it seems to wrap this in "p" tags which I don't want.
I've ticked both "Use in editor" and "Render content in editor" in the macro properties but they don't seem to be making much difference.
The purpose of this macro - and if there's a better way to do this I'd be open to suggestions - is to allow editors to enter in a hyperlink to an external web site. I know there is the hyperlink button, but what I want to do is centralise some of the logic - specifically things like forcing links in a new window, telling the user that it's going to do that and there may be some other things in future. (A disclaimer page has been talked about, although I'm hoping it won't be needed. Some different styling might be needed too.)
I've kept my macro quite simple to start with. It's one line of Razor that looks like this:
Thanks for the quick reply. I would like to keep the same rendering for both. The problem is that nothing is rendering from my macro is rendering in TinyMCE at all (bar the default Umbraco text)
Razor works with published content only, because that is cached and really fast to access. As such,it is not possible to show a preview when the node is not published. I think you would have the same problem with and XSLT macro if you tried it.
To render the macro on the frontend, something like this should work (assuming your RTE property is called "bodyText"):
I'm a bit confused - if I publish the page it still doesn't work. I'm not having problems with the preview button - it's the actual content within TinyMCE itself that's showing this message.
Also my Razor macro isn't referencing any node properties at all - just my parameter values. I don't understand why substituting my Razor macro with a different Razor macro that calls it would work any better? Am I misunderstanding what you mean?
Well, I might've explained better, but what you can take away from this is that Razor (due to it's dynamic-ness) has no way of knowing what content to render in the RTE, even if it may seem like it should in this case. You're not going to be able to get a preview in the RTE.
You don't substitute, somewhere in your existing Razor file, you do something like: @Model.bodyText to show the RTE content, correct? That is where you insert RenderMacroContent instead. It will take the bodyText property and try to render any macro's you've put in there.
My way of dealing with this is to create a new css class in the rich text editor (for example "external"). Then, on the frontend, with jQuery I look for all of the links with a class "external" and do something with them. This is a bit cleaner, although it's still rather hacky. But there really is no real good way to do this currently.
Will any macro types render in the editor? I don't have to use Razor for this - it's just what I'm using for everything else, but for something this simple I don't mind how it's done. What does "Render content in editor" actually do ?
Ideally I'd rather not add hacks to the front-end to compensate for the back if possible.
You're going to have to try, I think XSLT will give the same result, a usercontrol MIGHT work, but I don't know.
Another possible solution could be to add a new button to TinyMCE that will pop up a new window and ask for URL/Caption and adds the other stuff for you. Not sure how to do that though. :-)
You DO know that the default "Insert URL" option contains a dropdown with "open in new window", right? You might be able to copy it and alter it for your own purposes and insert that as a new button (try not to change Umbraco's source code though, it will make your upgrade path very difficult).
Thanks, again. I've now tried a user control and XSLT and they both do the same as the Razor script.
So, does the "Render content in editor" checkbox do anything at all?
As for the "open in new window" tickbox - as mentioned, I'd like to keep control of the logic rather than embedding it into the content so that it can be easily changed later as there's still some debate as to how it should work. This is a similar reason to why I don't ideally want to use my own TinyMCE plugin. But I guess it might be the only real option available. Pity, thought this was going to be an easy one. :(
And fully agree about not changing the Umbraco source. :)
Yes, I think it may work with some static html .. or something, not sure, I tend to avoid putting macros in TinyMCE.. :-)
If you want to keep full control, you should go with the jQuery method I mentioned. Which is actually not that bad a solution, it seperates the (html) logic from the (html) presentation very well and you don't mess up your html with behaviours out of the box. This is also the reason why target="_blank" wasn't allowed in XHTML 4 any more I think.
Thank you to gilad for the idea of rendering macros completely different when shown inside the RTE as opposed to when shown on the public-facing webpages.
We wanted people to be able to insert embedded objects & iframes (primarily, YouTube videos) inside of the RTE but found that the TinyMCE would always get very buggy if just inserted into the HTML and also not very easy or even possible for some of our clients to grasp. So, having two totally different branches avoids the RTE getting messed up with the "widget code", and instead now displays a simple description of what was inserted, or even just showing an HTML-encoded version or summary of what was inserted.
Creating a Razor macro that renders in TinyMCE
I'm trying to create a Razor macro that will render within the TinyMCE editor. I can insert it in, and it asks me to enter in the parameters, but once I click OK it shows up in the editor as:
"No macro content available for WYSIWYG editing."
Also it seems to wrap this in "p" tags which I don't want.
I've ticked both "Use in editor" and "Render content in editor" in the macro properties but they don't seem to be making much difference.
The purpose of this macro - and if there's a better way to do this I'd be open to suggestions - is to allow editors to enter in a hyperlink to an external web site. I know there is the hyperlink button, but what I want to do is centralise some of the logic - specifically things like forcing links in a new window, telling the user that it's going to do that and there may be some other things in future. (A disclaimer page has been talked about, although I'm hoping it won't be needed. Some different styling might be needed too.)
I've kept my macro quite simple to start with. It's one line of Razor that looks like this:
<a href="@Parameter.Url" target="_blank" title="@this.GetDictionary(Dictionary.ExternalLink)" class="external-link">@Parameter.Caption</a>
The macro has 2 parameters - URL and Caption both of which are Text.
It renders OK on the main site - except for the <p> tags which I'm guessing are to do with the warning message itself.
I'm probably missing something silly but I can't see what else I might need to do. Anyone any ideas?
We're using Umbraco 4.7.0 at the moment.
Thanks,
John
hii john , not sure if that gone help you but if you want to make a diffrent render for the TinyMCE you can use this in your macro :
if (umbraco.library.RequestServerVariables("URL").Contains("macroResultWrapper"))
{
<p>hyper link to - @Parameter.parameterName</p>
}
else
{
PAGE RENDER
}
Thanks for the quick reply. I would like to keep the same rendering for both. The problem is that nothing is rendering from my macro is rendering in TinyMCE at all (bar the default Umbraco text)
Razor works with published content only, because that is cached and really fast to access. As such,it is not possible to show a preview when the node is not published. I think you would have the same problem with and XSLT macro if you tried it.
To render the macro on the frontend, something like this should work (assuming your RTE property is called "bodyText"):
Thanks again for another quick reply!
I'm a bit confused - if I publish the page it still doesn't work. I'm not having problems with the preview button - it's the actual content within TinyMCE itself that's showing this message.
Also my Razor macro isn't referencing any node properties at all - just my parameter values. I don't understand why substituting my Razor macro with a different Razor macro that calls it would work any better? Am I misunderstanding what you mean?
Sorry if I'm being thick !
Well, I might've explained better, but what you can take away from this is that Razor (due to it's dynamic-ness) has no way of knowing what content to render in the RTE, even if it may seem like it should in this case. You're not going to be able to get a preview in the RTE.
You don't substitute, somewhere in your existing Razor file, you do something like: @Model.bodyText to show the RTE content, correct? That is where you insert RenderMacroContent instead. It will take the bodyText property and try to render any macro's you've put in there.
My way of dealing with this is to create a new css class in the rich text editor (for example "external"). Then, on the frontend, with jQuery I look for all of the links with a class "external" and do something with them. This is a bit cleaner, although it's still rather hacky. But there really is no real good way to do this currently.
Ah OK - shame. :( But thanks for clarifying.
Will any macro types render in the editor? I don't have to use Razor for this - it's just what I'm using for everything else, but for something this simple I don't mind how it's done. What does "Render content in editor" actually do ?
Ideally I'd rather not add hacks to the front-end to compensate for the back if possible.
You're going to have to try, I think XSLT will give the same result, a usercontrol MIGHT work, but I don't know.
Another possible solution could be to add a new button to TinyMCE that will pop up a new window and ask for URL/Caption and adds the other stuff for you. Not sure how to do that though. :-)
You DO know that the default "Insert URL" option contains a dropdown with "open in new window", right? You might be able to copy it and alter it for your own purposes and insert that as a new button (try not to change Umbraco's source code though, it will make your upgrade path very difficult).
Thanks, again. I've now tried a user control and XSLT and they both do the same as the Razor script.
So, does the "Render content in editor" checkbox do anything at all?
As for the "open in new window" tickbox - as mentioned, I'd like to keep control of the logic rather than embedding it into the content so that it can be easily changed later as there's still some debate as to how it should work. This is a similar reason to why I don't ideally want to use my own TinyMCE plugin. But I guess it might be the only real option available. Pity, thought this was going to be an easy one. :(
And fully agree about not changing the Umbraco source. :)
Yes, I think it may work with some static html .. or something, not sure, I tend to avoid putting macros in TinyMCE.. :-)
If you want to keep full control, you should go with the jQuery method I mentioned. Which is actually not that bad a solution, it seperates the (html) logic from the (html) presentation very well and you don't mess up your html with behaviours out of the box. This is also the reason why target="_blank" wasn't allowed in XHTML 4 any more I think.
I'm not sure for 100% but as I remember it's a notorious "<p>" issue that has been fixed in 4.7.1.
Thank you to gilad for the idea of rendering macros completely different when shown inside the RTE as opposed to when shown on the public-facing webpages.
We wanted people to be able to insert embedded objects & iframes (primarily, YouTube videos) inside of the RTE but found that the TinyMCE would always get very buggy if just inserted into the HTML and also not very easy or even possible for some of our clients to grasp. So, having two totally different branches avoids the RTE getting messed up with the "widget code", and instead now displays a simple description of what was inserted, or even just showing an HTML-encoded version or summary of what was inserted.
Thank you!
is working on a reply...