You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.5 KiB
109 lines
3.5 KiB
<!doctype html> |
|
|
|
<title>CodeMirror: Multiple Buffer & Split View Demo</title> |
|
<meta charset="utf-8"/> |
|
<link rel=stylesheet href="../doc/docs.css"> |
|
|
|
<link rel="stylesheet" href="../lib/codemirror.css"> |
|
<script src="../lib/codemirror.js"></script> |
|
<script src="../mode/javascript/javascript.js"></script> |
|
<script src="../mode/css/css.js"></script> |
|
<style id=style> |
|
.CodeMirror {border: 1px solid black; height: 250px;} |
|
</style> |
|
<div id=nav> |
|
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> |
|
|
|
<ul> |
|
<li><a href="../index.html">Home</a> |
|
<li><a href="../doc/manual.html">Manual</a> |
|
<li><a href="https://github.com/codemirror/codemirror">Code</a> |
|
</ul> |
|
<ul> |
|
<li><a class=active href="#">Multiple Buffer & Split View</a> |
|
</ul> |
|
</div> |
|
|
|
<article> |
|
<h2>Multiple Buffer & Split View Demo</h2> |
|
|
|
|
|
<div id=code_top></div> |
|
<div> |
|
Select buffer: <select id=buffers_top></select> |
|
<button onclick="newBuf('top')">New buffer</button> |
|
</div> |
|
<div id=code_bot></div> |
|
<div> |
|
Select buffer: <select id=buffers_bot></select> |
|
<button onclick="newBuf('bot')">New buffer</button> |
|
</div> |
|
|
|
<script id=script> |
|
var sel_top = document.getElementById("buffers_top"); |
|
CodeMirror.on(sel_top, "change", function() { |
|
selectBuffer(ed_top, sel_top.options[sel_top.selectedIndex].value); |
|
}); |
|
|
|
var sel_bot = document.getElementById("buffers_bot"); |
|
CodeMirror.on(sel_bot, "change", function() { |
|
selectBuffer(ed_bot, sel_bot.options[sel_bot.selectedIndex].value); |
|
}); |
|
|
|
var buffers = {}; |
|
|
|
function openBuffer(name, text, mode) { |
|
buffers[name] = CodeMirror.Doc(text, mode); |
|
var opt = document.createElement("option"); |
|
opt.appendChild(document.createTextNode(name)); |
|
sel_top.appendChild(opt); |
|
sel_bot.appendChild(opt.cloneNode(true)); |
|
} |
|
|
|
function newBuf(where) { |
|
var name = prompt("Name for the buffer", "*scratch*"); |
|
if (name == null) return; |
|
if (buffers.hasOwnProperty(name)) { |
|
alert("There's already a buffer by that name."); |
|
return; |
|
} |
|
openBuffer(name, "", "javascript"); |
|
selectBuffer(where == "top" ? ed_top : ed_bot, name); |
|
var sel = where == "top" ? sel_top : sel_bot; |
|
sel.value = name; |
|
} |
|
|
|
function selectBuffer(editor, name) { |
|
var buf = buffers[name]; |
|
if (buf.getEditor()) buf = buf.linkedDoc({sharedHist: true}); |
|
var old = editor.swapDoc(buf); |
|
var linked = old.iterLinkedDocs(function(doc) {linked = doc;}); |
|
if (linked) { |
|
// Make sure the document in buffers is the one the other view is looking at |
|
for (var name in buffers) if (buffers[name] == old) buffers[name] = linked; |
|
old.unlinkDoc(linked); |
|
} |
|
editor.focus(); |
|
} |
|
|
|
function nodeContent(id) { |
|
var node = document.getElementById(id), val = node.textContent || node.innerText; |
|
val = val.slice(val.match(/^\s*/)[0].length, val.length - val.match(/\s*$/)[0].length) + "\n"; |
|
return val; |
|
} |
|
openBuffer("js", nodeContent("script"), "javascript"); |
|
openBuffer("css", nodeContent("style"), "css"); |
|
|
|
var ed_top = CodeMirror(document.getElementById("code_top"), {lineNumbers: true}); |
|
selectBuffer(ed_top, "js"); |
|
var ed_bot = CodeMirror(document.getElementById("code_bot"), {lineNumbers: true}); |
|
selectBuffer(ed_bot, "js"); |
|
</script> |
|
|
|
<p>Demonstration of |
|
using <a href="../doc/manual.html#linkedDoc">linked documents</a> |
|
to provide a split view on a document, and |
|
using <a href="../doc/manual.html#swapDoc"><code>swapDoc</code></a> |
|
to use a single editor to display multiple documents.</p> |
|
|
|
</article>
|
|
|