I have an issue with jQuery TE editor (Download the files here) in that the paragraph tags are not wrapping where they should.
I get:
first sentence<p></p>second sentence<p></p>thirds sentence<p></p>
when it should be:
<p>first sentence</p><p>second sentence</p><p>thirds sentence</p>
For some reason it is placing the text outside of the tags. I've echoed the posted data below the form field to check.
Any ideas anyone? :-)
Related
I've noticed that inside HTML textarea element I can set almost any default value without escaping and access it from JavaScript through that element node's value property like below:
HTML:
<textarea id="txt">
<h1>A h1 heading</h2>
<!-- this is comment -->
<textarea>This is a textarea</textarea>
</textarea>
JS:
console.log(txt.value)
JS Output:
<h1>A h1 heading</h2>
<!-- this is comment -->
<textarea>This is a textarea</textarea>
To print the nested textarea tag I only needed to escape that <. If escape all the angle brackets then it also works. But that is too much work.
My question is it the standard behavior? I've found no articles or docs saying about. I looked into spec. But it seemed too complex. Is it safe to build app assuming it will work like this on all browsers? Can you please give reference to part of the spec that explains this?
I have a page with scripts that insert and convert a Markdown file:
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#2/dist/zero-md.min.js"></script>
</head>
<body>
<article>
<zero-md id="text"></zero-md> <!-- the area into which each .md is to be inserted and converted -->
<script>
document.getElementById("text").src="CONVERTME1.md";
</script>
</article>
</body>
The conversion itself works, the text gets displayed. Each .md file will be part of a series, and the scripts will enable me to bypass the process of manually converting the texts, so that I can go back to them for editing frequently and easily. I plan to turn the getElement into navigation buttons for the sequence of .md files, like the chapters of a book to flip back and forth. Before creating those buttons, there is an element in each output of the conversion that will have to be regularly removed. It's a string from the top (first line) of each original .md file. It starts with "tags:", followed by one or more keywords. It's used by the Markdown editor (WriteMonkey) for internal search operations, and I intend to keep them on each .md file for later editing (and auto-conversion/updating), while they serve no purpose in the final output on the HTML page. This string gets converted by the zero-md script as
<p>
::before
"tags: KEYWORD"
</p>
inside
<zero-md id="text">
#shadow-root (open)
<div class="markdown-body">
So I tried
<script>
document.getElementByTagName("p::before").contains("tags:").remove();
</script>
as the last element inside <article>, but it didn't work. Then I tried (in the same place) the jQuery
<script>
$("p::before").contains("tags:").remove();
</script>
, but it too didn't work. I wasn't sure about p::before and .contains("tags:"), so I tried just p to see if it would affect any paragraphs of the main text, and it didn't do anything, everything inside zero-md would remain intact. I checked that elements outside zero-md can be removed. So I assume the problem is that the p (or any element) that is supposed to have been converted from the .md file and available for reference is somehow inaccessible by getElementByTagName at that moment of parsing.
Any solution?
Tangentially: I tried to replace getElementById("text") with getElementByTagName("zero-md") (so as to do away with id="text"), and it didn't work. Why?
Thank you.
It seems like you wish to strip the first <p> tag from the rendered contents. The easiest way to do this looks something like:
<article>
<zero-md id="text">
<template data-merge="append">
<style>
.markdown-body>p:first-child {
display: hidden;
}
</style>
</template>
</zero-md>
<script>
document.getElementById("text").src="CONVERTME1.md";
</script>
</article>
I am having an issue when I pull data into the WordPress website.
I use the code snippet below to print the category description.
<p> {{ currentTax.activeTerm.description}} </p>
It works fine, it prints description but it is not HTML output. Links, bold or other tags I enter in category don't show in the output.
For example it prints like this
This is description of the car category. In order to check cars check this link <a href="cars.php" > Cars</a>
It doesn't display a link, it shows text. Is there any way to quickly solve this issue?
You can do this with innerHTML property binding:
<p [innerHTML]="currentTax.activeTerm.description"></p>
See: Sanitization and security contexts
refer dangerouslysetinnerhtml or use iframe to load the content. But I prefer to use iframe
I'm running this code in my component.html file
<p [class.edit]='true'>
task-details works!
<div [class.edit]='true'>
<button>Click to mark complete</button>
</div>
</p>
and I'm getting the following error when I open console in my browser
Uncaught Error: Template parse errors:
Unexpected closing tag "p". It may happen when the tag has already been
closed by another tag.
The error links to https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags which talks about implied end tags existing.
To try and get around this I delete either the
</div>
endtag or the
</p>
endtag. Deleting either one get rid of the error. Also if I get rid of the class description inside and leave a tag that doesn't reference the css it also get rid of the error:
<p>
task-details works!
<div [class.edit]='true'>
<button>Click to mark complete</button>
</div>
</p>
My issue is I want to have the
<p [class.edit]='true'>
go over my other tag so I can produce a border in my div tag with another larger border around it, which is called by my p tag.
So is there a way to get rid of implied end tags so I can have my div tag inside my p tag or is the only way I can do this is by making the div tag into a child component and then calling it in its immediate parent component?
<h2 class="pagetitle"><em>Edit Site Update</em> Site Update</h2>
In the above code, how to remove text followed by "Edit" in em tag using jquery?
So that any text comes after text Edit in em tag, will be removed.
Why not
$('.pagetitle em').text('Edit')