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

Unable to retrieve HTTP call response during debugging, although it is visible in the browser

When I send an HTTP request to create a record, I am able to see the added record id in the Network section of browsers like Chrome and Firefox. However, when I try to debug the code and retrieve the same id value, I encounter difficulties. I have tried us ...

JavaScript WYSIWYG Algorithm

Despite my searches on SO, it appears that most questions revolve around simply making a div editable using contenteditable="true". I am interested in finding the most effective method for tracking all formatting tags applied to a document. Merely togglin ...

The binding in Knockoutjs is working properly, but for some reason the href attribute in the anchor tag is not redirecting to

Here is the HTML code snippet I am working with: <ul class="nav nav-tabs ilia-cat-nav" data-toggle="dropdown" data-bind="foreach : Items" style="margin-top:-30px"> <li role="presentation" data-bind="attr : {'data-id' : ID , 'da ...

Enable the ability for anchor links to be clickable when the CSS media print format is used to generate

To illustrate: <a href="https://www.google.com">Google anchor link</a> on the website, it displays as: Google anchor link When printed, it shows as: Google anchor link(https://www.google.com) To address this issue, I included in the CSS: ...

Struggling to pass command line arguments to index.ts with yarn?

My objective is to pass arguments through the command line using yarn start to index.ts. "scripts": { "start": "tsc-watch --onSuccess \"ts-node --pretty -r tsconfig-paths/register' src/index.ts\"", } When I attempt something like: yarn ...

Restrict dropping items in HTML5 by only allowing the drop if the target div is

I am working on developing a user-friendly visual interface for creating simple graphics. The interface includes 10 image icons and 5 boxes where users can place these icons. Users have the freedom to select which icon they want to display and arrange them ...

Mapping an array of Type T in Typescript using typings

Suppose we have a type T: type T = { type: string, } and we create a function that takes an array of T and returns an object where the keys are the values of each T.type and the values are objects of type T. const toMap = (...args: T[]) => args.red ...

Decoding a barcode using JavaScript

Currently, I am facing an issue with my barcode gun scanner. It reads barcodes into input fields but returns each digit separately instead of as a whole string. This has been quite bothersome for me. For instance, when I scan the barcode of a bottle of wa ...

The issue of double submission persists, with the prevention of the default action

I'm in need of assistance. Within my form, I have two buttons displayed on the page: "Save" and "Publish". Below is the corresponding HTML code: <button type="submit" class="button">Save</button> <button type="button" class="button" n ...

What is the process for extracting the time value from a jQuery timepicker?

I have been attempting to retrieve values from my time picker when a selection is made, but I am not seeing any values returned nor displayed in my HTML timepicker input field. Despite trying various methods, none have proven successful thus far. Method ...

Integration of PHP and MySQL with PayPal can be challenging, especially when the PayPal button fails to function unless the amount is

When I initially set the amount value, clicking the "Pay with PayPal" button does not trigger any action. However, if I manually adjust the amount, the PayPal button starts functioning properly. This is how the input field appears: <input name="am ...

An error in ElasticSearch 6.2 is causing the aggs to return an unknown_named_object_exception

$params2 = [ 'index' => 'index', 'type' => "items", 'body' => [ 'aggs' => [ "types" => [ "filter" => [ ...

Perform an update followed by a removal操作

I've been facing a persistent issue that has been troubling me for quite some time now. The setup involves a database in MariaDB (using WAMP) and an API in ExpressJS. Within the database, there are two tables: "menu" and "item," with a foreign key rel ...

Utilizing Vuex Store in Blade Template | Laravel and Vue.js

I'm trying to figure out how to access a method or variable that is defined in the Vuex 4 store within my Blade file. Currently, I am utilizing a compiled app.js from Vite. While I can easily access the store in Vue.js components, I am curious if it&a ...

Utilize different versions of jQuery along with various plugins

I have integrated the AdminLTE Template into my project, which requires jQuery Version 3.X. Additionally, I am using the Flotchart jQuery library, which specifically needs jQuery Version 1.11.3. To handle this conflict, I have implemented the $.noConflic ...

Tips for implementing an automatic refresh functionality in Angular

I am dealing with 3 files: model.ts, modal.html, and modal.ts. I want the auto refresh feature to only happen when the modal is open and stop when it is closed. The modal displays continuous information. modal.htlm : <button class="btn btn-success ...

Is it possible to save an entire webpage that infinitely scrolls without actually manually scrolling through it?

I'm dealing with a webpage that has infinite downward scrolling. I tried automating the scrolling, but eventually the page became too large to continue scrolling. To fix this, I manually removed some DIV blocks from the source code which decreased the ...

Implementing Enter key functionality to add items to a Todo list using pure DOM manipulation

var listLis=document.getElementById('list'); const addbutton=document.querySelector('.fa-plus') const inputBar=document.querySelector('.show') function showInput(e){ inputBar.classList.toggle('show') } addbutt ...

Challenges arise when trying to coordinate scrolling movements between a canvas element and the remaining content on the webpage

I'm currently stuck on a project involving a Three.js canvas with OrbitControls for interactive 3D visualization. The main issue I'm facing is the lack of synchronization between scrolling within the canvas and the rest of the page content. Whil ...

Utilize the v-for second argument in VueJS 2 to showcase the index and index+1

For a VueJS 2 project, I am tasked with enhancing the display of the first and second elements in an array by making them stand out from the rest. To achieve this, I am utilizing the v-for syntax to iterate over a child component within a parent component. ...