Search code examples
javascriptjquerycheckboxcodemirror

Adding/removing values into/from Codemirror from a Checkbox

So I check normalize to add normalize library into Codemirror. 

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

I check jQuery and I add the jQuery source after 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>

but if I uncheck normalize, I want it to remove the normalize link, and if I check it again I want to add normalize after 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" />

That's what's suppose to happen but instead I add normalize, and when I uncheck .norm(normalize), it doesn't remove, but works fine later on. My problem remains with the first initial value after it's added.

Here's an example I did after checking normalize, then jQuery, then unchecked normalize to remove and checked normalize again. Showing the problem:

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

How can I fix this problem?

$(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>

Solution

  • Just check again. Your three strings are not identical. There's a '\n' at the end of the first string. You use three times the same string. It makes sense to put it into one var and use that.

    Here's the updated example (the other strings should be handled accordingly).

    $(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>