Using Dropbox to load file in Codemirror

index.html

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

script.js

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();
});

style.css

@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;
}

using-dropbox-to-load-file-in-codemirror.markdown

Using Dropbox to load file in Codemirror

Just an experiment

Forked from Michael Schwartz's Pen Using Dropbox to load file in Codemirror.

A Pen by Lanorise Cainion on CodePen.

License.