Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut

Erstellen eines Inline -Texteditors ist nicht trivial. Der Prozess beginnt damit, dass das Zielelement bearbeitet wird und potenzielle SyntaxError -Ausnahmen auf dem Weg zu tun hat.

Erstellen Sie Ihren Editor

Um diesen Editor zu erstellen, müssen Sie den Inhalt von HTML -Elementen dynamisch ändern. Hier ist die grundlegende HTML -Struktur:

Edit Document<br><br><br>
<div id="editor">
  <h1 id="title">A Nice Heading.</h1>
  <p>Last Edited By - Monty Shokeen</p>
  <p id="content">Some content that needs correction.</p>
</div><br><br>

Jedes Element, das Sie erstellen möchten, benötigt eine eindeutige ID. Wir werden auch eine einfache Symbolleiste hinzufügen:

<div id="toolbar">
  H1
  H2
</div><br><br>

Lassen Sie uns jetzt Funktionen hinzufügen. Wir werden ein Klickereignis an die H1 -Schaltfläche anschließen, um die Texteingabe zu demonstrieren. Verwenden Sie, um dies zu testen, einen einfachen Webserver (wie serve). Führen Sie in Ihrem Projektverzeichnis serve aus; Der Server startet und bietet einen Link zu Ihrer HTML -Datei.

Verwenden Sie designMode für die gesamte Seitenbearbeitung

contentEditable ist ideal für die Bearbeitung einzelner Elemente. Verwenden Sie die designMode -Mobilie, um fast alle Inhalte auf einer Seite zu ändern. Dies wirkt sich auf das gesamte Dokument aus. Aktivieren Sie es mit document.designMode = 'on'; und deaktivieren Sie es mit document.designMode = 'off';.

Dies ist besonders nützlich bei der Trennung von Design und Inhaltserstellung. Ein Designer stellt den Layout- und Platzhaltertext zur Verfügung, während ein Inhaltsersteller den tatsächlichen Inhalt ausfüllt. Um zu experimentieren, öffnen Sie die Entwicklerkonsole Ihres Browsers, geben Sie document.designMode = 'on'; ein und drücken Sie die Eingabetaste. Die gesamte Seite sollte bearbeitet werden.

Schlussfolgerung

Das Attribut contentEditable vereinfacht die schnellen Änderungen wie das Ändern von Artikeln oder Benutzerkommentare. Ursprünglich in IE 5.5 eingeführt, ist es jetzt ein Whatwg -Standard für die Unterstützung des breiten Browsers (ohne Opera mini).

JavaScript bleibt ein Eckpfeiler der Webentwicklung. Während es eine Lernkurve hat, sind zahlreiche Frameworks und Bibliotheken verfügbar. Entdecken Sie den Markt von Envato für zusätzliche Ressourcen.

Dieses Tutorial umfasste die Grundlagen von contentEditable, demonstrierte einen grundlegenden Inline -Editor und fügte reichhaltige Formatierungsschaltflächen hinzu.

Dieser Beitrag enthält Updates von Jacob Jackson, einem Webentwickler, technischen Schriftsteller, Freiberufler und Open-Source-Mitwirkenden.

Das obige ist der detaillierte Inhalt vonErstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!