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.