Das Speichern neuer Zeilen und Leerzeichen im Textbereich funktioniert nicht.

Question

Ich verwende den Textbereich zur Eingabe von Text und im Formular submit, der in der Ansicht angezeigte Text behält keine Zeilenumbrüche und Leerzeichen bei.

Textbereich:

<textarea type="text" id="topicDetails"></textarea> 

Versuchte Text ersetzen mit dem folgenden:

postTopic(){ 
    var content = document.getElementById('topicDetails').value; 
//   textcontent = content.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ "" +'$2'); 
//   textcontent = content.replace("\r\n", "\\r\\n"); 
//   textcontent = content.replace(/\r?\n/g, '<br />'); 
//   textcontent = content.replace(/\r?\n/g, '&#13'); 
//   var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>'; 
//   textcontent = (content + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2'); 
    textcontent = content.replace(/\n/g,"<br>") 

    var topic = { 
     "topicId" : new Date().getTime(), 
     "title": document.getElementById('title').value, 
     "details": textcontent, 
     "username": DataMixin.data.username, 
     "userImage": "assets/img/Logos Divine Light/6.png", 
     "dayPosted": new Date().toLocaleString() 
    } 

    console.log('posting blog..... ', topic); 
    self.data.blogTopicsArr.push(topic); 

    $.ajax({ 
     url: "/new_topic", 
     type: "POST", 
     data: JSON.stringify(self.data.blogTopicsArr), 
     contentType: "application/json", 
     success: function (res) { 
      console.log('res is ', res); 
      if (res == 'Authentication failed'){ 
       self.data.blogTopicsArr.splice(- 1, 1); 
       self.update(self.data.blogTopicsArr); 
       riot.route("signup_popup"); 
      } else if (res == 'saved'){ 
       console.log('blog posted successfully: ', self.data.blogTopicsArr); 
       document.getElementById('title').value = ''; 
       document.getElementById('topicDetails').value = ''; 
       self.update(); 
      } else if (typeof res.redirect == 'string'){ 
       console.log('res.redirect ', res.redirect); 
       riot.route(res.redirect) 
      } 
     }, 
     error: function (err) { 
     console.log('err>>>>', err); 
     } 
    }); 
    $('#myModal').modal('hide'); 
} 

Versuchen drei verschiedene Möglichkeiten, ohne Glück. Der dritte Ansatz gibt die Ausgabe mit <br /> Tags. Wie konserviere ich neue Linien?

Ausgang ist:

Lorem Ipsum is simply dummy text.<br /> Industry's standard text ever since the 1500s, <br /><br />Why do we use it?<br />It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. <br /><br /> 

Update:

Nach erfolgreicher Form Post, ich bin die Aktualisierung der Ansicht Riot mit self.update(); oder this.update()

Update2

Eigentlich I bin sendi Die Formulardaten an die Datenbank senden und den Text aus der Datenbank abrufen, um ihn zu rendern. Aber der Text an die DB gesendet hat <br> Tag eingefügt, bevor Sie es in der DB speichern, warum zeigt es Text als Lorem Ipsum is simply dummy text.<br /> Industry's standard text ever since the 1500s, <br /> ??

Answer 1

Sie könnten einfach damit umgehen, wenn Sie das Formular auf der Serverseite bearbeiten. Zum Beispiel, wenn Ihr Formular Aktion „companyForm.php“ dann in Ihrem companyForm.php gesetzt könnten Sie eine Funktion wie nl2br verwenden, wie zum Beispiel:

$companyName = nl2br($_POST['companyName']); 

http://php.net/manual/en/function.nl2br.php

Wenn Sie aus irgendeinem Grunde absolut

function nl2br (str, is_xhtml) { 

    if (typeof str === 'undefined' || str === null) { 
     return '' 
    } 

    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>'; 
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2'); 
} 

Dann nutzen:

nl2br(textcontent, false) 

tun dies auf der Clientseite müssen Sie nl2br on php.js durch Zugabe dieses verwenden könnte

Answer 2

Sie wollen


 als \ r und


 als \ n

Stecken Sie diese Werte in die Ersetzen-Funktion verwenden, und es sollte funktionieren.

More info:

Answer 3

können Sie ersetzen Sie einfach die Zeilenumbrüche mit <br> mit diesem .replace(/\n/g,"<br>")

function postTopic() { 
    var content = document.getElementById('topicDetails').value; 

    var textcontent = content.replace(/\n/g,"<br>"); 

    var topic = { 
    "details": textcontent, 
    } 
} 

Answer 4

Eigentlich alles, was ich hatte zu pre-wrap wie unten war hinzuzufügen.

<p style="white-space: pre-wrap;">{data.post_details.details}</p> 

Dies behielt den Abstand auch mit neuen Zeilen.