Just an experiment
Forked from Michael Schwartz's Pen Using Dropbox to load file in Codemirror.
A Pen by Lanorise Cainion on CodePen.
<script src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script> | |
<script src="https://codemirror.net/lib/codemirror.js"></script> | |
<script src="https://codemirror.net/javascripts/code-completion.js"></script> | |
<script src="https://codemirror.net/javascripts/css-completion.js"></script> | |
<script src="https://codemirror.net/javascripts/html-completion.js"></script> | |
<script src="https://codemirror.net/mode/javascript/javascript.js"></script> | |
<script src="https://codemirror.net/mode/xml/xml.js"></script> | |
<script src="https://codemirror.net/mode/css/css.js"></script> | |
<script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script> | |
<script src="https://codemirror.net/addon/edit/closetag.js"></script> | |
<script src="https://codemirror.net/addon/edit/matchbrackets.js"></script> | |
<script src="https://codemirror.net/addon/selection/active-line.js"></script> | |
<script src="https://codemirror.net/keymap/extra.js"></script> | |
<script src="https://codemirror.net/addon/fold/foldcode.js"></script> | |
<script src="https://codemirror.net/addon/fold/foldgutter.js"></script> | |
<script src="https://codemirror.net/addon/fold/brace-fold.js"></script> | |
<script src="https://codemirror.net/addon/fold/xml-fold.js"></script> | |
<script src="https://codemirror.net/addon/fold/comment-fold.js"></script> | |
<script src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="0aci2snop4eu2qc"></script> | |
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script> | |
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxsplitter.js"></script> | |
<header> | |
<span id="dropbox-container"></span> | |
<a class="fr" href="javascript:void(0)" data-action="open-dropbox"> | |
Load Dropbox | |
</a> | |
</header> | |
<div id="splitContainer"> | |
<div> | |
<div id="leftSplitter"> | |
<div> | |
<textarea id="htmlEditor"><!-- comment --> | |
hello world</textarea> | |
</div> | |
<div> | |
<textarea id="cssEditor">/* comment */ | |
body { | |
background: #9af; | |
}</textarea> | |
</div> | |
</div> | |
</div> | |
<div> | |
<div id="rightSplitter"> | |
<div> | |
<textarea id="jsEditor">// comment | |
document.body.innerHTML = "Software != hardware. Just because I can write code doesn't mean I can tell you why your printer doesn't work. #funny"</textarea> | |
</div> | |
<div> | |
<iframe id="preview" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe> | |
</div> | |
</div> | |
</div> | |
</div> |
var delay; | |
// Initialize CodeMirror editor | |
var htmlEditor = CodeMirror.fromTextArea(document.getElementById("htmlEditor"), { | |
mode: "text/html", | |
tabMode: "indent", | |
styleActiveLine: true, | |
lineNumbers: true, | |
lineWrapping: true, | |
autoCloseTags: true, | |
foldGutter: true, | |
dragDrop : true, | |
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] | |
}); | |
var cssEditor = CodeMirror.fromTextArea(document.getElementById("cssEditor"), { | |
mode: "text/css", | |
tabMode: "indent", | |
styleActiveLine: true, | |
lineNumbers: true, | |
lineWrapping: true, | |
autoCloseTags: true, | |
foldGutter: true, | |
dragDrop : true, | |
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] | |
}); | |
var jsEditor = CodeMirror.fromTextArea(document.getElementById("jsEditor"), { | |
mode: "text/javascript", | |
tabMode: "indent", | |
styleActiveLine: true, | |
lineNumbers: true, | |
lineWrapping: true, | |
autoCloseTags: true, | |
foldGutter: true, | |
dragDrop : true, | |
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] | |
}); | |
// Live preview | |
htmlEditor.on("change", function() { | |
clearTimeout(delay); | |
delay = setTimeout(updatePreview, 300); | |
}); | |
cssEditor.on("change", function() { | |
clearTimeout(delay); | |
delay = setTimeout(updatePreview, 300); | |
}); | |
jsEditor.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("<style>" + cssEditor.getValue() + "</style>" + htmlEditor.getValue() + "<sc" + "ript>" + jsEditor.getValue() + "</scr" + "ipt>"); | |
preview.close(); | |
} | |
setTimeout(updatePreview, 300); | |
var download_to_editor = function (url, el) { | |
return $.get(url, null, function (data) { | |
el.setValue(data); | |
}, "text"); | |
}; | |
/** | |
* Chooser (Drop Box) | |
* https://www.dropbox.com/developers/dropins/chooser/js | |
*/ | |
options = { | |
success: function(file) { | |
if (file[0].link.toLowerCase().substring(file[0].link.length - 5) === ".html") { | |
download_to_editor(file[0].link, htmlEditor); | |
} else if (file[0].link.toLowerCase().substring(file[0].link.length - 4) === ".css") { | |
download_to_editor(file[0].link, cssEditor); | |
} else if (file[0].link.toLowerCase().substring(file[0].link.length - 3) === ".js") { | |
download_to_editor(file[0].link, jsEditor); | |
} | |
window.close(); | |
}, | |
cancel: function() { | |
//optional | |
}, | |
linkType: "direct", // "preview" or "direct" | |
multiselect: false, // true or false | |
extensions: [".html", ".css", ".js"] | |
}; | |
var button = Dropbox.createChooseButton(options); | |
$("#dropbox-container").append(button); | |
$("[data-action=open-dropbox]").click(function() { | |
Dropbox.choose(options); | |
}); | |
$(document).ready(function() { | |
// Splitter Theme | |
$("#splitContainer, #leftSplitter, #rightSplitter").jqxSplitter({ | |
theme: "metro" | |
}); | |
// Splitter Grid | |
var BoxSplitter = function() { | |
$("#splitContainer").jqxSplitter({ | |
height: "auto", | |
width: "100%", | |
orientation: "horizontal", | |
showSplitBar: true, | |
panels: [{ size: "50%",collapsible:false }, | |
{ size: "50%" }] | |
}); | |
$("#leftSplitter").jqxSplitter({ | |
height: "100%", | |
width: "100%", | |
orientation: "vertical", | |
showSplitBar: true, | |
panels: [{ size: "50%",collapsible:false }, | |
{ size: "50%"}] | |
}); | |
$("#rightSplitter").jqxSplitter({ | |
height: "100%", | |
width: "100%", | |
orientation: "vertical", | |
showSplitBar: true, | |
panels: [{ size: "50%"}, | |
{ size: "50%",collapsible:false }] | |
}); | |
}; | |
BoxSplitter(); | |
}); |
@import url("https://codemirror.net/lib/codemirror.css"); | |
@import url("https://codemirror.net/addon/fold/foldgutter.css"); | |
@import url("https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css"); | |
@import url("https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.metro.css"); | |
body { | |
overflow: hidden; | |
} | |
header { | |
position: absolute; | |
left: 0; | |
right: 0; | |
padding: 8px 5px; | |
overflow: hidden; | |
} | |
.fl{ | |
float: left; | |
} | |
.fr { | |
float: right; | |
} | |
#splitContainer { | |
position: absolute; | |
top: 40px; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
background: #fff; | |
} | |
.CodeMirror { | |
font-family: monospace; | |
font-size: 14px; | |
font-weight: normal; | |
display: block; | |
width: 100%; | |
background: transparent; | |
} | |
.CodeMirror, .CodeMirror-gutters { | |
height: 100%!important; | |
} | |
.lint-error { | |
font-family: arial; | |
font-size: 70%; | |
background: #ffa; | |
color: #a00; | |
padding: 2px 5px 3px; | |
} | |
.lint-error-icon { | |
color: white; | |
background-color: red; | |
font-weight: bold; | |
border-radius: 50%; | |
padding: 0 3px; | |
margin-right: 7px; | |
} | |
.editor-container { | |
width: 100%; | |
height: 100%; | |
background: #fff; | |
} | |
.editor-container > * { | |
width: 100%; | |
height: 100%; | |
border: 0; | |
outline: 0; | |
padding: 0; | |
margin: 0; | |
background: transparent; | |
resize: none; | |
} | |
iframe { | |
width: 100%; | |
height: 100%; | |
border: 0; | |
} |
Just an experiment
Forked from Michael Schwartz's Pen Using Dropbox to load file in Codemirror.
A Pen by Lanorise Cainion on CodePen.