rte html snippets or templates - Extending Umbraco and using the API

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

Al Nicholl 15 posts 97 karma points

Nov 11, 2016 @ 15:47

0

RTE HTML Snippets or Templates?

Extending Umbraco and using the API

Umbraco 7

Hi fellow Umbracians,

I'm wanting to make it easy for editors to add a snippet of HTML code into the RTE which they can then customise as required.

My example is a block of code that would allow them to add an image from the Media section with a or
tag below it with class "caption" containing placeholder text which the editors could easily update.

I've dabbled with templates for the RTE in the past but haven't seen or heard of them still being used in the current (7.5.4) version. Does anyone know of a way of doing this or, if not, if RTE templates can still be implemented as discussed here? : https://our.umbraco.org/forum/umbraco-7/using-umbraco-7/48983-How-to-add-tinymce-Templates-in-v7

Cheers. Al

Copy Link
Marcin Zajkowski 112 posts 585 karma points MVP 6x c-trib

Nov 11, 2016 @ 15:57

100

Hey Al,

correct me if I'm wrong, but you're thinking about highlighting syntax inside the RTE or on the frontend of the page?

Maybe it's worth to consider to create a macro which will render desired block of code for input pasted inside as a parameter and then render it using some syntax highlighter e.g. Prism (http://prismjs.com/)? If script will be included inside the macro it should be easy to even render it inside the RTE in the backoffice!

We've done it in one of our past project from what I remember, but don't know if it will satisfy your needs.

Copy Link
Al Nicholl 15 posts 97 karma points

Nov 11, 2016 @ 16:07

0

Thanks for the reply, Marcin.

A bit like the Formats dropdown in the RTE except with a chunk of code that would be added into the editor and then editable.

I considered a macro but thought using a macro every time an editor wanted to add an image into content might be making things a bit trickier for them. However it might be the best solution. It would just need simple media picker and textstring macro parameters.

Thanks. I'll give it a go and see how it works out.

Al

Copy Link
Marcin Zajkowski 112 posts 585 karma points MVP 6x c-trib

Nov 11, 2016 @ 16:09

0

Hmm maybe wrapping this as a class or specific text block can also solve a problem as if I remember correctly, those plugins for syntax highlighting can style code blocks for example automatically. Image may be more tricky. Share your results for sure! :)

Copy Link

Al Nicholl 15 posts 97 karma points

Nov 11, 2016 @ 17:12

I tried a macro and it works well. Code is below:

@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{ 
    var imageId = Model.MacroParameters["image"].ToString();
    IPublishedContent image = Umbraco.Media(imageId);
    var caption = Model.MacroParameters["caption"].ToString();

    double ratio = (500 / image.GetPropertyValue<double>("umbracoWidth"));
    double newHeight = (image.GetPropertyValue<double>("umbracoHeight") * ratio);
    string imageUrl = image.Url + "?width=500&height=" + newHeight;
}
<p>
    <img class="thumbnail" src="@imageUrl" alt="@caption" title="@caption" />
    <span class="caption">@caption</span>
</p>

Flag this post as spam?

RTE HTML Snippets or Templates?