在复选框中向/从Codemirror添加/删除值 [英] Adding/Removing Values into/from Codemirror from a Checkbox

查看：765
本文介绍了在复选框中向/从Codemirror添加/删除值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

 < link rel =stylesheethref =http://necolas.github.io/normalize.css/3.0 .1 / normalize.css/>

我检查jquery，并在正常化之后添加jquery源... 

 < link rel =stylesheethref =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 ...之后添加规范化... 

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

这是假设发生的，而是我添加normalize，当我取消选中.norm它不会删除，但后来工作得很好。



这里有一个例子，我在检查normalize后，然后是jquery，然后unchecked normalize删除，并再次检查normalize。显示问题.... 

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

任何人都知道如何解决这个问题？



<非常感谢任何帮助。



  $（document）.ready（function（）{$（。norm change，function（）{if（$（this）.is（：checked））{editor.replaceRange（'< link rel =stylesheethref =http://necolas.github.io/ normalize.css / 3.0.1 / normalize.css/> \\\
'，{line：editor.lastLine（），ch：0}）;} else {var textArea = editor.getValue（）; var searchText = textArea.search（'< link rel =stylesheethref =http://necolas.github.io/normalize.css/3.0.1/normalize.css/>'）; if（searchText>  - 1）{txt =''; var updatedTextArea = textArea.replace（'\\\
< link rel =stylesheethref =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> ;\\\
'，{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（'\\\
< script src =http://code.jquery.com/jquery-latest。 min.js><'+'/ script>'，txt）; editor.setValue（updatedTextArea）;}}}）; //添加Angular JS到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> \\\
'，{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（'\\\
< script src =https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js><'+'/ script>'，txt）; editor.setValue（updatedTextArea） ;}}}）;}）; //初始化Code​​Mirror editorvar 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 = ：//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 =normtype =checkbox>规范化< br> < input class =jqtype =checkbox> Jquery< br> < input class =angtype =checkbox> Angular JS< br>< / p>< textarea id ='code'name ='code'>< / textarea>

div>

解决方案

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



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



  $（document）.ready（function（）{$（。norm）。on（change，function（）{var normStr ='< link rel =stylesheethref =http：// necolas。 github.io/normalize.css/3.0.1/normalize.css/> \\\
'if（$（this）.is（：checked））{editor.replaceRange（normStr， 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）;}}}）; //将规范化添加到Codemirror $（jq）。on（change，function（）{var jqStr ='& script src =http://code.jquery.com/jquery-latest.min.js>< / script'+'> \\\
'; 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）; }}}）; //将Angular JS添加到Codemirror $（。ang）。on（change，function（）{var angStr ='< script src =https://ajax.googleapis.com/ajax/libs/angularjs /1.0.7/angular.min.js\"><'+'/ script> \\\
'; 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更新后的文件夹中的所有文件都将被保存在文件中。更新后的文件将被保存在这个文件夹中。 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 = ：//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 =normtype =checkbox> Normalize< br> < input class =jqtype =checkbox> Jquery< br> < input class =angtype =checkbox> Angular JS< br>< / p>< textarea id ='code'name ='code'>< / textarea>


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

Anyone know how to fix this problem?

Any help is greatly appreciated.

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

解决方案

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>

这篇关于在复选框中向/从Codemirror添加/删除值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆