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