如何编辑使用 CodeMirror 插件的文本区域

How to edit the textarea that uses CodeMirror plugins?

本文关键字：插件 CodeMirror 文本 区域 何编辑 编辑      更新时间：2023-09-26

我在文本区域中有一个格式化/美化的文本（使用CodeMirror格式化）。现在我无法编辑文本区域。

编辑：这是我使用的 html 部分

<div class="form-group ">
   <textarea id="alertTemplate" class="form-control" placeholder="Condition " rows="5" id="comment"></textarea>
</div>

这是我用来使用codemirror将上面的文本区域内容转换为格式化的javascript的代码

var editor;
var test = js_beautify(data.condition.script);
    $('#alertTemplate').empty();
    $('#alertTemplate').val(test);
    editor = CodeMirror.fromTextArea(document.getElementById("alertTemplate"),{
                lineNumbers: true,
                theme: "default",
                mode: "javascript",
                readOnly: false
            });

确保设置中没有readOnly: true。 

window.onload = function () {
  var readOnlyCodeMirror = CodeMirror.fromTextArea(document.getElementById('codesnippet_readonly'), {
    mode: "javascript",
    theme: "default",
    lineNumbers: true,
    readOnly: true
  });  
  var editableCodeMirror = CodeMirror.fromTextArea(document.getElementById('codesnippet_editable'), {
    mode: "javascript",
    theme: "default",
    lineNumbers: true
  });
};
<h1>Using CodeMirror (readonly and editable code)</h1>
<p><a href="http://codemirror.net/mode/javascript/index.html">http://codemirror.net/mode/javascript/index.html</a></p>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/edit/continuecomment.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<h2>Readonly</h2>        
<div>
  <textarea rows="4" cols="50" id="codesnippet_readonly" name="codesnippet_readonly">
    // Demo code (the actual new parser character stream implementation)
  var readOnlyCodeMirror = CodeMirror.fromTextArea(document.getElementById('codesnippet_readonly'), {
    mode: "javascript",
    theme: "default",
    lineNumbers: true,
    readOnly: true // This make the textarea readonly
  });
  </textarea>
</div>
<div>
  <h2>Editable</h2>
  <textarea rows="4" cols="50" name="codesnippet_editable" id="codesnippet_editable">
    // Demo code (the actual new parser character stream implementation)
  var editableCodeMirror = CodeMirror.fromTextArea(document.getElementById('codesnippet_editable'), {
    mode: "javascript",
    theme: "default",
    lineNumbers: true
  });
  </textarea>
</div>

相关文章：