What is the best way to replicate the content of the textarea exactly as it is (with all line breaks and special characters)?

Below is the Laravel form I have, and I need to extract the text in a way that retains its original format:

<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 need the input text to be preserved as follows:

// Your First C++ Program

#include <iostream>

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

The goal is to transfer it to a .cpp file and execute it without any modifications.

Answer №1

After some troubleshooting, I successfully tackled the issue. Here's what worked for me:

Instead of using editor.getValue(), I switched to editor.getSession.getValue(). This change helped retain the original text format, including new lines. On the other hand, content.value only captured single-line text, prompting the need for an adjustment like this:

editor.getSession().setMode("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());
});

With these modifications, the issue was resolved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some effective ways to slow down the image transitions in a Javascript slideshow?

I am currently developing a slideshow that updates Images, Title, and Description simultaneously based on their Array index. The slideshow is functional BUT, my goal is to achieve a smooth transition to the next/previous Image (... title & descript ...

Issue with Angular modal text boxes failing to populate using ngModel

I am facing an issue with populating data in a modal when a table row is clicked. The table contains TV show data and uses dir-paginate/ng-repeat to display the information. However, when I click on a row to edit the show, the ng-model data does not load i ...

IE Troubles: Timer Function Fails in Asp.Net MVC

I implemented the following code snippet: @Using Ajax.BeginForm("Index", New AjaxOptions() With { _ .UpdateTargetId = "AnswerSN", .HttpMethod = ...

Utilizing ng-class with Boolean values in AngularJS

On my page, I have a pair of buttons that control the visibility of elements using ng-hide and ng-show. <a ng-click="showimage=true" ng-class="{ 'activated': showimage}" class="button">Images</a> <a ng-click="showimage=false" ng-c ...

Is there a special Angular technique to ensure a div remains scrolled to the bottom of its items?

In this interactive demonstration, you can see how jQuery can be utilized to create a terminal-like feature. This functionality ensures that as new items are added to a scrollable div, the scroll automatically locks at the bottom. Pay close attention to l ...

Using React Native, you can easily apply styles to View components by passing them

Is it a bug? Or is the View styles props object supporting inline props as well? For example, in the traditional way and also written in React Native documentation: function App() { return ( <View style={styles.box}></View> ) } const ...

What is the best way to merge setInterval with mouseenter events?

I have successfully implemented code that refreshes a div using ajax. However, I am looking to add functionality so that the div only refreshes every 30 seconds when the tab is active. It seems that setInterval currently refreshes the div regardless of tab ...

Access information through token-based verification

Just starting out in this area of development, a colleague shared some information with me on how to retrieve the database. I'm feeling a bit lost as to what to do next. curl -X GET -H "Authorization: Token token=xxxxxxxxxxxxxxxxxxxxxxxxx" "https://w ...

Converting a class-based component into a functional component

TL;DR : I am in the process of converting my class-based App component to a Functional component but encountering unexpected outcomes with the useEffect Hook. Being relatively new to React, I originally built my movie search app using a class-based approa ...

24-hour countdown tool featuring a visual progress bar

Currently, I am in the process of developing an application aimed at assisting individuals in either forming new habits or breaking old ones. In this application, I am looking to implement a countdown timer that ticks down daily; with the help of this help ...

Using Firebase with Arrays in Javascript

Currently, my team and I are working on a project using Firebase with Vue.js as the framework. We've come across a challenge regarding creating, updating, and deleting elements in a Firebase cloud document. For instance, within our 'people&apos ...

Creating regex to detect the presence of Donorbox EmbedForm in a web page

I am working on creating a Regex rule to validate if a value matches a Donorbox Embed Form. This validation is important to confirm that the user input codes are indeed from Donorbox. Here is an example of a Donorbox EmbedForm: <script src="https: ...

Tips for choosing a dynamically generated ajax element

Question for you: I have a snippet of HTML code that looks like this: <li class='entry'> <div class='entryContent'> <p class='entryText'>Entry text></p> <a href="#" c ...

Top approach for inserting Class instance into a group

I need some guidance on how to approach this issue. I am interested in creating a set of objects similar to the example below: Person P = new Person(); P.Name = 'John'; P.Surname = 'Dough'; var People = []; People.push(P); Can this b ...

The Runtime Error encountered in NEXTJS: TypeError - Unable to iterate over 'games' as it is not

Attempting to create my inaugural website that showcases data from an API sans a tutorial. Does it seem like I may have overlooked something? I've successfully fetched the API and confirmed in the console log that the necessary data is present. Howev ...

Using JavaScript/jQuery to tally characters

Here is the code snippet that I am currently working with: PHP <input style="color:red;font-size:12pt;font-style:italic;" readonly="" type="text" name="q22length" size="3" maxlength="3" value="50"/> <textarea onkeydown="textCounter(doc ...

Node.js is having trouble locating a module that has been installed

Upon transferring my node.js application to a different PC (where it functioned flawlessly on the development machine) and manually installing all the necessary dependencies, I encountered an error when attempting to run it: C:\Users\myself>n ...

Showcasing the items in a Vuejs & Laravel purchase order

I'm working on a Laravel application integrated with Vue.js and have two tables: 1-Orders and 2-Order_products. My goal is to display the products for each order in a popup window. Below is the relevant code, any help would be appreciated: Controller ...

AngularJS controller encounters a scoping problem within a callback function

I have created an angular application with a simple login form that can be viewed on this JSFiddle. HTML Code: <form data-ng-app="jsApDemo" data-ng-controller="loginCtrl"> <label for="username">Username:</label> <input type=" ...

Ways to extract pertinent information from a PHP API

I've been attempting to add parameters to my query, but I keep getting inconsistent results. Despite trying different methods, I haven't been successful. Take a look at the code below. First, here is my code that functions properly without using ...