多个Ace编辑器内容仅返回一行

Question

我在单个页面上实现了两个ACE编辑器。第一编辑：

$('#custom_css').val(custom_css_editor.getSession().getValue());

返回我输入的所有代码，但不幸的是另一个编辑器：

$('#custom_script').val(custom_js_editor.getSession().getValue());

仅返回一行。您认为这种故障​​的原因是什么？

这就是我要显示的内容：

这是我的密码：

var custom_css_editor = ace.edit("custom_css_editor", {
  theme: "ace/theme/twilight",
  mode: "ace/mode/css",
  maxLines: 10
});
var custom_js_editor = ace.edit("custom_js_editor", {
  theme: "ace/theme/twilight",
  mode: "ace/mode/javascript",
  maxLines: 10
});

document.querySelector('#custom_css_editor .ace_text-input')
  .setAttribute('name', 'custom_css');
document.querySelector('#custom_css_editor .ace_text-input')
  .setAttribute('id', 'custom_css');
document.querySelector('#custom_js_editor .ace_text-input')
  .setAttribute('name', 'custom_script');
document.querySelector('#custom_js_editor .ace_text-input')
  .setAttribute('id', 'custom_script');
  
custom_css_editor.session.on('change', function() {
  $('#custom_css').val(custom_css_editor.getValue());
});
$('#custom_css').val(custom_css_editor.session.getValue());
custom_js_editor.getSession().on('change', function() {
  $('#custom_script').val(custom_js_editor.getValue());
});
$('#custom_script').val(custom_js_editor.session.getValue());

<div class="form-group">
  <label class="lbl-input" for="custom_css">Custom CSS</label>
  <div id="custom_css_editor"></div>
</div>
<div class="form-group">
  <label class="lbl-input" for="custom_script">Custom Scripts</label>
  <div id="custom_js_editor"></div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.4/ace.js"></script>

Answer 1

发生这种情况是因为您正在修改textarea .ace_text-input的值。在编辑器中更改dom通常会破坏它。

Answer 2

好的，我必须添加 gradle assembleDebug 和<input type="hidden" id="custom_css" value="" />来呈现CSS和JS编辑器的全部内容，神奇的是它起作用了！