如何编辑使用CodeMirror插件的textarea?

时间:2016-03-01 10:36:20

标签: javascript jquery html codemirror

我在textarea中有一个格式化/美化的文本(使用CodeMirror格式化)。现在我无法编辑textarea。

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

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

以下是我使用codemirror将上面的textarea内容转换为格式化的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
            });

1 个答案:

答案 0 :(得分:0)

确保您的设置中没有readOnly: true

&#13;
&#13;
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
  });
};
&#13;
<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>
&#13;
&#13;
&#13;