mardi 28 juillet 2015

Adding/Joining Values into Codemirror from a Checkbox

If I check normalize I want to add normalize library into Codemirror.

<link rel="stylesheet" href="http://ift.tt/1zN1Hmq" />

Then if I check jquery after I want to add jquery after normalize...

<link rel="stylesheet" href="http://ift.tt/1zN1Hmq" />
<script src="http://ift.tt/J5OMPW"></script>

but if I uncheck normalize and then check it again I want to add normalize after jquery...

<script src="http://ift.tt/J5OMPW"></script>
<link rel="stylesheet" href="http://ift.tt/1zN1Hmq" />

Though this is just a basic example as my app has a lot more checkbox's (38 to be exact) adding and removing libraries for my IDE.

Does anyone know how to do this in Codemirror?

Any help is greatly appreciated.

$(document).ready(function() {
  // Add Normalize to Codemirror
  $(".norm").on("change", function() {
    if ( $(".norm").is(":checked") ) {
      editor.setValue('<link rel="stylesheet" href="http://ift.tt/1zN1Hmq" />\n');
    }
  });
  // Add Normalize to Codemirror
  $(".jq").on("change", function() {
    if ( $(".jq").is(":checked") ) {
      editor.setValue('<script src="http://ift.tt/J5OMPW"><'+'/script>\n');
    }
  });
  // Add Angular JS to Codemirror
  $(".ang").on("change", function() {
    if ( $(".ang").is(":checked") ) {
      editor.setValue('<script src="http://ift.tt/1fxqwat"><'+'/script>\n');
    }
  });
});

var delay;

// 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']
});

// Live preview
editor.on('change', function() {
  clearTimeout(delay);
  delay = setTimeout(updatePreview, 300);
});

function updatePreview() {
  var previewFrame = document.getElementById('preview');
  var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
  preview.open();
  preview.write(editor.getValue());
  preview.close();
}
setTimeout(updatePreview, 300);
.CodeMirror {
  float: left;
  width: 50%;
  border: 1px solid black;
}

iframe {
  width: 49%;
  float: left;
  height: 300px;
  border: 1px solid black;
  border-left: 0;
}
<link rel='stylesheet' href='http://ift.tt/1zN1Hmq'/>
<script src='http://ift.tt/J5OMPW'></script>
<script src='http://ift.tt/1dmRy6L'></script>
<link rel='stylesheet' href='http://ift.tt/1BYO7Md'>
<link rel='stylesheet' href='http://ift.tt/1FCWaEb' />
<script src='http://ift.tt/1FCWaEd'></script>
<script src='http://ift.tt/1BYO82z'></script>
<script src='http://ift.tt/1EAg5S3'></script>
<script src='http://ift.tt/1FCW7Z8'></script>
<script src='http://ift.tt/1BYO82B'></script>
<script src='http://ift.tt/1BYO82D'></script>
<script src='http://ift.tt/1FCW7Zd'></script>
<script src='http://ift.tt/1BYO6YD'></script>
<script src='http://ift.tt/1BYO82H'></script>
<script src='http://ift.tt/1FCWaEj'></script>
<script src='http://ift.tt/1BYO6YJ'></script>
<script src='http://ift.tt/1FCWaEp'></script>
<script src='http://ift.tt/1FCWaEr'></script>
<script src='http://ift.tt/1BYO82P'></script>
<script src='http://ift.tt/1FCWaUF'></script>
<script src='http://ift.tt/1BYO8j5'></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>

<iframe id='preview'></iframe>



Aucun commentaire:

Enregistrer un commentaire