如何按原样复制 textarea 的值（使用 \n 和所有这些东西）？

Posted 2023-05-07

【中文标题】如何按原样复制 textarea 的值（使用 \\n 和所有这些东西）？

【英文标题】：How to copy the value of the textarea as it is (with \n and all this stuff)?如何按原样复制 textarea 的值（使用 \n 和所有这些东西）？

【发布时间】：2020-09-20 19:38:13

【问题描述】：

我有以下 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"></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>

我想按原样输入文本，就像这样：

// Your First C++ Program

#include <iostream>

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

不是在这样的单行中，\n 只是被忽略 // Your First C++ Program#include int main() std::cout << "Hello World!";return 0; 甚至 <iostream> 也消失了，因为它被解释为 html 标记。这样做的目的是将它传输到一个 .cpp 文件并执行它，所以我希望它保持原样，而不是修改。

【问题讨论】：

等等...您包含的 C++ 与该问题有何关系？

?怎么不是？这是一个示例，我表明我想复制在those stuff 之间写入的文本，而不是全部在一行中。当我保存时，下一行 (\n) 将被忽略。我还编辑了问题

我明白了。在这种情况下，您最好使用一些虚拟文本，例如“Lorem ipsum etc.etc.”，因为 C++ 文本给人的印象是该源代码是您的应用程序的一部分。

这能回答你的问题吗？ Preserve line breaks in textarea

你在说什么“textarea”？ <input type="textarea"> 在 HTML 中不存在。除非这是 Laravel 应该以某种方式自动转换为实际的 textarea element 的东西（怀疑），否则您可能会通过使用错误类型的元素来丢失换行符（浏览器会将此视为type="text")

【参考方案1】：

我设法解决了这个问题。所以：

editor.getValue() 应替换为editor.getSession.getValue()，它将返回写入时的文本（带有新行）。另一方面，content.value 将返回单行文本，因此我们需要对此进行更改：

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

到这里：

editor.session.setNewLineMode("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());
);

就是这样。