I am using a third party indexing service (Swiftype) to search through my database. The returned records contains a property called highlight. This simply adds <em> tags around matching strings.
I then bind this highlight property in Ember.JS Handlebars as such:
<p> Title: {{highlight.title}} </p>
Which results in the following output:
Title: Example <em>matching</em> text
The browse actually displays the <em> tags, instead of formatting them. I.e. Handlebars is not identifying the HTML tags, and simply printing them as a string.
Is there a way around this?
Thanks!
Handlebars by default escapes html, to prevent escaping, use triple brackets:
<p> Title: {{{highlight.title}}} </p>
See http://handlebarsjs.com/#html-escaping
Ember escapes html because it could be potentional bad code which can be executed. To avoid that use
Ember.Handlebars.SafeString("<em>MyString</em>");
Here are the docs
http://emberjs.com/guides/templates/writing-helpers/
if you've done that you could use {{hightlight.title}} like wished,...
HTH
Related
I'm making a custom multifield breadcrumb component with this code.
<ul class="breadcrumb-list">
<li class="breadcrumb-item" data-sly-repeat.textItem="${properties.text}">
<a class="breadcrumb-link" href="${properties.link['textItemList.index']}">${textItem}</a>
<p class="works">${properties.link[textItemList.index]}</p>
<p class="doesn't work">${properties.link['textItemList.index']}</p>
<span>//</span>
</li>
</ul>
I've added the paragraph elements to show how my properties display.
This is the html output:
If I remove the single quotes as in p class="works", the value displays the breadcrumb item's link value. If I add the single quotes as in p class="doesn't work", nothing displays.
You'd think that removing the quotes from the same value in the href would display my link as the href; however, when i remove the quotes in the href value, it removes the anchor tag altogether. when i add them back in, i can still see the anchor tag, but there is no href attribute at all, only the breadcrumb-link class.
How can I get the href value to show a link?
AEM evaluates al href before rendering the resulting html.
If the link is invalid it will not put anything under href
If the expression is invalid it will wipe out all the section
Have you tested with valid links?
This will not work only with plain text.
when i add them back in, i can still see the anchor tag, but there is no href attribute at all, only the breadcrumb-link class. - That is the expected behaviour. Because you have an array of links and putting the quotes will try to obtain an entry in the array by the 'textItemList.index' key, like you would do in a map, instead by the index. Nothing is found of course, so the anchor point is rendered without the href attribute.
when i remove the quotes in the href value, it removes the anchor tag altogether. - That is not the expected behaviour. Since you exemplify that inside the paragraph it works, then I suppose this is a display context issue. HTL should implicitly uses the uri context for href attribute values and text for content inside HTML elements according to the documentation.
Try explicitly mention the context like href="${properties.link[textItemList.index] # context = 'uri'}" or href="${properties.link[textItemList.index] # context = 'text'}", or check the contexts mentioned in the doc - unsafe should ultimately do the job.
None of this context worked for me, and Im facing the same issue, if I remove the single quote "'" it will display the href just ok, but since my href includes it none of the context mentioned above is doing the job.
Is there any solution for this out there?
I am trying to create a blog o django where the admin posts blogs from the admin site.
I have given a TextField for the content and now want to give a new line.
I have tried using \n but it doesn't help. The output on the main html page is still the same with \n printing in it. I have also tried the tag and allowed tags=True in my models file. Still the same. All the tags are coming as it is on the html page.
My Django admin form submitted:
The result displayed in my public template:
You should use the template filter linebreaks, that will convert the reals \n (that means the newline in the textarea, not the ones you typed using \ then n) into <br />:
{{ post.content|linebreaks }}
Alternatively, you can use linebreaksbr if you don't want to have the surrounding <p> block of course.
After searching the internet and trying different Django Template Filters, I came across one specific filter, SAFE.
For me, LINEBREAKS filter didn't work, as provided by #Maxime above, but safe did.
Use it like this in your html template file.
{{post.content|safe}}
To have a better understanding of SAFE filter, i suggest reading the documentation.
{{post.content|linebreaks}}
This will make the line in the textbox appear as it is without using \n or \.
{{post.content|linebreaksbr}}
Besides the newline function in your CSS Declaration will work too.
Lets say i have
input string as
<div id="infoLangIcon"></div>ARA, DAN, ENGLISHinGERMAN, FRA<div id="infoPipe"></div><div id="infoRating0"></div><div id="infoPipe"></div><div id="infoMonoIcon"></div>
so i want to check if inforating is 0 and then remove the div and previous div also. The output is
<div id="infoLangIcon"></div>ARA, DAN, ENGLISHinGERMAN, FRA</div><div id="infoPipe"></div><div id="infoMonoIcon"></div
Regex is not your best option here. It is not reliable when it comes to HTML.
I suggest you use DOM functions to do this (I gave you a Javascript example, you have not provided a language to be used). If I understood correctly, if there is an element with the ID of infoRating0, you want to remove it and its previous sibling. This little snippet should do that:
if (document.getElementById('infoRating0')) {
var rating0=document.getElementById('infoRating0'),
rParent=rating0.parentNode;
rParent.removeChild(rating0.previousSibling);
rParent.removeChild(rating0);
}
Also, your HTML is invalid. You can only use an ID once in your HTML. You have two divs with the same ID (infoPipe) which you should REALLY fix. Use classes instead.
jsFiddle Demo
I'm exploring Django and got this particular problem.
How do I prepend <span class="label">Note:</span> inside {{article.content_html|safe}}?
The content of {{article.content_html|safe}} are paragraph blocks, and I just wanna add <span class="label">Note:</span> in the very first paragraph.
Thanks!
Sounds like you want to write a custom tag that uses BeautifulSoup to parse the HTML and inject the fragment.
There's no easy way. You can easily prepend to all articles.
<span class="label">Note:</span>
{{article.content_html|safe}}
If that doesn't help you consider changing the structure of article.content_html so you can manipulate with blocks from django templates, so it should look something like this
{{article.content_header}}
<span class="label">Note:</span>
{{article.content_html}}
If that solution is not feasible to you and you absolutely need to parse and modify the content of article.content_html, write your own custom filter that does that. You can find documentation about writing custom filters here http://docs.djangoproject.com/en/dev/howto/custom-template-tags/#writing-custom-template-filters.
An alternate approach could be to do this with javascript. In jQuery, it would look something like:
var first_p_text = $("p:first").text()
$("p:first").html("<span class="label">Note:</span>" + first_p_text)
Note though that if there are other elements inside your first p, $("p:first").text() will grab the text from those as well - see http://api.jquery.com/text/
Of course, this relies on decent javascript support in the client.
jQuery is the simplest and easiest to implement. You only need one line with the prepend call (documentation):
$('p:first').prepend('<span class="label">Note:</span>');
Explanation: 'p:first' is a jQuery selector similar to the ':first-child' CSS selector. It will select the first paragraph and the prepend call will then insert the span into that selected paragraph.
Note: If there is a paragraph on the page before your content, you may have to surround it with a div:
<div id='ilovesmybbq'>{{article.content_html|safe}}</div>
Then the jQuery call would be:
$('#ilovesmybbq p:first').prepend('<span class="label">Note:</span>');
I want to add a call to a onclick event in any href that includes a mailto: tag.
For instance, I want to take any instance of:
<a href="mailto:user#domain.com">
And change it into:
<a href="mailto:user#domain.com" onclick="return function();">
The problem that I'm having is that the value of the mailto string is not consistent.
I need to say something like replace all instances of the '>' character with 'onclick="return function();">' in strings that match '<a href="mailto:*">' .
I am doing this in ColdFusion using the REreplacenocase() function but general RegEx suggestions are welcome.
The following will add your onclick to all mailto links contained withing a string str:
REReplaceNoCase(
str,
"(<a[^>]*href=""mailto:[^""]*""[^>]*)>",
"\1 onclick=""return function();"">",
"all"
)
What this regular expression will do is find any <a ...> tag that looks like it's an email link (ie. has an href attribute using the mailto protocol), and add the onclick attribute to it. Everything up to the end of the tag will be stored into the first backreferrence (referred to by \1 in the replacement string) so that any other attributes in the <a> will be preserved.
If the only purpose of this is to add a JavaScript event handler, I don't think Regex is the best choice. If you use JavaScript to wire up your JavaScript events, you'll get more graceful degradation if JS is not available (e.g. nothing will happen, instead of having onclick cruft scattered throughout your markup).
Plus, using the DOM eliminates the possibility of missing matches or false positives that can occur from a Regex that doesn't perfectly anticipate every possible markup formation:
function myClickHandler() {
//do stuff
return false;
}
var links = document.getElementsByTagName('a');
for(var link in links) {
if(link.href.indexOf('mailto:') == 0) {
link.onclick = myClickHandler;
}
}
Why wouldn't you do this on the frontend with a library like jQuery?
$(function(){
$("a[href^=mailto]").click(function(){
// place the code you want to execute here
})
});