如何用 laravel 表单取 Ace 代码编辑器的内容答案

【问题标题】：How do I take the content of the Ace code editor with a laravel form如何用 laravel 表单取 Ace 代码编辑器的内容
【发布时间】：2020-05-29 23:45:35
【问题描述】：

正如问题所说，我想从编辑器提交代码，但我不知道如何使用 laravel 表单来做到这一点。我发现我可以使用 editor.getValue() here 但不知道如何将它与 laravel 一起使用。我有以下代码


<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() !!}

【问题讨论】：

标签： javascript laravel

【解决方案1】：

您可以在 onchange 方法中添加一个隐藏的输入并填充editor.getValue()。像这样：

Javascript

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

HTML

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

【讨论】：

谢谢，这行得通，但它安全吗？我要求像{{Form::textarea}} 或类似的方法，但如果它是安全的就可以了。
是的，是安全的。如果你想要stackoverflow.com/questions/39314789/…greatings，你可以使用这种类型的声明

【解决方案2】：

您可以使用 change 会话事件来使用 Ace 编辑器的内容更新隐藏的 textarea 字段（下面是未经测试的代码）：

JavaScript：

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

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

在 Ace 编辑器所在的所需表单中添加额外的文本区域：

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

显然还有一种方法可以add a button with a trigger 通过 AJAX 请求更新代码。

【讨论】：