</> CM6 Expert Mode
Speichern
<p> Hinweis: Dieser Editor befindet sich im Demo Modus (speichern ist deaktiviert).<br>Änderungen auf der Seite gehen beim verlassen verloren.<br><br><u><span style="font-family: Cascadia Mono Bold">CodeMirror 6 </span><span style="font-family: Cascadia Mono SemiLight">,aktuellen build' unter Ubuntu 26.04.x erstellen:</span></u><br><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">1.)</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight"> Du brauchst: <strong>Node.js</strong></span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">Falls nicht installiert:</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight"><span style="background-color: rgb(254, 226, 226)">apt install nodejs npm</span> # Wichtig: Meist ist eine neuere Version erforderlich, daher lieber nicht so installieren. </span><br><br><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">Vorarbeiten unter Ubuntu aktuelles Node.js installieren - notwendig weil sonst der build nicht sauber durchläuft:</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">1.1.)</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight"># für Node.js v22 (LTS Stand Anfang 2026)</span><br><span style="background-color: rgb(254, 249, 195);font-size: 14px;font-family: Cascadia Mono SemiLight"> curl -fsSL https://deb.nodesource.com/setup_<span style="color: #ef4444">22</span>.x | sudo -E bash - </span><br><span style="background-color: rgb(254, 249, 195);font-size: 14px;font-family: Cascadia Mono SemiLight">sudo apt install -y nodejs</span><br><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">1.2.)</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight"># oder für Node.js v24 (Aktueller)</span><br><span style="background-color: rgb(220, 252, 231);font-size: 14px;font-family: Cascadia Mono SemiLight"> curl -fsSL https://deb.nodesource.com/setup_<span style="color: #ef4444">24</span>.x | sudo -E bash - </span><br><span style="background-color: rgb(220, 252, 231);font-size: 14px;font-family: Cascadia Mono SemiLight">sudo apt install -y nodejs</span><br><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">2.)</span><br><span style="background-color: rgb(220, 252, 231);font-size: 14px;font-family: Cascadia Mono SemiLight">npm install -g n</span><br><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight"><span style="background-color: #fef9c3">n</span><span style="background-color: rgb(254, 249, 195);color: rgb(239, 68, 68)"> 22</span> # installiert v22 LTS oder v <span style="color: #ef4444">xx</span> oder </span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight"><span style="background-color: #dcfce7">n latest</span> # installiert die absolut neueste Version (v24/v26/...) </span><br><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">3.)</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight"># zur Kontrolle:</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight"><span style="font-family: Cascadia Mono SemiLight"><span style="background-color: rgb(254, 249, 195)">npm -v</span> #</span> > 11.11.0 </span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight"><span style="background-color: #fef9c3">node -v</span> # > 24.14.1 (gerade node Versionen 22, 24, 26 sind lts-versionen) </span><br><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">4.)</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">Projekt anlegen:</span><br><span style="background-color: rgb(220, 252, 231);font-size: 14px;font-family: Cascadia Mono SemiLight"> mkdir <span style="color: #ef4444">my-cm6-build</span> && cd <span style="color: #ef4444">my-cm6-build</span></span><br><span style="background-color: rgb(220, 252, 231);font-size: 14px;font-family: Cascadia Mono SemiLight">npm init -y</span><br><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">5.) Die benötigten Module installieren</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">Wir laden den Core, das HTML-Paket und den Bundler "Rollup" herunter.</span><br><br><span style="background-color: rgb(220, 252, 231);font-size: 14px;font-family: Cascadia Mono SemiLight">npm install codemirror @codemirror/lang-html @codemirror/lang-javascript @codemirror/theme-one-dark rollup @rollup/plugin-node-resolve</span><br><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight"> 6.) eine eigene Config Datei "<span style="color: rgb(239, 68, 68);background-color: rgb(220, 252, 231)">main.js</span>" im ordner "<span style="color: rgb(239, 68, 68); background-color: rgb(220, 252, 231);">my-cm6-build</span>" anlegen. </span><br><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">Hier folgendes einfügen:</span></p><pre class=""><span style="font-size: 13px"><span style="color: rgb(75, 85, 99)">import { EditorView, basicSetup } from "codemirror"</span><br><span style="color: rgb(75, 85, 99)">import { html } from "@codemirror/lang-html"</span><br><span style="color: rgb(75, 85, 99)">import { oneDark } from "@codemirror/theme-one-dark"</span><br><span style="color: rgb(75, 85, 99)">import { indentUnit } from "@codemirror/language"</span><br><span style="color: rgb(75, 85, 99)">import { linter, lintGutter } from "@codemirror/lint"</span><br><span style="color: rgb(75, 85, 99)">import { syntaxTree } from "@codemirror/language"</span><br><span style="color: rgb(75, 85, 99)">import { highlightWhitespace } from "@codemirror/view" // WICHTIG</span><br><span style="color: rgb(75, 85, 99)">import { Compartment } from "@codemirror/state" // WICHTIG</span><br><br><span style="color: rgb(75, 85, 99)">// Ein Compartment erlaubt es, Extensions im laufenden Betrieb zu ändern</span><br><span style="color: rgb(75, 85, 99)">const whitespaceComp = new Compartment();</span><br><br><span style="color: rgb(75, 85, 99)">window.createMyEditor = (element, initialContent) => {</span><br><span style="color: rgb(75, 85, 99)">const view = new EditorView({</span><br><span style="color: rgb(75, 85, 99)">doc: initialContent,</span><br><span style="color: rgb(75, 85, 99)">extensions: [</span><br><span style="color: rgb(75, 85, 99)">basicSetup,</span><br><span style="color: rgb(75, 85, 99)">html({ selfClosingTags: true, matchClosingTags: true }),</span><br><span style="color: rgb(75, 85, 99)">oneDark,</span><br><span style="color: rgb(75, 85, 99)">indentUnit.of(" "), // Tabulator auf 2 Leerzeichen gestellt</span><br><span style="color: rgb(75, 85, 99)">EditorView.lineWrapping,</span><br><span style="color: rgb(75, 85, 99)">lintGutter(),</span><br><span style="color: rgb(75, 85, 99)">// Das Whitespace-Compartment startet standardmäßig leer (aus)</span><br><span style="color: rgb(75, 85, 99)">whitespaceComp.of([]),</span><br><span style="color: rgb(75, 85, 99)">linter((view) => {</span><br><span style="color: rgb(75, 85, 99)">let diagnostics = [];</span><br><span style="color: rgb(75, 85, 99)">syntaxTree(view.state).iterate({</span><br><span style="color: rgb(75, 85, 99)">enter: (node) => {</span><br><span style="color: rgb(75, 85, 99)">if (node.type.isError) {</span><br><span style="color: rgb(75, 85, 99)">diagnostics.push({</span><br><span style="color: rgb(75, 85, 99)">from: node.from, to: node.to,</span><br><span style="color: rgb(75, 85, 99)">severity: "error", message: "Ungültige HTML-Struktur"</span><br><span style="color: rgb(75, 85, 99)">});</span><br><span style="color: rgb(75, 85, 99)">}</span><br><span style="color: rgb(75, 85, 99)">}</span><br><span style="color: rgb(75, 85, 99)">});</span><br><span style="color: rgb(75, 85, 99)">return diagnostics;</span><br><span style="color: rgb(75, 85, 99)">})</span><br><span style="color: rgb(75, 85, 99)">],</span><br><span style="color: rgb(75, 85, 99)">parent: element</span><br><span style="color: rgb(75, 85, 99)">});</span><br><br><span style="color: rgb(75, 85, 99)">// Wir hängen eine eigene Funktion an das View-Objekt,</span><br><span style="color: rgb(75, 85, 99)">// um die Whitespaces von außen umschalten zu können</span><br><span style="color: rgb(75, 85, 99)">view.toggleWS = (show) => {</span><br><span style="color: rgb(75, 85, 99)">view.dispatch({</span><br><span style="color: rgb(75, 85, 99)">effects: whitespaceComp.reconfigure(show ? highlightWhitespace() : [])</span><br><span style="color: rgb(75, 85, 99)">});</span><br><span style="color: rgb(75, 85, 99)">};</span><br><br><span style="color: rgb(75, 85, 99)">return view;</span><br><span style="color: rgb(31, 41, 55);font-family: Cascadia Mono SemiLight">};</span></span></pre><p><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">7.)</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">Das Bundle "kompilieren:</span><br><br><span style="background-color: rgb(220, 252, 231);font-size: 14px;font-family: Cascadia Mono SemiLight"> npx rollup <span style="color: #ef4444">main.js</span> -f iife -o <span style="color: #ef4444">editor.bundle.js</span> -p @rollup/plugin-node-resolve </span><br><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight"> # <strong>-f</strong> = iife: Sorgt dafür, dass die Datei im Browser direkt ausführbar ist. </span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight"> # <strong>-o </strong><span style="color: #ef4444">editor.bundle.js</span> = Das ist deine fertige Datei für das CMS. </span><br><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">Die erzeugte editor.bundle.js liegt dann direkt im aktuellen Ordner.</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">Es wird dann für einen Editor nur noch diese Datei benötigt, sie enthält unter anderem den Editor, wie auch Themes, css Styles usw.</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">Beim Update muss dann nur diese Datei ausgetauscht werden.</span><br><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">8.)</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">Optional Ein kleiner Tipp für die Einbindung im CMS:</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight"> In deiner main.js haben wir <span style="color: #ef4444">window.createMyEditor</span> definiert. Das bedeutet, du kannst im CMS später ganz einfach schreiben: </span><br><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">// Initialisiert den Editor in einem <div> mit der ID "editor"</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight;background-color: rgb(254, 249, 195)">const meinEditor = window.createMyEditor(document.getElementById('editor'), "Start-Text");</span><br><br><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">9.)</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">Optional Einbindung als Editor:</span></p><pre class=""><span style="font-size: 13px"><span style="font-family: Cascadia Mono SemiLight"><script src="js/editor.bundle.js"></script></span><br><span style="font-family: Cascadia Mono SemiLight"><div id="editor-container"></div></span><br><span style="font-family: Cascadia Mono SemiLight"><script></span><br><span style="font-family: Cascadia Mono SemiLight">const container = document.getElementById('editor-container');</span><br><span style="font-family: Cascadia Mono SemiLight">const myEditor = window.createMyEditor(container, "<h1>Hallo Welt</h1>");</span><br><span style="font-family: Cascadia Mono SemiLight">// Text auslesen: myEditor.state.doc.toString()</span><br><span style="font-family: Cascadia Mono SemiLight"></script></span></span></pre><p><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight"> 10.)<br>Optional Falls der E-Mailversand blockiert wird (kann z. B. bei google hängen wenn ihr euch die zuschicken wollt) macht es Sinn, die Datei einfach zu packen.<br></span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight;background-color: rgb(254, 249, 195)">apt install zip</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight;background-color: rgb(254, 249, 195)"> zip -e <span style="color: #ef4444">Archivname.zip editor.bundle.js</span></span><br><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight"><strong>-e</strong> = (optional/encrypt) Fragt beim Erstellen nach einem PW (verschlüsselt dann den Inhalt), Das Zip kann man dann problemlos übertragen. </span><br><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">11.)</span><br><span style="font-size: 14px;font-family: Cascadia Mono SemiLight">Optional Test-Editor Seite:</span><br><br></p><pre class=""><span style="font-size: 13px"><span style="font-family: Cascadia Mono SemiLight"><!DOCTYPE html><html lang="de"><head><meta charset="UTF-8"></span><br><span style="font-family: Cascadia Mono SemiLight"><meta name="viewport" content="width=device-width, initial-scale=1.0"></span><br><span style="font-family: Cascadia Mono SemiLight"><title>CodeMirror 6 - Local Build Test</title></span><br><span style="font-family: Cascadia Mono SemiLight"><style></span><br><span style="font-family: Cascadia Mono SemiLight">body {</span><br><span style="font-family: Cascadia Mono SemiLight">background-color: #1e1e1e;color: #abb2bf;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;margin: 0;padding: 20px;display: flex;flex-direction: column;align-items: center; }</span><br><span style="font-family: Cascadia Mono SemiLight">.editor-wrapper { width: 100%;max-width: 900px;border: 1px solid #3e4451;border-radius: 8px;overflow: hidden;box-shadow: 0 10px 30px rgba(0,0,0,0.5); }</span><br><br><span style="font-family: Cascadia Mono SemiLight">/* Dies ist der Container für CodeMirror */</span><br><span style="font-family: Cascadia Mono SemiLight">#editor-container { height: 500px; font-size: 15px; }</span><br><span style="font-family: Cascadia Mono SemiLight">.controls { margin-top: 20px;display: flex;gap: 10px; }</span><br><span style="font-family: Cascadia Mono SemiLight">button { background: #4a5568;color: white;border: none;padding: 10px 20px;border-radius: 4px;cursor: pointer;transition: background 0.2s; }</span><br><span style="font-family: Cascadia Mono SemiLight">button:hover { background: #2d3748; }</span><br><span style="font-family: Cascadia Mono SemiLight">h2 { margin-bottom: 10px; color: #61afef; }</span><br><span style="font-family: Cascadia Mono SemiLight"></style></span><br><span style="font-family: Cascadia Mono SemiLight"></head><body></span><br><span style="font-family: Cascadia Mono SemiLight"><h2>CM6 Bundle Test</h2></span><br><br><span style="font-family: Cascadia Mono SemiLight"><div class="editor-wrapper"><div id="editor-container"></div></div></span><br><br><span style="font-family: Cascadia Mono SemiLight"><div class="controls"></span><br><span style="font-family: Cascadia Mono SemiLight"><button onclick="getContent()">Inhalt in Konsole ausgeben</button></span><br><span style="font-family: Cascadia Mono SemiLight"><button onclick="insertSample()">Beispiel-HTML einfügen</button></span><br><span style="font-family: Cascadia Mono SemiLight"></div></span><br><br><span style="font-family: Cascadia Mono SemiLight"><script src="js/editor.bundle.js"></script></span><br><br><span style="font-family: Cascadia Mono SemiLight"><script></span><br><span style="font-family: Cascadia Mono SemiLight">// Initialer Inhalt</span><br><span style="font-family: Cascadia Mono SemiLight">const startContent = `<!DOCTYPE html></span><br><span style="font-family: Cascadia Mono SemiLight"><html><head><title>Hello CM6</title></head><body></span><br><span style="font-family: Cascadia Mono SemiLight"><h1>Dein lokaler Build läuft!</h1></span><br><span style="font-family: Cascadia Mono SemiLight"><p>Teste hier die Autovervollständigung.</p></span><br><span style="font-family: Cascadia Mono SemiLight"><a href="#" target="_blank">Link Test</a></span><br><span style="font-family: Cascadia Mono SemiLight"></body></span><br><span style="font-family: Cascadia Mono SemiLight"></html>`;</span><br><br><span style="font-family: Cascadia Mono SemiLight">// Editor instanziieren (Nutzt deine globale Funktion aus main.js)</span><br><span style="font-family: Cascadia Mono SemiLight">let view;</span><br><span style="font-family: Cascadia Mono SemiLight">try {</span><br><span style="font-family: Cascadia Mono SemiLight">const container = document.getElementById('editor-container');</span><br><span style="font-family: Cascadia Mono SemiLight">view = window.createMyEditor(container, startContent);</span><br><span style="font-family: Cascadia Mono SemiLight">console.log("Editor erfolgreich geladen!");</span><br><span style="font-family: Cascadia Mono SemiLight">} catch (e) {</span><br><span style="font-family: Cascadia Mono SemiLight">console.error("Fehler beim Laden des Editors. Prüfe, ob js/editor.bundle.js erreichbar ist.", e);</span><br><span style="font-family: Cascadia Mono SemiLight">}</span><br><br><span style="font-family: Cascadia Mono SemiLight">// Funktion zum Auslesen des Inhalts</span><br><span style="font-family: Cascadia Mono SemiLight">function getContent() {</span><br><span style="font-family: Cascadia Mono SemiLight">const code = view.state.doc.toString();</span><br><span style="font-family: Cascadia Mono SemiLight">console.log("Aktueller Code:\n", code);</span><br><span style="font-family: Cascadia Mono SemiLight">alert("Der Code wurde in die Browser-Konsole (F12) ausgegeben.");</span><br><span style="font-family: Cascadia Mono SemiLight">}</span><br><br><span style="font-family: Cascadia Mono SemiLight">// Funktion zum Setzen von Inhalt</span><br><span style="font-family: Cascadia Mono SemiLight">function insertSample() {</span><br><span style="font-family: Cascadia Mono SemiLight">const sample = "\n<div class='container'>\n <p>Neue Zeile</p>\n</div>";</span><br><span style="font-family: Cascadia Mono SemiLight">view.dispatch({</span><br><span style="font-family: Cascadia Mono SemiLight">changes: {from: 0, to: view.state.doc.length, insert: sample}</span><br><span style="font-family: Cascadia Mono SemiLight">});</span><br><span style="font-family: Cascadia Mono SemiLight">}</span><br><span style="font-family: Cascadia Mono SemiLight"></script></span><br><span style="font-family: Cascadia Mono SemiLight"></body></html></span></span></pre><p><br><br><br><span style="font-size: 14px">Stand: 2026-05-07 / </span><a href="https://ctaas.de/impressum.htm" target="_blank" title="Impressum/Homepage"><span style="font-size: 14px">Impressum</span></a><span style="font-size: 14px"> </span><br><br></p><p><br></p><p><br></p>
Speichern
CodeMirror 6 Expert Mode
+
↺
-
¶
↶
↷
✏️ geändert
| Mode: speichern deaktiviert
Verwerfen ✖ Schließen
Code 🪄 Formatieren
Übernehmen ✔ Schließen