javascript - 从复选框向 Codemirror 添加值/从 Codemirror 中删除值

Question

所以我检查规范化以将规范化库添加到 Codemirror 中。

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />

我检查 jQuery，并在规范化后添加 jQuery 源:

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

但是如果我取消选中标准化，我希望它删除标准化链接，如果我再次选中它，我想在 jQuery 之后添加标准化:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />

这就是应该发生的情况，但我添加了标准化，当我取消选中 .norm(normalize) 时，它不会删除，但稍后可以正常工作。我的问题仍然是添加后的第一个初始值。

这是我在检查标准化、然后检查 jQuery、然后取消选中标准化以删除并再次检查标准化之后所做的示例。显示问题:

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />

如何解决这个问题？

$(document).ready(function() {

  $(".norm").on("change", function() {
    if ( $(this).is(":checked") ) {
      editor.replaceRange('<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />\n', { line: editor.lastLine(), ch:0 });
    } else {
      var textArea = editor.getValue();
      var searchText = textArea.search('<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />');
      if (searchText > -1) {
        txt = '';
        var updatedTextArea = textArea.replace('\n<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />',txt);
        editor.setValue(updatedTextArea);
      }
    }
  });

  // Add Normalize to Codemirror
  $(".jq").on("change", function() {
    if ( $(this).is(":checked") ) {
      editor.replaceRange('<script src="http://code.jquery.com/jquery-latest.min.js"><'+'/script>\n', { line: editor.lastLine(), ch:0 });
    } else {
      var textArea = editor.getValue();
      var searchText = textArea.search('<script src="http://code.jquery.com/jquery-latest.min.js"><'+'/script>');
      if (searchText > -1) {
        txt = '';
        var updatedTextArea = textArea.replace('\n<script src="http://code.jquery.com/jquery-latest.min.js"><'+'/script>',txt);
        editor.setValue(updatedTextArea);
      }
    }
  });

  // Add Angular JS to Codemirror
  $(".ang").on("change", function() {
    if ( $(this).is(":checked") ) {
      editor.replaceRange('<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"><'+'/script>\n', { line: editor.lastLine(), ch:0 });
    } else {
      var textArea = editor.getValue();
      var searchText = textArea.search('<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"><'+'/script>');
      if (searchText > -1) {
        txt = '';
        var updatedTextArea = textArea.replace('\n<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"><'+'/script>',txt);
        editor.setValue(updatedTextArea);
      }
    }
  });
});

// Initialize CodeMirror editor
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
  mode: 'text/html',
  tabMode: 'indent',
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  dragDrop : true,
  gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
});

.CodeMirror {
  float: left;
  width: 100%;
}

<link rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css'/>
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src='http://codemirror.net/lib/codemirror.js'></script>
<link rel='stylesheet' href='http://codemirror.net/lib/codemirror.css'>
<link rel='stylesheet' href='http://codemirror.net/addon/fold/foldgutter.css' />
<script src='http://codemirror.net/javascripts/code-completion.js'></script>
<script src='http://codemirror.net/javascripts/css-completion.js'></script>
<script src='http://codemirror.net/javascripts/html-completion.js'></script>
<script src='http://codemirror.net/mode/javascript/javascript.js'></script>
<script src='http://codemirror.net/mode/xml/xml.js'></script>
<script src='http://codemirror.net/mode/css/css.js'></script>
<script src='http://codemirror.net/mode/htmlmixed/htmlmixed.js'></script>
<script src='http://codemirror.net/addon/edit/closetag.js'></script>
<script src='http://codemirror.net/addon/edit/matchbrackets.js'></script>
<script src='http://codemirror.net/addon/selection/active-line.js'></script>
<script src='http://codemirror.net/keymap/extra.js'></script>
<script src='http://codemirror.net/addon/fold/foldcode.js'></script>
<script src='http://codemirror.net/addon/fold/foldgutter.js'></script>
<script src='http://codemirror.net/addon/fold/brace-fold.js'></script>
<script src='http://codemirror.net/addon/fold/xml-fold.js'></script>
<script src='http://codemirror.net/addon/fold/comment-fold.js'></script>

<p>
  <input class="norm" type="checkbox"> Normalize<br>
  <input class="jq" type="checkbox"> Jquery<br>
  <input class="ang" type="checkbox"> Angular JS<br>
</p>

<textarea id='code' name='code'></textarea>

Answer 1

多次调用 setValue 将会用最后一次调用传递的内容替换编辑器的内容。要么构建一个大字符串，然后调用一次 setValue，或者使用 replaceRange添加代码而不替换旧代码。