The goal
The goal is to build a minimalistic wysiwyg editor in a text area. Retrieving a string from a network call, an interaction will add an `anchor` tag around selected text, and being able to send that (unescaped!) string over a network call.
The question is around Angular's built-in security measure to escape or ignore HTML tags.
Expected result:
before: Textarea value is set to this string
after: Textarea <a>value</a> is set to this string
However, angular (11) is automatically escaping / ignoring the HTML.
I've found and tried several solutions that use the [innerHTML] directive rather than [(ngModel)] directive. But since I'm working with two-way data bindings, this did not cut it.
If anyone knows a way to nudge angular to ignore this html sanitization for a single input field, I look forward to read about it
Thanks in advance
You need to use DomSanitizer (inject it) and do something like following:
this.sanitizer.bypassSecurityTrustHtml(value)
I'm not sure about how exactly are you planning on sanitizing the output (or for that matter, input), but have a look at https://angular.io/api/platform-browser/DomSanitizer#bypasssecuritytrusthtml
Related
I have stored rich text in my db, and now I would like to show it to the website viewers, but when I echo the content I got this:
<p>sometext</p><strong>text</strong>
I would like to remove the 'P' tags and any other tags from the text.
I have used Ckeditor to store the rich text into DB.
I could use Ckeditor to show the rich text to the website viewers, but Ckeditor is an editor and I would like only to show the rich text.
Is there any in-built php command to convert the stored text into rich text and display it on my website?
Well "rich text" is has its own format. It's not xml like. So for example, a simple file where I will try to infer formatting of:
Hello
This is bold
This italic
Looks like this in "rich text":
{\rtf1\ansi\ansicpg1252\deff0\deflang1033{\fonttbl{\f0\fnil\fcharset0 Calibri;}}
{\*\generator Msftedit 5.41.21.2510;}\viewkind4\uc1\pard\sa200\sl276\slmult1\lang9\f0\fs22 Hello\par
\b This is bold\b0\par
\i This italic\i0\par
\par
}
So it is not so simple to get this into HTML.
I'ts straight forward on steps to get it into html (some text parsing involved, and a loop) but from your question it doesnt seem like you are (1) aware of it's format, and (2) haven't tried to write code to make it html?
I can add to this answer if you have actually tried on how the parsing steps might go. I can add now but want to get more information so as not to provide useless code, say if you are already using an API that does the deed.
I use Draft.js with React.js but I hope this helps. if you're still facing this issue: You can see the solution in this video
Basically you have to convertToRaw, then JSON.stringify it. Then this can be sent to your backend as a string. To display it, make a GET request for that particular data, then JSON.parse it and then convertFromRaw. Pass this into another RichTextEditor as the editorState but set the readOnly={true}
Find the methods for your particular editor which allows you to convert states and display it.
Is there any way to use currency or a custom pipe inside an input text in Angular 2?
I've tried this:
<input [(ngModel)]="order.price | currency"/>
But without success
It's not possible to use pipes in inputs, even in angular 1.
What you are looking for is a mask directive.
For angular1 there are a lot of directives like ngMask, angular-input-masks and others.
Angular2 is in release candidate right now (06/02/2016), so there are just a few "directives".
You can also build your own mask component.
I've been able to use the angular2-text-mask and text-mask-addons as a way to transform the format of input text field values. The documentation and related info is quite thorough and a currency example can be seen on a text-mask demo page.
Though I've not tried it, this ngconsultant blog post discusses a technique for adjusting input values using a somewhat limiting (browser-native focus/blur methods) #HostListener technique.
With either approach you have to be wary of whether you're transforming the input simply to make the UI more friendly for the user OR if you want to utilize/preserve only properly formatted input bound to your data model in the component.
Regarding the former, if you want to remove the formatting that is applied to the input before it is utilized, stored, or passed on, extra work/code/intervention is required either in your component code or in other services that manage the data model to parse the formatting out of the data bound from the input value.
(A very basic solution is discussed in this stackoverflow post.)
AngularJS code:
$scope.checking="<div style="color:red;">check</div>";
HTML code:
<p ng-bind-html="checking"></p>
so i used $sanitize for this one and the ng-bind-html directive to get the job done.
So the result in html page is:
check
and the above should come in red color
i got the output but the string 'check' does not come in red! the style tag is ignored! how can i do it? do i use interpolate?
Any way to do it? hopefully its simple... AngularJS experts please help!
$sanitize Sanitizes an html string by stripping all potentially dangerous tokens.
So do use $sce service method to make it trusted html using trustAsHtml method.
$scope.checking= $sce.trustAsHtml("<div style="color:red;">check</div>");
My problem is that I want to create a Firefox AddOn, and I need to extract from the HTML document every "writable" (I mean: input, textarea or other ways to write text) to work with its value.
I know the method document.getElementByTagName(), but the case is that i don't know how many tags to input text exist (or a webpage usually have on it) to refer them this way; or even if this problem can be solved otherwise.
I really appreciate any help or idea to do this efficently, so I can go forward with this project.
You only have 2 possible tags: textarea and input. The problem is that with HTML5 the input tag has several kinds of types which you can insert text but you have also another ones that you can't (like submit or radio):
color
date
datetime
email
month
number
password
search
tel
text
time
url
You can use document.querySelectorAll function to retrieve those elements:
document.querySelectorAll("textarea input[type=text] input[type=email]");
Note that I have only include text and email in the selector but was just a sample mode. You should add all the types you think necessary retrieve.
Here you have all the possible types for input tag and the browser support of those, I recommend check out the documentation to have a better idea of what tags should be relevant for you.
Is there a built-in jQuery function for encoding a string as HTML?
I'm trying to take the text a user types into a text box and then put that text into a different area of the page. My plan was to take the .val() from the text box and supply that to the .html() of the <div> element. Perhaps there's a good jQuery plugin to help with this (if it's not built-in) or a better way overall to accomplish this goal.
For example, if the user puts <Victory!> in the text box, I'd want the other part of the page to actually show the text <Victory!> instead of nothing being visible.
Instead of .html() use .text() for this. This will encode the output when putting it in the destination element. Here's a quick demo showing the differences, try something like "<script>": http://jsfiddle.net/6WG47/
If the .val() contains HTML markup (i.e. text), that should automatically render if you pass it directly to .html(). Are you experiencing something otherwise? Or are you wanting to strip the html encoding?