Adding/removing 值 into/from 来自复选框的代码镜像

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>

但是如果我取消选中规范化，我希望它删除规范化 link，如果我再次选中它我想在 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 添加代码而不替换旧代码。

Answer 2

再检查一下。你的三个字符串不相同。第一个字符串末尾有一个 '\n'。您使用相同的字符串三次。将它放入一个 var 中并使用它是有意义的。

这是更新后的示例（其他字符串应相应处理）。

$(document).ready(function() {

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

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

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

Adding/removing 值 into/from 来自复选框的代码镜像

Adding/removing values into/from Codemirror from a Checkbox

javascript

checkbox

jquery

codemirror