I'm stuck with trying to figure out how to display html tags inside of a mongodb table. Everytime I view the data through the browser, it shows the text of the html. Example:
I have this in a mongodb database table:
Test
It should display as this when viewed on a webpage: Test
But instead, it displays Test
Your Issue
I haven't used EJS before but I'm assuming its an issue with how you're inserting the HTML strings from the database into your EJS templates.
In most templating engines, simply inserting a string containing HTML markup will result in the engine escaping the HTML instead of rendering it.
EXAMPLE
INPUT > <div class='box'> <p class='item'>Hello World</p></div>
OUTPUT > <div class='box'> <p class='item'>Hello World</p></div>
This is normal and there are many reasons for it, one of which is security.
Solution
If it is, in fact, an issue with EJS escaping the HTML, you must instruct EJS to not escape it. I've never used EJS before but a quick google search for EJS escape html brought up this result How to escape HTML in node.js EJS view?
For future reference
While EJS will escape your HTML by default stack overflow does not. When you inserted <strong> in your question, stack overflow rendered it as HTML.
To get StackOverflow (and most other markdown readers) to render any HTML markup literally like I've done above, wrap the HTML in graves `.
Also, try to provide more information in your questions. The more information, the easier it is to deduce the likely source of the problem.
Related
Hey there folks :) I am trying to set up a search engine with elasticsearch/node.js, express and vue.js. I would like the search results to be clickable links, but they are only returning non-clickable html. I have tried adding normal html A- tags to the .json file, but on the front end this renders as a non clickable html text and not as a clickable link. Any suggestions would be really appreciated
this is what I have tried, just as a test:
Visit our HTML tutorial
I have had a look on google for possible solutions but all I could find were references to the normal html a-tag and that both j.son and vue.js can take those?
If I correctly get the issue, At FE your link get rendered as sting which is Google . You need to use v-html in this case to tell element to render the passed value as html not as string
//Suppose you have this vue data prop
let url = Google
Now In you html part Just use v-html to render
<div class="foo">
<template v-html="url" />
</div>
Switching from handlebars to pug I don't know how to populate a dropdown in pug. In handlebars I could do
<script type='text/javascript'>
$('.ui.dropdown').dropdown('set selected', [{{#each trip.tags}}'{{this}}',{{/each}}]);
</script>
Anyone got a clue what's the best practice in pug?
It looks like you're trying to generate JavaScript values as part of your template rendering. The approach you have taken in markdown could cause an XSS attack if this is not properly escaped (or it might just cause values like " to appear as ").
In pug, we recommend using js-stringify when you need to embed template values in a script. To do this, you need to install js-stringify using npm. You then need to include it in your locals. e.g.
pug.renderFile('my-template.pug', {stringify: require('js-stringify')});
Then you can use it as:
script(type='text/javascript').
$('.ui.dropdown').dropdown('set selected', !{stringify(trip.tags)});
N.B. It is only safe to use the !{...} syntax because js-stringify properly escapes the values before rendering.
I'm using handlebars with KeystoneJS and am trying to extend the main import in the default template. At the moment it only includes the {{{body}}} tag imported through the view plus the partials that I'm using.
Is there any way to add a couple of other imports (i.e. intro content, page title, additional scripts). In the jade version on the demo site it just imports it as a content block. Is this a limitation of handlebars?
You can do this with handlebars just fine using partials.
Put your partial in the folder indicated below:
Then in your layout ('default.hbs' in this case) reference the partial like you would normally in handlebars.
<div id="header">
{{> navigation this}}
</div>
The '>' means insert partial.
In this case 'navigation' is the
partial name in the partials folder.
'this' is the data context. Its what you want to do with the 'locals.data' object passed into handlebars by keystone. Using 'this' will pass the whole lot through whereas doing something like 'locals.data.navigation' would pass the navigation object through to the partial making it directly accessible in the partial (good for DRY).
Hope that helps. The partials specific documentiation for handlebars is here if you are interested in looking into a few more things you can do with scope etc http://handlebarsjs.com/partials.html
Or can you render partially and render rest later. So lets say when app starts up it renders most of the html. But when user abc wants to see his profile jade renders name to abc and merge it with regular pre rendered html and then you send it etc.
Rendering whole html pages at every request seems like a waste.
Converting all static html to jade seems like a annoyance that can be avoided. Slowly css became LESS and html became JADE?
I am lost on how to use jade I am learning express.
You can use Jade's compileClient function to create a function that will render predefined Jade code on the fly. (See the API reference.)
So, if you create a Jade file with the dynamic HTML, and compile that for the client, you can then call that function at a later time, and insert the resulting HTML string to the DOM.
I would like to know the possibility to develop custom html tags or custom html attributes to node.js , rather in jade, html or another html template enginer. I was looking at PhantomJS and I don't realize any example that accomplish it, either Cheerio as well. My goal is to make some components to easily usage in any kind of popular html engines. Any direction will be very helpful. Thanks!
Node.js is just a webserver, You need something to parse the custom tags, so its either the template engine that will convert it to valid html, or client side with JavaScript (aka AngularJS directives)
You can write your own filter similar to the example
body
:markdown
Woah! jade _and_ markdown, very **cool**
we can even link to [stuff](http://google.com)
That would give you
<body>
<p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even
link to stuff
</p>
</body>