简体   繁体   中英

How do I take the content of the Ace code editor with a laravel form

as the question says, I want to submit the code from the editor,but I don't know how can I do this using a laravel form. I found that I can use editor.getValue() here but don't know how to use it with laravel. I have the following code


<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">
    //Your code goes here
  </div>
  {{Form::submit('Submit')}}
  <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");
  </script>
{!! Form::close() !!}

You can use the change session event to update a hidden textarea field with contents of the Ace editor (untested code following):

JavaScript:

const $formElement = $('.js-ace-code');

editor.getSession().on('change', function () {
    $formElement.val(editor.getSession().getValue());
});

Add a additional textarea to your desired form in which the Ace editor resides:

<form>
    <textarea name="code" class="js-ace-code" style="display: none;"></textarea>
</form>

There's apparently also a method where you can add a button with a trigger to update the code via an AJAX request.

You can add a hidden input and filled with editor.getValue() in onchange method. something like this:

Javascript

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

HTML

 <input name="hiddenInput" id="hiddenInput">

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM