How to copy the value of the textarea as it is (with \n and all this stuff)?

Question

I have the following laravel form and I want to copy the text from the code editor as it were wrote:

<style type="text/css" media="screen">
    #editor {
        position: absolute;
        top: 150px;
        right: 150px;
        bottom: 150px;
        left: 150px;
    }
  .ace_editor {
        border: 1px solid lightgray;
        margin: auto;
        height: 65%;
        width: 55%;
    }
    .scrollmargin {
        height: 80px;
    text-align: center;
    }
</style>

{!! Form::open(['action' => 'ProblemsController@store']) !!}
  <div id="editor"></div>
  <input type="textarea" name="codeSrc" id="codeSrc" style="display: none;">
  {{Form::submit('Submit')}}
{!! Form::close() !!}

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/chrome");
    editor.session.setMode("ace/mode/c_cpp");
    //here I am taking the text from the hidden textarea
    editor.session.on('change', function(delta) {
      var content=document.getElementById('hiddenInput');
      content.value=editor.getValue();
    });
</script>

I want to take the text input as it is, like that:

// Your First C++ Program

#include <iostream>

int main() {
    std::cout << "Hello World!";
    return 0;
}

Not in a single line like that, the \n is just ignored // Your First C++ Program#include int main() {std::cout << "Hello World!";return 0;} Even the <iostream> got disappeared because it is interpreted as an html tag. The point of this is to transfer it to an .cpp file and execute it, so I want it as it is, not modified.

Wait... how is the C++ you've included related to the problem? — FZs, Jun 02 '20 at 10:49
? How it isn't? It is an example where I show that I want to copy the text like it was wrote between ```those stuff```, not all of it in a single line. When I sav, the next lines (\n) are just ignored. I also edited the question — Alex UnLimited, Jun 02 '20 at 10:51
I understand. In that case, you could better use some dummy text like "Lorem ipsum etc.etc.", because the C++ text gives the impression that this source code is part of your application. — www.admiraalit.nl, Jun 02 '20 at 11:32
Does this answer your question? [Preserve line breaks in textarea](https://stackoverflow.com/questions/30593103/preserve-line-breaks-in-textarea) — www.admiraalit.nl, Jun 02 '20 at 11:38
What “textarea” are you even talking about? `` does not exist in HTML. Unless this is something Laravel is supposed to automatically transform into an actual `textarea` _element_ somehow (doubt it), you are probably loosing your line breaks by using the wrong type of element to begin with (browsers will treat this as `type="text"`) — CBroe, Jun 02 '20 at 11:38
Did you try to find a similar question here on stackoverflow? This is an important step to take before you post a question. Please search for 'preserve line breaks in textarea' and see if that gives a solution for your problem. — www.admiraalit.nl, Jun 02 '20 at 11:39
@CBroe Please do not use comments to post an answer. Answers should be posted as answers, not as comments. — www.admiraalit.nl, Jun 02 '20 at 11:44
@www.admiraalit.nl I usually comment first, until I _know_ that something is definitively the answer to the question. So far, I think this is still more in the clarification phase. — CBroe, Jun 02 '20 at 11:46
@CBroe I changed from text to text area but is the same thing — Alex UnLimited, Jun 02 '20 at 11:52
@www.admiraalit.nl I tried your solution too but it doesn't work for me — Alex UnLimited, Jun 02 '20 at 11:53
So where do things actually start to go wrong? What have your debugging attempts regarding this resulted in so far? Did you start with a simply console.log of the value you are reading with `editor.getValue`, to verify that even still contains what you think it should? What are the further processing steps after this? — CBroe, Jun 02 '20 at 12:27
@CBroe So I did this: changed the input type to text, add the input type a class in css with ```white-space: pre-line;```, after that the text were passed to my controller and saved as JSON. I saved the JSON text to a string like that ```$codeSrc = $request['codeSrc]``` and then saved the string into a new .txt file with this laravel function ```File::put('path\textt.txt', $codeSrc);``` . The text is saved but in a single line — Alex UnLimited, Jun 02 '20 at 12:53
Simple text fields are not made to transport values with line breaks, and any formatting using `white-space` or similar affects _display_ only to begin with. Use a _proper_ hidden field, or an actual textarea. Also, why no feedback on the absolutely _basic_ debugging steps I asked you to perform? Have you, or have you not, _verified_ that the value you are trying to stuff into the field, contains the data including line breaks as you expected it to? — CBroe, Jun 02 '20 at 13:06
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/215173/discussion-between-alex-unlimited-and-cbroe). — Alex UnLimited, Jun 02 '20 at 13:25

score 0 · Accepted Answer · answered Jun 03 '20 at 09:59

I managed to solve the problem. So:

The editor.getValue() should be replaced with editor.getSession.getValue() and it will return the text as it was write (with new lines). The content.value on the other hand it will return the single line text, so we need to change from this:

editor.session.on('change', function(delta) {
   var content=document.getElementById('hiddenInput');
   content.value=editor.getValue();
});

to this:

editor.session.setNewLineMode("auto");
editor.getSession().on("change", function () {
   document.getElementById('codeSrc').value = 
   editor.getSession().getValue().replace(/\r\n|\n|\r/g, '<br/>');
   console.log(editor.getSession().getValue());
});

That's all.

How to copy the value of the textarea as it is (with \n and all this stuff)?

1 Answers1