If I have a textarea with the following content inside of it on page load:
<h1>Hello</h1>
<p><h1>Hello world</h1></p>
I apply CKEditor to the textarea, CKEditor renders the content as if both lines were h1 elements, even though one is entities wrapped in a paragraph.
For clarity what I expect to see is:
Hello
<h1>Hello world</h1>
What I am actually getting is:
Hello
Hello World
Strangely enough, if I type <h1>Hello world</h1> into the editor it will produce the entity encoded string in source and display it as expected (printed to display as typed).
That's because even in textarea you have to encode your HTML. So in fact you should set the content of it to:
<h1>Hello</h1>
<p><h1>Hello world</h1></p>
As you can see - Hello world header is encoded twice.
Related
I'm trying add a markdown editor to my nodejs express code and display the content of it in another page. I'm pretty new to this and can't figure out what I'm missing. I'm using EJS as my view engine. I have already added the simpleMDN WYSIWYG editor as below,
<label for="text">Description: </label>
<textarea id="file-input" type="text" name="description"></textarea>
<script>
var simplemde = new SimpleMDE({ element: document.getElementById("file-input") });
</script>
But when I try to display it in another page I can't get it done as I want. Below code is what i tried.
<script id="file-input">
simplemde.value()
</script>
<%= releasenote.description %>
By using this code this is the result i got. result is not displayed by the script tag. 'releasenote.description' shows this output.
# hello world ## hello world ### hello world * hello world hello world
I want it to display without # and *. and they should be displayed as headers, bold, list, etc.
In the comment section of my forum-like website, users can attach files in a post.
When making comments, users can edit using Rich Text Editor and quote a file attached in the post;
When users make a comment quoting a file, the data stored in backend database after the comment is submitted will be a string that contains html tags, example:
const commentContent = "
<p><br></p>
<p>This is a comment</p>
<blockquote>
BJFC123_003.jpeg
</blockquote>
<p>Hi John, this is the file that I mentioned about</p>
<p>please click to download the file</p>
<p><br></p>
"
when other users read the post, the comment is fetched and the above text is loaded like the below way to convert pure string into actual html for displaying:
<div
className="ql-editor"
dangerouslySetInnerHTML={{ __html: commentContent }}
{...otherProps}
/>
Now, instead of this simple scenario, I need to make a twist:
when loading the comment, instead of loading html as described in the original text, I need to add onclick event to all blockquote tags.
So the actual loaded elements in the DOM should be:
<p><br></p>
<p>This is a comment</p>
<blockquote onclick={myCustomMethod(filename)}>
BJFC123_003.jpeg
</blockquote>
<p>Hi John, this is the file that I mentioned about</p>
<p>please click to download the file</p>
<p><br></p>
Here,
myCustomMethod()is a function defined in the comments component
filenamewill be equal to "BJFC123_003.jpeg"
It is easy to extract the file name from the string commentContent, but how to make such a modification when converting from string to actual html?
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>
I have in my database a column that stores html data i.e <p>this is a test</p> and I am loading that data into a javascript form field, however, the html tags are not being parsed properly.
They are being displayed such as;
<p>This is a test</p>
Can someone give me a hint as to what I am doing wrong please.
Parse your text using .html function
var text= $('<textarea />').html("<p>This is a test</p>").text();
alert(text);
DEMO
Looks like the tags are being saved as their HTML entity equivalent. You'll have to convert them to their actual character if that's what you require.
Im sure this is probably a stupid question...
Im using chance.js because I want the main <h1> on my site to display something different each time you reload the page.
So if i put the following into my functions.js file:
$(window).load(function() {
document.write(chance.pick(['hello', 'GDay']));
});
how to I get the word to appear inside my <h1> </h1> tags in my html file ?
The document.write method will output that text where it is called. If you call it between the tags, it will output that text between the tags.
Give the <h1> tags an ID, like this:
<h1 id="title">text here</h1>
Then, instead of document.write, do something like this:
$("#title").html(chance.pick(['hello', 'GDay']));