How to display formatted html in text area in angularjs? - angularjs

I am trying to display html by using angularjs sanitize module and ng-bind-html attribute on the element. It works fine if I have the attribute
on a div element.
<div ng-bind-html="htmlText" contenteditable="false"></div>
But I need the same text in a text area control. When I read about displaying html in text area, my understanding was that
text area does not support this. Is there a way I can convert the html to text before hand in controller and then use only ng-bind on text area? I have multiple long paragraphs and bullet points in html to display as formatted text.
Thanks for any suggestions.
//Does not display formatted html.
<textarea class="form-control" ng-bind-html="htmlText" contenteditable="false" rows="7"></textarea>


textarea only supports plain text. Since you are not allowing the text to be edited, I'd use the div that you started with. I suspect that you're trying to control the size and enable scroll bars when necessary on the div, and hoping to get that out of textarea. You'll be much better off just styling the div accordingly.

Related

When I render my user input from a textarea in react, all of the formatting (line-breaks and tabs) are automatically removed, how do I change that?

How my text appears when rendered
How my text appears in the textarea input
I am posting multi-paragraph blogs, some about poetry (where line breaks and spacings matter a lot). How do I make the line breaks and other spacing stay when I render the data? Can I make it so the user can put html tags in the textarea somehow? I am using firebase realtime database to store the data.
I tried changing the HTML tag in the rendered component from p to per, expecting to be able to use html tags, but that didn't work.

write this code on css file
white-space: pre-wrap;

Making a background-colorful text in React text editor

I am working on comparing files. So if something was added - I make it green, if deleted - red. And I do that on the server-side by adding a span tag and style attribute. Then I want to show it on the front side with some of React text editors by initializing an initial state with this file. The problem is that text editors cut style attributes, so my text is not with color. And I need to show a job of files comparator.
Thanks for any help :)

Can i get applied style Object of editor-text in textangular

i want to save textangular editor's text with styles and tags (applied by its toolbar) in DB.
Is there a way i can do this without saving HTML ?
Currently i am saving html with decoding.

Convert angular view into image for clipboard

I would like to render a view from an Angular directive into an image so that a user could right click on it, and copy it to clipboard. Basically I have a directive that compiles information into a nice Bootstrap scaffold with styling and would like to be able to right click, copy to clipboard, and paste into a document as a img type.
Imagine:
<div class="fancyCss">
<MyCustomHeaderDirective2 dataVal="foo"></MyCustomHeaderDirective2>
<MyCustomBodyDirective2>
<div class="row">
<- Content ->
</MyCustomBodyDirective2>
</div>
So On the page they load up the correct 'foo', see the fancy table, right click, and voila, jpg of table in your clipboard. Currently the process is render, get out snipping tool, click and drag,copy, paste.
For clarity: IS this possible? Does a library exist for this? Most importantly, how do I implement this with an angular directive?

If you are looking for pure client side solution:https://html2canvas.hertzen.com/
Alternatively for more customisable and foolproof solution, you can pass your DOM with inline styling to the server side and render it using phantomJS. Take a snapshot, save it as an image and send back to client.

There is a library available
http://hertzen.com/experiments/jsfeedback/
http://html2canvas.hertzen.com/
How it works
It capturing the html dom content and pasting inside a canvas
In Canvas you can convert the content to image format

ExtJS: Making an image as a column header

Is it possible in ExtJS 4.0 to set a column header as a image, or custom rendered HTML?

The API for column text says:
text : String
The header text to be used as innerHTML (html tags are
accepted) to display in the Grid.
Which means you can pass in something like <span class="mySpan"></span> and define a css class that has a background image.
EDIT:
Here is an example:
http://jsfiddle.net/HSVj8/102/

Resources