在Checkbox中向/从Codemirror添加/删除值

时间：2015-07-28 08:15:26

标签： javascript jquery checkbox codemirror

所以我检查normalize以将规范化库添加到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>

但如果我取消选中normalize，我希望它删除normalize链接，如果我再次检查它，我想在jQuery之后添加normalize：

<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，然后取消选中normalize以删除并再次检查normalize。显示问题：

<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" />

如何解决此问题？

＆＃13;
＆＃13; 
$(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']
});
＆＃13; 
.CodeMirror {
  float: left;
  width: 100%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

多次调用setValue将用最后一次调用通过的内容替换编辑器的内容。建立一个大字符串，然后调用setValue一次，或使用replaceRange添加代码而不替换旧代码。

答案 1 :(得分：1)

再次检查。你的三个字符串不一样。有一个＆＃39; \ n＆＃39;在第一个字符串的末尾。你使用相同字符串的三倍。将它放入一个var并使用它是有意义的。

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

＆＃13;
＆＃13; 
$(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']
});
＆＃13; 
.CodeMirror {
  float: left;
  width: 100%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题