SUNEDIT -> CM6 -> Siwtch -> TEST
CodeMirror 6 bauen OK unter ubuntu 26.04.:
Vorarbeiten unter Ubuntu aktuelles nodejs installieren (notwendig weil sonst der build nicht sauber durchläuft):
1.)
# Für Node.js v22 (LTS)
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt install -y nodejs
# ODER für Node.js v24 (Aktuellster Stand)
curl -fsSL https://deb.nodesource.com/setup_24.x | sudo -E bash -
sudo apt install -y nodejs
2.)
sudo npm install -g n
sudo n 22 # Installiert v22 LTS
# oder
sudo n latest # Installiert die absolut neueste Version (v24+)
3.)
npm -v # > 11.11.0
node -v # > 24.14.1
# node gerade Versionen 22, 24, 26 sind lts-versionen
# 2026 kommt vermutlich node Version 26 raus.
-- -- -- -- --
1.)
Projekt anlegen:
Du brauchst dafür Node.js. Falls nicht installiert: sudo apt install nodejs npm. <- neue Version erforderlich!
mkdir my-cm6-build && cd my-cm6-build
npm init -y
2.)
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
3.)
eine eigene Config Datei "main.js" im ordner "my-cm6-build" anlegen.
Hier folgendes einfügen:
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
import { EditorView, basicSetup } from "codemirror"
import { html } from "@codemirror/lang-html"
import { oneDark } from "@codemirror/theme-one-dark"
// Wir machen den Editor global verfügbar, damit du ihn im CMS leicht ansprechen kannst
window.createMyEditor = (element, initialContent) => {
return new EditorView({
doc: initialContent,
extensions: [
basicSetup, // Zeilennummern, History, etc.
html(), // HTML Support inkl. Autocomplete
oneDark, // Dark Theme
EditorView.lineWrapping // Dein gewünschter Umbruch
],
parent: element
});
};
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
3.1.)
Alternativ mit Linting (Fehlererkennung):
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
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" // WICHTIG: Import für den Scan
window.createMyEditor = (element, initialContent) => {
return new EditorView({
doc: initialContent,
extensions: [
basicSetup,
html({
selfClosingTags: true,
matchClosingTags: true
}),
oneDark,
indentUnit.of(" "),
EditorView.lineWrapping,
lintGutter(), // Erzeugt den Platz für das [X] links
linter((view) => {
let diagnostics = [];
// Wir durchlaufen den Code-Baum und suchen nach echten Fehlern
syntaxTree(view.state).iterate({
enter: (node) => {
if (node.type.isError) {
diagnostics.push({
from: node.from,
to: node.to,
severity: "error",
message: "Ungültige HTML-Struktur"
});
}
}
});
return diagnostics; // Jetzt geben wir die Fehler zurück!
})
],
parent: element
});
};
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
4.)
Das Bundle "compilieren:
npx rollup main.js -f iife -o editor.bundle.js -p @rollup/plugin-node-resolve
-f iife: Sorgt dafür, dass die Datei im Browser direkt ausführbar ist.
-oeditor.bundle.js: Das ist deine fertige Datei für das CMS.
5.)
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 <div> mit der ID "editor"
const meinEditor = window.createMyEditor(document.getElementById('editor'), "Start-Text");
6.)
Einbindung als Editor:
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
<script src="js/editor.bundle.js"></script>
<div id="editor-container"></div>
<script>
const container = document.getElementById('editor-container');
const myEditor = window.createMyEditor(container, "<h1>Hallo Welt</h1>");
// Text auslesen: myEditor.state.doc.toString()
</script>
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
7.)
apt install zip
zip -e Archivname.zip Editor.bundle.js
-e (encrypt) fragt nach PW falls ein plaintext versand oer email nicht geht.
8.)
TEST EDITOR:
-- -- -- -- -- -- -- --
<!DOCTYPE html><html lang="de"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeMirror 6 - Local Build Test</title>
<style>
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; }
</style>
</head><body>
<h2>CM6 Bundle Test</h2>
<div class="editor-wrapper"><div id="editor-container"></div></div>
<div class="controls">
<button onclick="getContent()">Inhalt in Konsole ausgeben</button>
<button onclick="insertSample()">Beispiel-HTML einfügen</button>
</div>
<script src="js/editor.bundle.js"></script>
<script>
// Initialer Inhalt
const startContent = `<!DOCTYPE html>
<html><head><title>Hello CM6</title></head><body>
<h1>Dein lokaler Build läuft!</h1>
<p>Teste hier die Autovervollständigung.</p>
<a href="#" target="_blank">Link Test</a>
</body>
</html>`;
// 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<div class='container'>\n <p>Neue Zeile</p>\n</div>";
view.dispatch({
changes: {from: 0, to: view.state.doc.length, insert: sample}
});
}
</script>
</body></html>
-- -- -- -- -- -- -- --