.border { border: 1px solid #f7f7f7; } .add-panel { background: orange; padding: 3px 6px; color: white !important; border-radius: 3px; } .add-panel, .remove-panel { cursor: pointer; } .remove-panel { float: right; } .panel { background: #f7f7f7; padding: 3px 7px; font-size: 0.85em; } .panel.top, .panel.after-top { border-bottom: 1px solid #ddd; } .panel.bottom, .panel.before-bottom { border-top: 1px solid #ddd; }
CodeMirror
Home Manual Code
Panel
Panel Demo
The panel addon allows you to display panels above or below an editor.
Click the links below to add panels at the given position
top after-top before-bottom bottom
You can also replace an existing panel
var textarea = document.getElementById("code"); var demo = document.getElementById("demo"); var numPanels = 0; var panels = {}; var editor;
textarea.value = demo.innerHTML.trim(); editor = CodeMirror.fromTextArea(textarea, { lineNumbers: true, mode: "htmlmixed" });
function makePanel(where) { var node = document.createElement("div"); var id = ++numPanels; var widget, close, label;
node.id = "panel-" + id; node.className = "panel " + where; close = node.appendChild(document.createElement("a")); close.setAttribute("title", "Remove me!"); close.setAttribute("class", "remove-panel"); close.textContent = "✖"; CodeMirror.on(close, "mousedown", function(e) { e.preventDefault() panels[node.id].clear(); }); label = node.appendChild(document.createElement("span")); label.textContent = "I'm panel n°" + id; return node; } function addPanel(where) { var node = makePanel(where); panels[node.id] = editor.addPanel(node, {position: where, stable: true}); }
addPanel("top"); addPanel("bottom");
function replacePanel(form) { var id = form.elements.panel_id.value; var panel = panels["panel-" + id]; var node = makePanel("");
panels[node.id] = editor.addPanel(node, {replace: panel, position: "after-top", stable: true}); return false; }