In dompurity I would like to use selfclosing tags.
How can I instruct dompurity to convert tags such as <br> to <br />. If this is not supported what is the recommended approach.
const sanitized = DOMPurify.sanitize(htmlContent, {
ALLOWED_TAGS: GLOBALLY_ALLOWED_ELEMENTS,
ALLOWED_ATTR: GLOBALLY_ALLOWED_ATTRIBUTES,
});
Related
I want to generate a string base64 with a input type=file to persist just the string base64 so that became easier to manage images in database. Easier because i can work with only Json in this way.
I have something like this in my Vue server (using bootstrap-vue):
<template>
<div class="row">
<!-- Send Image -->
<div class="col-sm-8 ml-auto mr-auto">
<b-form-file v-model="file" :state="Boolean(file)" placeholder="Escolha uma imagem..." accept="image/*"></b-form-file>
<b-button v-on:clicl="submitFile()">Enviar</b-button>
</div>
</div>
</template>
export default {
name: 'imagem',
data(){
return{
file: ''
}
},
methods:{
submitFile () {
let stringBase64 = wantToConvertFile(this.file);
}
}
}
So how is the simple way to make sometring similar of
"wantToConvertFile( )"?
Bootstrap-VUE - Form File Input
Answered here
https://stackoverflow.com/a/36281449/6685348
Filereader api https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
note
The file's result results in a string that cannot be directly decoded as Base64. To retrieve only the Base64 encoded string, you must remove data:/;base64, from the string.
According to React 15.0 release notes, React is no longer supposed to emit <span> tags around text nodes. I tried that using jsbin and script
const Span = () => (<span>a</span>)
const text = 'text'
const Text = () => (<span>{text}</span>)
const Div = (<div>
<Span/><Span/><Span/><Text/>
</div>)
ReactDOM.render(Div, document.querySelector('#target'))
is rendered as
<div data-reactroot="">
<span>a</span>
<span>a</span>
<span>a</span>
<span>text</span>
</div>
So it doesn't work. I'd expect string a to be rendered without surrounding <span> tags. How is this feature supposed to work? Is it necessary to enable it in some way?
The feature is used when writing something like this:
<div>{'a'}{'b'}</div>
"a" and "b" was surrounded by tags and the dom was kinda full with this tags when using this multiple times in different components.
With 0.14.8 this was rendered as:
<div data-reactid=".0">
<span data-reactid=".0.0">a</span>
<span data-reactid=".0.1">b</span>
</div>
With 15.0 this is rendered as:
<div data-reactroot>
<!-- react-text: 2 -->a<!-- /react-text -->
<!-- react-text: 3 -->b<!-- /react-text -->
</div>
This is explained in https://github.com/facebook/react/pull/5753 and can be tested with something like https://codesandbox.io/s/N1znXxXL.
I'm trying to update models from a JSON representation of an object to a form. Here's a link to an example
To recreate my issue,
Change the data in the form (see that the JSON changes).
Change the JSON (See that the form doesn't change).
Here's my code:
JS
var ppl = {
createdby: "foo",
dateCreated: "bar",
}
angular.module('myApp', [])
.controller("Ctrl_List", function($scope) {
$scope.people = ppl
$scope.print = JSON.stringify($scope.ppl)
})
HTML
<div ng-app="myApp">
<div class="container" ng-controller="Ctrl_List">
<!-- FORM -->
<div class="row" ng-repeat="(key,val) in people track by $index">
<div class="col-md-12">
<label for="{{key}}">{{key}}</label>
<input class=form-control" id="{{key}}" ng-model="people[key]">
</div>
</div>
<!-- JSON -->
<div class="editable" contenteditable="true" ng-model="people">{{people}}</div>
</div>
</div>
When a user changes the JSON, the form should update in real-time.
Here's some things I have tried:
Change the JSON display element from div to input but it prints [Object][Object]
Also <input ng-model="JSON.stringify(people)"> but I get an "unbindable element" error.
Also tried adding a new model: $scope.print = JSON.stringify(people) but it shows nothing in the raw output.
Is it even possible to update a live object or am I gonna have to do some sort of event that triggers the form to change?
PS: Angular 1.5.8
There are several reasons why this doesn't work:
ng-model on a div doesn't do anything
even if it did, it would save a string to people, and your form would thus not work anymore.
You should use a textarea to make it work, and bind it to another variable, of type string. Using ng-change on the textarea, and on the inputs of the form, allows populating the people object by parsing the JSON string, and vice-verse, populating the JSON string from the people object.
See https://codepen.io/anon/pen/peexPG for a demo.
Refering to Contenteditable with ng-model doesn't work,
contenteditable tag will not work directly with angular's ng-model because the way contenteditable rerender the dom element on every change.
<div class="container" ng-repeat="item in itemslist">
<img ng-src="{% static "img/new/item.imagename" %}" alt="" />
</div>
item - > is an object, below is the object definition
var firstItem = {};
firstItem.id = 0;
firstItem.name = "testfirstname";
firstItem.imagename = "cart.png";
var secondItem = {};
secondItem.id = 2;
secondItem.name = "testsecondname";
secondItem.imagename = "home.png";
itemslist- > [firstitem, seconditem]
In the runtime, item.imagename is not getting replaced by its value (cart.png). coming out of the iteration. The request still looks with the variable name (item.imagename) and not the value (cart.png).
Page not found (404)
http://example.localhost.com:8000/static/img/new/item.imagename
How do I get this working?
The order in which a page renders with Django is:
A request is made from the client (browser) to the server (ultimately Django).
Django matches a view using the url, and from the view renders the template in server.
The client gets the response and renders the page. At this stage, the client knows nothing about Django, its templating system etc.
Angular is a JS technology that operates client-side. It has absolutely no way to know about static files, Django templates etc.
Therefore, if you require to load an image in client-side, then you have to properly specify the url beforehands. Since you know the name, you need only to provide the rest of the url to angular.
To do that, you need to include settings.STATIC_URL to your context, and render it into a js variable in your template. This variable will travel through to client, and then in angular use it to properly build the url.
Be sure to take care of angular's security considerations about interpolation though, but that's a different matter entirely.
The server-client confusion is a common one when beginning web development.
I think this is what you need
<div class="container" ng-repeat="item in items>
<img ng-src="{{static + '/img/new/' + item.image}}" alt="" />
</div>
I consider static = base url, according to your comment
For anyone who has this issue in the future,
What ever you're static_url is in the django settings. For example:
STATIC_URL='/static/'
then in your template do this:
<div class="container" ng-repeat="item in items>
<img ng-src="static/img/new/{{item.image}}" alt="" />
</div>
I faced same issue, but in the context of using Mustache and Django templates. Here is what worked for me.
settings.py:
STATIC_URL = '/static/'
Mustache template part of html:
<div class="avatar"><img alt="" src="{% verbatim %}{{ userAvatar }}{% endverbatim %}" /></div>
Javascript that renders the Mustache template sends the "userAvatar" in the following format:
"userAvatar" : "/static/images/avatars/" + avatarNameFromServer
I'm thinking about trying to initialize (parts of) the AngularJS model from data in the HTML, rather than doing a request to the server to fetch the data as JSON, or embed a JSON object directly in the page.
(The server currently only renders the data in HTML (not JSON), and I'd like to avoid rewriting "too much" code right now, and HTML works well with search engines.
The application itself is a discussion system.)
Here follows an example of my HTML (simplified). The data embedded therein is a post ID (123456), an author ID (789), an author name (Kitty overlord) and a text message ("Kittens Cats! Just kidding.").
<div id="post-123456">
<div class="dw-p-hd">
By <span data-dw-u-id="789">Kitty overlord</span>
</div>
<div class="dw-p-bd">
<p>Kittens</p><p><strike>Cats! Just kidding.</strike></p>
</div>
</div>
And I'd like to construct an AngularJS controller, and initialize $scope to something like:
$scope = {
postId = 123456,
authorId = 789,
text = 'Kittens ....',
}
Perhaps I can use ng-init like so:
<div id="post-123456"
ng-controller="CommentCtrl"
ng-init="{ postId =..., authorId =..., text =... }"> <--- look here
<div class="dw-p-hd">
By <span data-dw-u-id="789">Kitty overlord</span>
</div>
<div class="dw-p-bd">
<p>Kittens...</p>
</div>
</div>
But then I'd be sending the data twice: once in ng-init, and once in the HTML. I think I'd rather skip the ng-init attribute somehow.
Anyway do you think this is an okay approach?
Or is it not possible / bad, and I should do something else instead?
Is there any way to avoid including the data twice? (both in the html, and in ng-init)
Seems like will be better to store all this data in json like:
//...
posts: [
{ postId : 123456,
authorId : 789,
text : 'Kittens ....' },
{ postId : 123457,
authorId : 790,
text : 'Puppies....' }
]
//...
and then to populate it with ng-repeat like:
<div ng-repeat="post in posts" id="{{post.postId}}"
ng-controller="CommentCtrl" >
<div class="dw-p-hd">
By <span data-dw-u-id="{{post.authorId}}">Kitty overlord</span>
</div>
<div class="dw-p-bd">
<p>{{post.text}}</p>
</div>
</div>
I have similar issue , may be it will be useful for you: AngularJS - Getting data inserted in dom