Polymer 3: Text to HTML - javascript

In my Polymer page I get a text from db in a variable and the text contains HTML tags. How can I change this text to HTML formated? The text I get is something like following:
<h1>Header</h1>
<p>More text......</p>
Read more
I display it in my page like the following, where item.content has the above text:
<div>
<p>${item.content}</p>
</div>

You can use unsafeHTML function from lit-html lib. See API reference here.
Example:
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
...
_render ({ yourHtmlString }) {
return html`
${unsafeHTML(yourHtmlString)}
`
}
Live demo on stackblitz.

Related

Uncaught TypeError: Cannot read properties of undefined (reading 'emit') VueQuill Vue3

Using VueQuill in my vue3 app i am receving the following console error when trying to show a html string -
My code -
<template>
<div class="">
<QuillEditor v-model:content="data" contentType="html" />
</div>
</template>
<script>
import { QuillEditor } from '#vueup/vue-quill'
import '#vueup/vue-quill/dist/vue-quill.snow.css';
export default {
name: 'HomeView',
components: {
QuillEditor
},
setup(){
const data = "<div><p>test test test</p></div>"
return {
data
}
}
}
</script>
This error only appears when using the following prop
contentType="html"
The error does not show when using
contentType="text"
What i have tried
Wrapping the QuillEditor element with -
<div v-if="data !== undefined">
<QuillEditor v-model:content="data" contentType="html" />
</div>
To ensure that the data is mounted before creating QuillEditor however this does not work.
After recreating some examples, I can say a div is not an HTML tag that Quill exports or uses in its HTML format.
If you would write anything inside the Quill editor and export its HTML then you can notice what HTML tags it generates. For example, type any text inside the editor and format it using all toolbar options and look at the HTML the editor exports-
It would look something like this-
<ul><li><strong style="background-color: rgb(255, 255, 255);">Lorem <em><u>Ipsum</u></em></strong><span style="background-color: rgb(255, 255, 255);"> is simply dummy text of the printing and typesetting industry. </span></li></ul><ol><li><strong style="background-color: rgb(255, 255, 255);">Lorem <em><u>Ipsum</u></em></strong><span style="background-color: rgb(255, 255, 255);"> is simply dummy text of the printing and typesetting industry. </span></li></ol>
You can see here that no div tag has been used in exported HTML, all tags are formatted tags (bold, italic, list, etc.) and that could be a reason when you use contentType="html", it tries to match the valid HTML tag and fails.
Here is the Working Sandbox where you can examine the exported HTML in the console. (Type anything inside the editor, format it using all toolbar options, and see the HTML when focusing out from the editor.)
If you will remove the div tag from your example and try only <p>test test test</p>, it would work because p is a valid HTML tag according to its structure.
You can read more about formats inside Quill Delta docs.
I think the editor parses the html content and converts it to Quill "internal nodes". And apparently, there is no node for "div" tag in the Quill editor, thus the content of the editor is null, and it fails to initialize.
Solution, change the html content to something that has a meaning for Quill editor, for example <h1>This is a heading</h1> or, taking your example, <p>test test test</p>.
Working codesandbox.

Vue.js/JavaScript - Is it possible to insert a link/anchor inside a text?

Let's say I have a paragraph with some text that I get from some database:
<p>
{{ text }}
</p>
However, this text may contain some references to other pages in my aplication:
Sample text [reference] sample text
So I would like these references to get turned into links to said pages:
<p>
Sample text reference sample text
</p>
I tried using the replace function in the script like this:
text.replace(/\[(.+)\]/,"<a href='/path/to/$1'>$1</a>");
But the characters all get escaped resulting in the anchor html code getting shown on the page.
Is there a way to stop the characters from being escaped, or even another way to turn [references] in the middle of the text into working links to another page?
If you don't want your HTML to be escaped, use the v-html directive.
From the docs:
The double mustaches interprets the data as plain text, not HTML. In
order to output real HTML, you will need to use the v-html directive:
Example:
var app = new Vue({
el: "#app",
data: function() {
return {
text: "See defect <a href='#'>#12345</a> for details"
};
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.min.js"></script>
<div id="app">
<p>{{text}}</p>
<p v-html="text"></p>
</div>

vue.js - escape html inside slot

I am currently working on a component that looks like this:
<pre v-highlightjs>
<code>
<slot></slot>
</code>
</pre>
So the problem I have is that when I am writing html inside the slot, this html is rendered and not shown as a string or code-sample in my case. I have tested it with escaped < and > and it works. How can I access the html inside the slot and escape it automatically?
Thank you
EDIT:
I use highlight.js for that component to highlight the code inside my component. highlight.js can highlight html aswell. When I put e.g.
<html><head></head><body></body></html>
inside my slot, the box is shown, but the input is rendered as html. So I want to escape the html-Tags (and other code-snippets) so that it is shown and ofc highlighted. Hope that specifies my problem a bit more.
An important limitation to be aware of is that your HTML is not HTML, it is input to Vue's templating engine, so what a component sees in the slot may not be exactly what is in the HTML file.
Writing a directive to take HTML content and replace it with a text version of that content is pretty straightforward. Putting that in a component is also pretty straightforward. You can see these together in the snippet below.
What you will also see is that the Vue templating engine strips out tags that shouldn't be inside the body: the html, head, and body tags don't make it to the component. Their contents, if any, remain.
If it is important to be able to use those tags (or, for that matter, possibly invalid HTML), you will not be able to do it in a slot. You will need to have the HTML as a data string, which you can easily interpolate using the normal curlies.
new Vue({
el: '#app',
data: {
headContent: 'Something in the head'
},
components: {
htmlEscaper: {
template: '#html-escaper',
directives: {
escapeContent: {
bind(el) {
const html = el.innerHTML;
el.textContent = html;
}
}
}
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<html-escaper>
<html>
<head>
{{ headContent }}
</head>
<some-junk>
Custom tags are ok
</some-junk>
<body>
<div>This part is legit</div>
</body>
</html>
</html-escaper>
</div>
<template id="html-escaper">
<code v-escape-content>
<slot>
</slot>
</code>
</template>

Display javascript/html code like plain text in react.js

How to display javascript/html code in react.js render.
I have tried like this
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong </p>';
return (
<div>
<div dangerouslySetInnerHTML={{__html: thisIsMyCopy}}>
</div>
</div>
)
This is html code.. but i also want to display javascript code on my screen... how i can do that..
Can you guide me.. how to proceed with it
Its already in a stringed version, just need to include the variable inside curly braces. dangerouslySetInnerHTML is for when you want to turn a html string into actual html.
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong </p>';
return (
<div>
{thisIsMyCopy}
</div>
)
if you want a string version of a function just take whatever function and add a string to it like so:
function functionString() { console.log('stringed function") }
var functionAsString = '' + functionString
return (
<div>
{functionAsString}
</div>
)
Here is a working pen demonstrating this http://codepen.io/finalfreq/pen/JRqEWW
If you want to display the "code" in html, you can use
<code>something</code>
tag and it will display your code onto the screen.

Can I use complex HTML with Twitter Bootstrap's Tooltip?

If I check official documentation, I can see a property called HTML:
Name | Type | default | Description
----------------------------------------------------------------------------
html | boolean | false | Insert html into the tooltip.
If false, jquery's text method
will be used to insert content
into the dom. Use text if you're
worried about XSS attacks.
It says, "insert html into the tooltip", but the type is boolean. How can I use complex html inside a Tooltip?
This parameter is just about whether you are going to use complex html into the tooltip. Set it to true and then hit the html into the title attribute of the tag.
See this fiddle here - I've set the html attribute to true through the data-html="true" in the <a> tag and then just added in the html ad hoc as an example.
Another solution to avoid inserting html into data-title is to create independant div with tooltip html content, and refer to this div when creating your tooltip :
<!-- Tooltip link -->
<p><span class="tip" data-tip="my-tip">Hello world</span></p>
<!-- Tooltip content -->
<div id="my-tip" class="tip-content hidden">
<h2>Tip title</h2>
<p>This is my tip content</p>
</div>
<script type="text/javascript">
$(document).ready(function () {
// Tooltips
$('.tip').each(function () {
$(this).tooltip(
{
html: true,
title: $('#' + $(this).data('tip')).html()
});
});
});
</script>
This way you can create complex readable html content, and activate as many tooltips as you want.
live demo here on codepen
Just as normal, using data-original-title:
Html:
<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>
Javascript:
$("[rel=tooltip]").tooltip({html:true});
The html parameter specifies how the tooltip text should be turned into DOM elements. By default Html code is escaped in tooltips to prevent XSS attacks. Say you display a username on your site and you show a small bio in a tooltip. If the html code isn't escaped and the user can edit the bio themselves they could inject malicious code.
The html data attribute does exactly what it says it does in the docs. Try this little example, no JavaScript necessary (broken into lines for clarification):
<span rel="tooltip"
data-toggle="tooltip"
data-html="true"
data-title="<table><tr><td style='color:red;'>complex</td><td>HTML</td></tr></table>"
>
hover over me to see HTML
</span>
JSFiddle demos:
Bootstrap 2.x
Bootstrap 3.x
set "html" option to true if you want to have html into tooltip. Actual html is determined by option "title" (link's title attribute shouldn't be set)
$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true});
Live sample
As of bootstrap 5, you can just specify the contents of the tooltip to be html DOM nodes when configuring it. Sample config...
// setup tools tips trigger
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new Tooltip(tooltipTriggerEl, {
html: true // <- this should do the trick!
})
});
For bootstrap 5, you can use data-bs-html="true" with the title tag data-bs-original-title="Tooltip Title"

Categories