The line break doesn't work in the firestore - javascript

I use vue 3 and firestore.
When I was writing, Even though I pressed the enter key to break the line, it only works to write space.
in firestore
This is my code.
<div class="form-group">
<textarea class="form-control" cols="30" rows="10" v-model="content" required></textarea>
</div>
await db.collection('forms').add(
{
title: title.value, content: content.value, createdAt, updatedAt, uid, name, views
}
)
How can I use line break?

I just added style="white-space:pre-line" and it works!

Line breaks in Firestore are preserved as written, the issue is that the rendering mechanics inside Firestore are styled to ignore line breaks to preserve the structure of Firestore documents.
you can see this if you download the document snapshot and render the text inside a text area box, for a website, you may have to replace the newlines with a web safe alternative such as <br />

Related

Limit line breaks in textarea

I have a text area, where i want to allow users to make line break by pressing enter, but i want to limit that to only one break, because then the users could add as many breaks they want, creating huge white space in the output.
<textarea maxLength={3000} onChange={(e) => setPersonBio(e.target.value)} value={personBio} type="text" rows="5" className="bio-content" placeholder="Enter something about yourself..."></textarea>
And then i display it in <p> tag with white-space: pre-line;
My question is how to limit the amount of breaks user can enter, or delete the additional ones after submitting.
You can use the String methods search and include inside a while loop to remove all but one of a given repeated character.
text = "abc\n\n\ndef\n\nghi";
document.write('<textarea rows=6>'+text+'</textarea>');
while (text.includes("\n\n"))
text = text.replace("\n\n","\n");
document.write('<textarea rows=6>'+text+'</textarea>');
You could try this:
<textarea maxLength={3000} onChange=textAreaChange(e) value={personBio} type="text" rows="5" className="bio-content" placeholder="Enter something about yourself..."></textarea>
var pre="";
function textAreaChange(e){
if(e.target.value.split("\n").length>1){
e.target.value=pre;
return;
};
setPersonBio(e.target.value);
pre=e.target.value;
};
Add the javascript to where you keep all your other javascript for this site.

add new line in textarea not working in my CI project [duplicate]

How do I save user-entered line breaks from a <textarea> HTML element to a database?
It always removes the line breaks.
TextArea HTML element is preserving the white space in the database.
The problem appears when trying to display the \n on the web browser, which will fail.
To display \n in the web browser use :
<p style="white-space: pre-line">multi-line text</p>
When displaying the content you need to convert line breaks into <br /> tags, otherwise the web browser won't display them. This is probably why you think they aren't being saved. If you're using PHP, use the nl2br() function to do this. In other languages you could do a string replace, replacing all occurrences of "\n" with "<br />".
Just put the output text between <pre></pre> tags, that will preserve the line breaks.
I just learnt to use php's nl2br function and it is working fine for me.
I'm using it to style how my users receive an email when sent from another user.
Your problem will be solved using 'white-space' property: simply use:
<textarea name="description" id="description" style="white-space: pre-wrap;"></textarea>
And continue your work.
I know from experience that Browser text areas are less well-behaved than one would like, especially with regard to line breaks.
You could can to see if javascript would be able to interrogate the text area and find the line breaks before the text is sent to the server and so send the data in a more well-formatted way. But the amount of javascript debugging necessary to make this work across multiple browsers is probably not worth the effort.
Perhaps you should say that format you are trying to capture your data. There may be a better way to get the data than keeping track of line-breaks - though lines breaks can seem like any easy thing to capture in user input.
I noticed that breakable content saved normally if textarea is inside a html form. But if I use textarea without any form and try to edit a long text in it, insert line breaks and save content via ajax, it's saved as a merged text into database
Use PHP nl2br() Function while saving data from textarea to database
like below
<textarea
name="PostContent"
class="form-control"
rows="12" cols="30"
id="PostContent"
required=""
style="white-space: pre-wrap; text-indent: 50px;"
>
</textarea>
$PostContent=$_POST["PostContent"];
$output =nl2br($PostContent);
use $output variable to save to Database
you can add text in the text area and see the formatted text below.
function ex() {
const text = document.getElementById("description").value;
const ss = document.getElementById("add");
ss.textContent = text;
}
<textarea name="description" id="description" style="white-space: pre-wrap;"></textarea>
</br>
<button onclick="ex();">check</button>
</br>
<p style="white-space: pre-line" id="add"></p>
<style>
p {
color: red;
text-align: center;
}
</style>

vue.js binding value from dynamically generated input

I have the below code for generating comments (cutted down for simplicity sake):
<div v-for="(g, gi) in submission.goals" :key="gi">
<div>
<p >Goal #{{gi+1}}</p>
<div>{{g.text}}</div>
</div>
<div>
<p>Comments:</p>
<div><span class="uk-text-small uk-text-muted"><i>no comments</i></span></div>
<hr>
<div>
<textarea class="comment-input" placeholder="type your comment here"></textarea>
</div>
</div>
</div>
and my method look like this:
submitComment(gid,uid,phase,e)
{
e.preventDefault();
//var comment -> get the value of the closes textaraea here
console.log(gid, uid, phase, comment);
//here I will make the ajax call to the API
}
As you can see the whole thing is generated in a v-for loop generating divs according to the size of the submission.goals array returned by the API.
My question is how can I get the value from the textarea input closest to the anchor that is calling the submit function.
Obviously I can't have a separate data object for each comment area since I do not have a control over the size of submission.goals array. And if I use v-model="comment" on each input, whatever user types in will be automatically propagated to each and every textarea.
I know how to handle this with jQuery, but with Vue.js I am still in the early learning stages.
If you mark the text area as a ref, you could have a list of textarea elements. With the index number of the v-for items (gi in your case), you can get the [gi] element of the refs list and submit its value.
<textarea ref="comment" class="comment-input" placeholder="type your comment here"></textarea>
submitComment(gid,uid,phase,e, gi)
{
e.preventDefault();
var comment = this.$refs.comment[gi].value;
console.log(gid, uid, phase, comment);
//here I will make the ajax call to the API
}
Try change submission.goals to computed submissionGoals and create this computed with the code above:
submissionGoals(){
return this.submission.goals.map(goal => ({...goal, comment: ''}));
}
Use v-model="g.comment" on textarea.
Now change submitComment(g.id, g.user_id, g.phase, $event) to submitComment(g, $event) like Alexander Yakushev sayed.

angularjs: How to get text exactly same as in enter in text area, including new line?

In angularjs, how to get the exact text as entered into html textarea, I want to also track newlines, '\n' (in the textarea). I want to store this textarea into database exactly the same as entered into textarea. But it is taking all text into one line.
How do I detect that new line is inserted into html-area?
Please see the demo
I can use <pre> {{someText}}</pre>, but this will not solve my problem, Because I want to store into database.
<div class="col-md-12">
<div class="col-md-6">
<label >Location Based Address </label>
<textarea rows="4" cols="25" class="form-control" ng-model="someText">
</textarea>
</div>
</div>
I belive that the model does save newlines and such, see this small edit on your plunkr, using a <pre> tag to display the data.
Also, when I save data to my SharePoint list, in a 'rich text' field, it saves newlines. I think your problem is that the server doesn't preserve the new lines.
Please check i have edited your plunker code. Check updated code
angular.module('app', ['ngSanitize'])
.controller('SomeController', function($scope,$sce) {
console.log($scope.someText);
$scope.$watch('someText', function(){
console.log($scope.someText);
$scope.text = $scope.someText;
$scope.text = $scope.text.replace(/\n\r?/g, '<br />');
$sce.trustAsHtml($scope.text)
})
})
Hope this will help you.
You could replace spaces with \n and store it that way, but I'm not sure how 'strong' this solution will be.
Value from the textarea is passed as is to someText via ng-model="someText". You don't need to do anything with the text as you can see in console.
If you want to print the value somewhere on your page while keeping new lines as the user entered them use <pre> tag:
<pre>{{ someText }}</pre>
Well i'm not really sure of what is happening but i'll try a wild guess of all things that can happens :
When using textarea, \n characters are stored in the value of the ng-model.
If you want to display them either use <pre> or replace all \n by and use ng-bind-html (https://docs.angularjs.org/#!/api/ng/directive/ngBindHtml)
If you want to send them to the server through json you may have to escape \n to \n same when sending data from the server to the client. Or it will be the underlying layers off your framework that will do it.
Make sure you're working with UTF-8 server-side/database or you may have problems with \r\n and \n.

EpicEditor text showing as instead of space

Not sure if this is an actual problem per se but I'm using Epic Editor to input and save markdown in my GAE application (webpy with mako as the templating engine).
I've got a hidden input element in the form which gets populated by the EpicEditor's content when I submit the form but all the white spaces are replaced by . Is this an intended feature? If I check the same code on the EpicEditor site, it clearly returns spaces instead of so what's different about mine?
<form>
<!-- form elements -->
<input id="content" name="content" type="hidden" value></input>
<div id="epiceditor"></div>
<button type="submit" name="submit" id="submit">submit</button>
</form>
<script type="text/javascript">
$('button#submit').click(function(){
var content = editor.getElement('editor').body.innerHTML; //all the spaces are returned as and breaks are <br>
$('input#content').html(content);
});
</script>
NOTE: I want to save my content as markdown in a TextProperty field my data store and generate the html tags when I retrieve it using marked.js
I'm the creator of EpicEditor. You shouldn't be getting the innerHTML. EpicEditor does nothing to the innerHTML as you write. The text and code you are seeing will be different between all the browsers and it's how contenteditable fields work. For example, some browsers insert UTF-8 characters for spaces some &nbsp.
EpicEditor gives you methods to normalize the text tho. You shouldn't ever be trying to parse the text manually.
$('button#submit').click(function(){
var content = editor.exportFile();
$('input#content').html(content);
});
More details on exportFile: http://epiceditor.com/#exportfilefilenametype
P.S. You don't need to do input#content. Thats the same as just #content :)
You can do this if you dont find out why:
<script type="text/javascript">
$('button#submit').click(function(){
var content = editor.getElement('editor').body.innerHTML;
content = content.replace(" ", " ");
$('input#content').html(content);
});
</script>
[EDIT: solved]
I shouldn't be using innerHTML, but innerText instead.
I figured out that Epic Editor uses on all spaces proceeding the first one. This is a feature, presumably.
However that wasn't the problem. ALL the spaces were being converted to , eventually, I realised it occurs when Epic Editor loads the autosaved content from localStorage.
I'm now loading content from my backend every time instead of autosaving. Not optimal, but solves it.

Categories

Resources