Binding complex rich text element in AngularJS - javascript

I'm trying to bind a complex, multiline rich text element with AngularJS, say something like:
<h1>Title</h1>
<p>Some content</p>
<p>More Content maybe with <i>italics</i> or <strong>bold</strong></p>
<p>Even links</p>
Now, when trying to render using a simple ng-bind-html it only binds the first element (in this example, the h1) and it does so inside a p tag, so the tag isn't applied, the rest is left below as a literal string.
How can I make it so Angular takes the entire multiline response and renders it accordingly?
Another issue I'm having is that if the HTML to render has some space before the line starts (that is, if it's at all tabulated) then it simply will print out the tab inside the tag and leave all the content as the string literal.

Related

Is there any way to change value of textarea with HTML

I'm trying to make markdown editor with auto resizable textarea.
I'm using marked library. But when I change value with value={marked(this.props.text)}, it outputs like: <p>Hello</p>
I can't even use dangerouslySetInnerHTML or innerHTML property since textarea doesn't render HTML.
When I use elements such as p, It doesn't look like textarea.
Can someone give me a hint?
I've solved it, see this post
In other to make the element look like textarea, you should translate a carriage return into a br html tag.
In this post:
You could just apply CSS white-space:pre on the element, exactly like the HTML textarea element is internally doing:
<span style="white-space:pre">your text \n will \n be \n on multiple \n lines</span>
Also read this comment - about carriage return

Get sub-html element in [innerHtml] | Angular 6 for highlighting text

Angular 2/4/5/6:
I have a div :
The innerHtml is actually html that has multiple tags in it, for example:
<H1> Title of note /H1>
<P> This is a example note </P>
How would I get the reference of these sub html elements inside the innerHtml on click or highlight in the typescript file in Angular?
The purpose of this is to add a highlight span to the highlight portion of a html element, and its very difficult to modify the innerHtml before it is recieved by the angular side.
I was wondering if there is a solution similar to using nativeElement, but since i can't add #var to any of the subelements I am not sure what to do.
I am not totally sure of what you mean, but I would use a JQuery selector to add the class with the CSS style you want to apply to highlight the text.
If you don't want to use JQuery, you still can manipulate the DOM via document commands.

rendering html dynamically using Aurelia

I have a requirement where I get the string in the form of HTML tags and it changes on a button click. On button click, I am changing the value of the binding element.
<div id="htmString">${htmlTag}</div>
and the content in htmlTag is
<p>Hello World!</p>
How can I skip writing document.getElement in the view model and still compile the HTML.
You just need to bind to the innerHTML property like this:
<div id="htmString" innerhtml.bind="htmlTag"></div>
So any time htmlTag changes it will get rendered inside your div.

How to dynamically create mixed HTML content in jQuery

Considering I want to create this HTML dynamically:
<li><img src="a"/>some text</li>
Some text is a text string that is potentially unsafe, let's say is stored in variable 'some_text'.
The idea is to call $('<li>').append($('<img>').attr({src:"a"}), ... );
Using $(some_text) is bad idea because it's unsafe.
Using text(some_text) doesn't work because the text is not an only child of an element.
I do not want to wrap the text into a <span>
I do not want to invent/use a function that sanitizes or escapes the string
There are many ways, but possibly the simplest is to first add the text content to the li element and then prepend the image to get the correct order.
$('<li>').text(some_text).prepend($('<img>').attr({src:"a"}), ... );

text in HTML becomes split / malformed in the DOM when elements are inserted around text and then removed (preserving the inner text, though)

So, here is normal text: just your standard paragraph.
I have javascript that will insert a span around selected text (for highlighting purposes).
The problem is that when I remove the span, the nice text block becomes chunky, and malformed:
How do I restore the block of text to its original state?
I think you must to keep the original node, and replace it cloning the innerHTML with your span-wraper. Then just replace the nodes.
Instead of removing the span, try replacing the content of the standard paragraph with its original data.

Categories

Resources