SE + CM6 Integration

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

CodeMirror 6 Expert Mode ✏️ geändert | Mode: speichern deaktiviert