Markdown-Editor | Webbasierter Markdown-Editor mit Live-Vorschau

Einführung

In diesem Projekt werden wir einen einfachen webbasierten Markdown-Editor erstellen, der eine Live-HTML-Vorschau während des Tippens bietet. Mit Bibliotheken wie Ace Editor, marked und highlight.js entwickeln Sie einen intuitiven Editor, der nicht nur das Schreiben in Markdown ermöglicht, sondern auch Daten zwischen Browser-Sitzungen speichert und Codeausschnitte in der Vorschau hervorhebt.

👀 Vorschau

Markdown editor live preview

🎯 Aufgaben

In diesem Projekt lernen Sie:

Wie Sie die HTML-Struktur für den Editor und den Viewer einrichten
Wie Sie den Editor und den Viewer stylen, um eine angenehme Benutzererfahrung zu bieten
Wie Sie die Initialisierungslogik des Editors implementieren
Wie Sie Markdown in HTML parsen und in der Vorschau anzeigen
Wie Sie das Scrollen zwischen Editor und Viewer synchronisieren

🏆 Errungenschaften

Nach Abschluss dieses Projekts werden Sie in der Lage sein:

Einen webbasierten Markdown-Editor mit Live-HTML-Vorschau zu entwickeln
Bibliotheken wie Ace Editor, marked und highlight.js nutzen, um die Funktionalität des Editors zu verbessern
Datenpersistenz zwischen Browser-Sitzungen zu implementieren
Code-Syntax-Hervorhebung in der Markdown-Vorschau zu bieten

HTML-Struktur einrichten

Anforderungen:

Vertrautheit mit grundlegenden HTML-Tags.

Funktionalität:

Lege die Grundlage für den Editor und den Viewer.

In index.html erstelle eine grundlegende HTML-Struktur für den Editor und den Viewer.预留编辑器和预览窗格的空间。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>markdown editor</title>

    <!-- Import CSS files -->
    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="libs/highlightjs/default.min.css" />
    <link rel="stylesheet" href="libs/highlightjs/monokai_sublime.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <!-- markdown editor div -->
        <div class="col-md-6" id="md-editor"></div>
        <!-- markdown preview box div -->
        <div class="col-md-6" id="md-viewer"></div>
      </div>
    </div>
    <!-- Import JavaScript files -->
    <script src="libs/jquery.min.js"></script>
    <script src="libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="libs/ace/ace.js"></script>
    <script src="libs/marked.min.js"></script>
    <script src="libs/highlightjs/highlight.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

Den Editor und Viewer gestalten

Anforderungen:

Grundkenntnisse in CSS.

Funktionalität:

Stylen Sie den Editor und den Viewer für eine angenehme Benutzererfahrung.

Fügen Sie die bereitgestellten Stile in style.css ein. Dadurch wird sichergestellt, dass sowohl der Editor als auch der Viewer richtig gestaltet sind und jeweils die Hälfte des Bildschirms einnehmen.

/* style.css */

/* Bearbeitungsbereich */
#md-editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 16px;
}

/* Vorschaubereich */
#md-viewer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  overflow-y: scroll;
}

Diese CSS gewährleistet, dass der Editor und der Viewer jeweils die Hälfte des Bildschirms einnehmen und nebeneinander platziert werden.

Die Editor-Initialisierung implementieren

Anforderungen:

Grundlegendes Verständnis von JavaScript.

Funktionalität:

Richten Sie den Ace Editor mit den gewünschten Einstellungen ein.

Starten Sie main.js mit der Editorinitialisierungslogik.

/* main.js */

/**
 * Initialisiere den Editor
 *
 */
function initEditor() {
  // Initialisiere den Editor
  var editor = ace.edit("md-editor");

  editor.setTheme("ace/theme/monokai"); // Setze das Themenschema
  editor.getSession().setMode("ace/mode/markdown"); // Setze den Editor-Modus
  editor.getSession().setTabSize(4); // Setze die Tabulation auf 4 Leerzeichen
  editor.getSession().setUseWrapMode(true); // Aktivieren Sie die Zeilenumbrüche

  // Lade Daten aus dem lokalen Speicher
  editor.setValue(localStorage.localData || "");
}

Markdown-Analyse implementieren

Anforderungen:

Vertrautheit mit JavaScript und jQuery.

Funktionalität:

Konvertieren Sie Markdown in HTML.
Zeigen Sie das HTML im Viewer an.

/**
 * Analysiere Markdown
 *
 * @params {object} editor - Editorinstanz
 * @return {object} - Vorschaubox
 */
function parseMarkdown(editor) {
  var viewer = $("#md-viewer"); // Dokumentvorschaubox
  var data = editor.getValue(); // Holen Sie die Editor-Daten

  // Speichern Sie die Daten im lokalen Speicher
  localStorage.localData = data;
  // Analysieren Sie Markdown
  data = marked(data);
  viewer.html(data);

  // Hervorheben Sie den Code im Markdown-Dokument
  $("pre > code", viewer).each(function () {
    hljs.highlightBlock(this);
  });

  // Geben Sie den Viewer zurück
  return viewer;
}

Scroll-Synchronisation zwischen Editor und Viewer

Anforderungen:

Verständnis von JavaScript-Events.

Funktionalität:

Synchronisieren Sie das Scrollen des Editors und des Viewers.

/*
 * Steuern Sie die Scrollleiste
 * Synchronisieren Sie das Scrollen zwischen dem Editor und der Vorschaubox
 *
 * @params {object} editor - Editorinstanz
 * @params {object} viewer - Vorschaubox
 */
function fixScrollBar(editor, viewer) {
  var session = editor.getSession();

  // Scrollen Sie standardmäßig zur ersten Zeile
  session.setScrollTop(0);

  // Binden Sie das Scrollerevent an den Editor
  session.on("changeScrollTop", function () {
    var sTop = session.getScrollTop();
    // Setzen Sie die Scrollleiste für die Vorschaubox
    viewer.scrollTop(sTop);
  });

  // Setzen Sie das Scrollerevent für die Vorschaubox
  viewer.on("scroll", function () {
    var sTop = viewer.scrollTop();
    // Setzen Sie die Scrollleiste für den Editor
    session.setScrollTop(sTop);
  });
}

Alle Funktionen integrieren und den Editor initialisieren

Anforderungen:

Ein Verständnis des Funktionsaufrufs in JavaScript.

Funktionalität:

Verschmelzen Sie alle vorherigen Schritte in einen einheitlichen Code.
Initialisieren Sie den Editor und wenden Sie alle Funktionalitäten an.

/* main.js */

initEditor();

/**
 * Initialisiere den Editor
 *
 */
function initEditor() {
  // Initialisiere den Editor
  var editor = ace.edit("md-editor");

  editor.setTheme("ace/theme/monokai"); // Setze das Themenschema
  editor.getSession().setMode("ace/mode/markdown"); // Setze den Editor-Modus
  editor.getSession().setTabSize(4); // Setze die Tabulation auf 4 Leerzeichen
  editor.getSession().setUseWrapMode(true); // Aktivieren Sie die Zeilenumbrüche

  // Lade Daten aus dem lokalen Speicher
  editor.setValue(localStorage.localData || "");

  // Analysiere die aus dem lokalen Speicher geladenen Daten
  var viewer = parseMarkdown(editor);
  // Steuere die Scrollleiste
  fixScrollBar(editor, viewer);

  // Echtzeit-Markdown-Analyse
  editor.getSession().on("change", function (e) {
    parseMarkdown(editor);
  });
}

Das Projekt ausführen

Öffnen Sie index.html in einem Webbrowser.
Um Ihren Markdown-Editor anzuzeigen und zu testen.
Die Wirkung der Seite ist wie folgt:

Zusammenfassung

Glückwunsch! Sie haben gerade einen webbasierten Markdown-Editor mit Live-Vorschaufunktionalität erstellt. Jetzt können Sie Markdown-Inhalte schreiben, ihre live HTML-Darstellung anzeigen und sogar Codeausschnitte hervorheben. Denken Sie daran, dass der von Ihnen geschriebene Inhalt dank localStorage über Browser-Sitzungen hinweg bestehen bleibt. Frohe Programmierung!

Markdown-Editor mit Live-Vorschau entwickeln

Einführung

👀 Vorschau

🎯 Aufgaben

🏆 Errungenschaften

HTML-Struktur einrichten

Den Editor und Viewer gestalten

Die Editor-Initialisierung implementieren

Markdown-Analyse implementieren

Scroll-Synchronisation zwischen Editor und Viewer

Alle Funktionen integrieren und den Editor initialisieren

Das Projekt ausführen

Zusammenfassung