Markdown-Editor mit reiner Frontend-Technologie für Echtzeitvorschau
Dieses Mal bringe ich Ihnen einen Markdown-Editor, der reine Front-End-Technologie für die Echtzeitvorschau verwendet. Was sind die Vorsichtsmaßnahmen für einen Markdown-Editor, der reine Front-End-Technologie für die Echtzeitvorschau verwendet? . Hier sind praktische Fälle, schauen wir uns das gemeinsam an.
Der erste Schritt zum Erstellen des Layouts:
1. Konzipieren Sie das Layout (das Folgende ist das Gesamtlayout)
2 .Erstellen Sie eine neue index.html-Seite unter dem Projekt und schreiben Sie den folgenden Code:
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>markdown编辑器</title>
<style type="text/css">
* { margin: 0; padding: 0; outline: none; border-radius: 0;
}
html, body { width: 100%; height: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #ebebeb;
} #toolbar { height: 50px; background-color: #444; width: 100%; color: #fff; line-height: 50px;
} #container { overflow: auto; position: absolute; bottom: 0; left: 0; right: 0; top: 50px;
} #editor-column, #preview-column { width: 49.5%; height: 100%; overflow: auto; position: relative; background-color: #fff;
} .pull-left { float: left;
}
.pull-right { float: right;
} </style>
</head>
<body>
<div id="toolbar"></div>
<div id="container">
<div id="editor-column" class="pull-left">
<div id="panel-editor">
</div>
</div>
<div id="preview-column" class="pull-right">
<div id="panel-preview">
</div>
</div>
</div>
</body></html>Effektvorschau
Der zweite Schritt besteht darin, Ressourcen einzuführen, um die Vorläufigkeit zu erreichen Wirkung:
1. js unter dem Projektordner erstellen
2. Markiert.js unter markiert/lib aus dem heruntergeladenen komprimierten Paket in den js-Ordner extrahieren
3. ace-builds/src aus dem heruntergeladenen komprimierten Paket extrahieren Paket in den js-Ordner. Nennen Sie es ace
4. Führen Sie die js-Datei
ein (Hinweis: markdown.css ist eine Markdown-Stildatei, Sie können sie selbst schreiben oder aus dem Internet herunterladen, z. B.: github- markdown-css)
<!DOCTYPE html><html>
<head>
<meta charset='UTF-8'>
<title>markdown编辑器</title>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/marked.js"></script>
<script src="js/ace/ace.js"></script>
<link href="markdown.css" rel="stylesheet" />
<!--略-->(Zuerst Bearbeitungsbereich hinzufügen und Ortsvorwahl anzeigen)
<!--略-->#mdeditor,#preview,#panel-editor,#panel-preview{
height: 100%;
width: 100%;
} </style>
</head>
<body>
<div id='toolbar'></div>
<div id='container'><div id='editor-column' class='pull-left'>
<div id='panel-editor'>
<!--编辑区-->
<div class="editor-content" id="mdeditor" ></div>
</div>
</div>
<div id='preview-column' class='pull-right'>
<div id='panel-preview'>
<!--显示区-->
<div id="preview" class="markdown-body"></div>
</div>
</div>
<!--略-->( Zuerst Initialisierungscode hinzufügen)
<!--略--><script>
var acen_edit = ace.edit('mdeditor');
acen_edit.setTheme('ace/theme/chrome');
acen_edit.getSession().setMode('ace/mode/markdown');
acen_edit.renderer.setShowPrintMargin(false);
$("#mdeditor").keyup(function() {
$("#preview").html(marked(acen_edit.getValue()));
}); </script>
</body></html>Effektvorschau
Der dritte Schritt besteht darin, Werkzeuge zur Symbolleiste hinzuzufügen:
1. Schreiben Sie eine öffentliche Methode
(Tatsächlich dient das Klicken auf ein Werkzeug hauptsächlich dazu, automatisch die ursprünglich von Hand eingegebenen Symbole einzufügen)
function insertText(val){
acen_edit.insert(val);//光标位置插入
}
<div id='toolbar'>
<button onclick="insertText('**?**')">加粗</button>
<button onclick="insertText('_?_')">斜体</button>
<button onclick="insertText('>')">引用</button>
..... </div>Der vierte Schritt ist die ace.js-API zum Implementieren der Editoreinstellung Funktion:
<div id='toolbar'>
<button onclick="insertText('**?**')">加粗</button>
<button onclick="insertText('_?_')">斜体</button>
<button onclick="insertText('>')">引用</button>Einstellungen: >Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
<select id="theme" size="1">
<optgroup label="Bright">
<option value="ace/theme/chrome">Chrome</option>
<option value="ace/theme/clouds">Clouds</option>
<option value="ace/theme/crimson_editor">Crimson Editor</option>
<option value="ace/theme/dawn">Dawn</option>
<option value="ace/theme/dreamweaver">Dreamweaver</option>
<option value="ace/theme/eclipse">Eclipse</option>
<option value="ace/theme/github">GitHub</option>
<option value="ace/theme/iplastic">IPlastic</option>
<option value="ace/theme/solarized_light">Solarized Light</option>
<option value="ace/theme/textmate">TextMate</option>
<option value="ace/theme/tomorrow">Tomorrow</option>
<option value="ace/theme/xcode">XCode</option>
<option value="ace/theme/kuroir">Kuroir</option>
<option value="ace/theme/katzenmilch">KatzenMilch</option>
<option value="ace/theme/sqlserver">SQL Server</option>
</optgroup>
<optgroup label="Dark">
<option value="ace/theme/ambiance">Ambiance</option>
<option value="ace/theme/chaos">Chaos</option>
<option value="ace/theme/clouds_midnight">Clouds Midnight</option>
<option value="ace/theme/cobalt">Cobalt</option>
<option value="ace/theme/gruvbox">Gruvbox</option>
<option value="ace/theme/idle_fingers">idle Fingers</option>
<option value="ace/theme/kr_theme">krTheme</option>
<option value="ace/theme/merbivore">Merbivore</option>
<option value="ace/theme/merbivore_soft">Merbivore Soft</option>
<option value="ace/theme/mono_industrial">Mono Industrial</option>
<option value="ace/theme/monokai">Monokai</option>
<option value="ace/theme/pastel_on_dark">Pastel on dark</option>
<option value="ace/theme/solarized_dark">Solarized Dark</option>
<option value="ace/theme/terminal">Terminal</option>
<option value="ace/theme/tomorrow_night">Tomorrow Night</option>
<option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
<option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
<option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
<option value="ace/theme/twilight">Twilight</option>
<option value="ace/theme/vibrant_ink">Vibrant Ink</option>
</optgroup>
</select>
字体大小 <select id="fontsize" size="1">
<option value="10px">10px</option>
<option value="11px">11px</option>
<option value="12px" selected="selected">12px</option>
<option value="13px">13px</option>
<option value="14px">14px</option>
<option value="16px">16px</option>
<option value="18px">18px</option>
<option value="20px">20px</option>
<option value="24px">24px</option>
</select>
代码折行 <select id="folding" size="1">
<option value="manual">manual</option>
<option value="markbegin" selected="selected">mark begin</option>
<option value="markbeginend">mark begin and end</option>
</select>
自动换行 <select id="soft_wrap" size="1">
<option value="off">Off</option>
<option value="40">40 Chars</option>
<option value="80">80 Chars</option>
<option value="free">Free</option>
</select>
全选样式<input type="checkbox" name="select_style" id="select_style" checked="">
光标行高光<input type="checkbox" name="highlight_active" id="highlight_active" checked="">
显示行号<input type="checkbox" id="show_gutter" checked="">
打印边距<input type="checkbox" id="show_print_margin" checked="">
</div><!---略--->......
$("#theme").change(function() {
acen_edit.setTheme($(this).val());
})
$("#fontsize").change(function() {
acen_edit.setFontSize($(this).val());
})
$("#folding").change(function() {
session.setFoldStyle($(this).val());
})
$("#select_style").change(function() {
acen_edit.setOption("selectionStyle", this.checked ? "line" : "text");
})
$("#highlight_active").change(function() {
acen_edit.setHighlightActiveLine(this.checked);
})
$("#soft_wrap").change(function() {
acen_edit.setOption("wrap", $(this).val());
})
$("#show_print_margin").change(function() {
acen_edit.renderer.setShowPrintMargin(this.checked);Wie man einen Simulator mit JS schreibt
So erstellen Sie einen 1-Pixel-Randeffekt auf Mobilgeräten
Das obige ist der detaillierte Inhalt vonMarkdown-Editor mit reiner Frontend-Technologie für Echtzeitvorschau. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Wie Vue3 Markdown analysiert und Code-Hervorhebung implementiert
May 20, 2023 pm 04:16 PM
Um das Blog-Frontend mit Vue zu implementieren, müssen Sie die Markdown-Analyse implementieren. Wenn Code vorhanden ist, müssen Sie die Code-Hervorhebung implementieren. Es gibt viele Markdown-Parsing-Bibliotheken für Vue, wie z. B. markdown-it, vue-markdown-loader, markiert, vue-markdown usw. Diese Bibliotheken sind alle sehr ähnlich. Hier wird Markiert verwendet, und highlights.js wird als Code-Hervorhebungsbibliothek verwendet. Die spezifischen Implementierungsschritte lauten wie folgt: 1. Installieren Sie abhängige Bibliotheken. Öffnen Sie das Befehlsfenster unter dem Vue-Projekt und geben Sie den folgenden Befehl ein: npminstallmarked-save//marked, um Markdown in htmlnpmins zu konvertieren
Die Kombination von Java und WebSocket: So erreichen Sie Echtzeit-Videostreaming
Dec 17, 2023 pm 05:50 PM
Mit der kontinuierlichen Weiterentwicklung der Internettechnologie ist Echtzeit-Videostreaming zu einer wichtigen Anwendung im Internetbereich geworden. Zu den Schlüsseltechnologien für Echtzeit-Videostreaming gehören WebSocket und Java. In diesem Artikel wird die Verwendung von WebSocket und Java zur Implementierung der Echtzeit-Video-Streaming-Wiedergabe vorgestellt und relevante Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist ein Protokoll für die Vollduplex-Kommunikation über eine einzelne TCP-Verbindung. Es wird im Web verwendet
Aufbau eines Echtzeit-Übersetzungstools auf Basis von JavaScript
Aug 09, 2023 pm 07:22 PM
Aufbau eines Echtzeit-Übersetzungstools auf Basis von JavaScript Einführung Mit der wachsenden Nachfrage nach Globalisierung und dem häufigen Auftreten grenzüberschreitender Austausche und Austausche sind Echtzeit-Übersetzungstools zu einer sehr wichtigen Anwendung geworden. Wir können JavaScript und einige vorhandene APIs nutzen, um ein einfaches, aber nützliches Echtzeit-Übersetzungstool zu erstellen. In diesem Artikel wird anhand von Codebeispielen erläutert, wie diese Funktion basierend auf JavaScript implementiert wird. Implementierungsschritte Schritt 1: HTML-Struktur erstellen Zuerst müssen wir ein einfaches HTML erstellen
Verwendung von C++ zur Implementierung von Echtzeit-Audio- und Videoverarbeitungsfunktionen eingebetteter Systeme
Aug 27, 2023 pm 03:22 PM
Verwendung von C++ zur Implementierung von Echtzeit-Audio- und Videoverarbeitungsfunktionen eingebetteter Systeme Das Anwendungsspektrum eingebetteter Systeme wird immer umfangreicher, insbesondere im Bereich der Audio- und Videoverarbeitung, wo die Nachfrage wächst. Angesichts dieser Nachfrage ist die Verwendung der C++-Sprache zur Implementierung von Echtzeit-Audio- und Videoverarbeitungsfunktionen eingebetteter Systeme eine gängige Wahl. In diesem Artikel wird die Verwendung der C++-Sprache zur Entwicklung von Echtzeit-Audio- und Videoverarbeitungsfunktionen eingebetteter Systeme vorgestellt und entsprechende Codebeispiele gegeben. Um die Echtzeit-Audio- und Videoverarbeitungsfunktion zu realisieren, müssen Sie zunächst den grundlegenden Prozess der Audio- und Videoverarbeitung verstehen. Im Allgemeinen Audio und Video
So erstellen Sie einen Markdown-Editor in Python
May 13, 2023 am 09:58 AM
Stellen Sie zunächst sicher, dass Python3 und Tkinter installiert sind. Andere Dinge, die wir brauchen, sind tkhtmlview und markdown2. Sie können sie installieren, indem Sie pipinstalltkhtmlviewmarkdown2 oder pip3installtkhtmlviewmarkdown2 ausführen (wenn Sie mehrere Python-Versionen haben). Starten Sie nun Ihren bevorzugten Editor oder Ihre bevorzugte IDE und erstellen Sie eine neue Datei (z. B. www.linuxidc.com.py (ich habe sie linuxidc.com-Editor genannt)). Wir beginnen mit dem Importieren der erforderlichen Bibliotheken. fromtkinterimport*her
Erstellen Sie eine Echtzeit-Börsenkursanzeige basierend auf JavaScript
Aug 08, 2023 am 08:03 AM
Einführung in den Aufbau einer Echtzeit-Aktienkursanzeige auf Basis von JavaScript: Mit der kontinuierlichen Entwicklung der Finanzmärkte ist die Anzeige von Echtzeit-Aktienkursen für Anleger und Händler immer wichtiger geworden. In einer modernen Handelsplattform ist es unerlässlich, eine Echtzeit-Börsenanzeigefunktion bereitzustellen. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript und einigen verwandten Technologien eine einfache Anwendung zur Anzeige von Börsenkursen in Echtzeit erstellen. Vorbereitungsarbeiten Bevor Sie beginnen, müssen Sie die folgenden Arbeiten vorbereiten: ein Webseiten-Framework basierend auf HTML und CSS
So deaktivieren Sie Live-Aktivitäten in der Apple TV-App auf dem iPhone
Jun 29, 2023 pm 01:50 PM
Live-Events sind eine großartige Möglichkeit, über bevorstehende Bestellungen, Sportspiele und mehr auf dem Laufenden zu bleiben. Diese neue Benachrichtigungsmethode wurde erstmals mit der Veröffentlichung von iOS 16 eingeführt und soll die Art und Weise verbessern, wie Benachrichtigungen an das iPhone übermittelt werden. Jede Anwendung, die Echtzeitdaten bereitstellt, kann Echtzeitaktivitäten nutzen, und viele beliebte Anwendungen sind die Verfolgung ausstehender Bestellungen, Ergebnisse laufender Spiele, Wetterdaten, bevorstehende Live-Übertragungen und mehr. Live-Aktivitäten werden immer in Ihrem Benachrichtigungscenter angezeigt, auch im Standby-Modus (wenn Sie den Standby-Modus aktiviert haben und Ihr iPhone angedockt ist). Möglicherweise möchten Sie jedoch die Live-Aktivität deaktivieren, wenn Sie Ihr Apple TV verwenden, um ein unterbrechungsfreies Erlebnis zu gewährleisten. So machen Sie es auf Ihrem iPhone. So deaktivieren Sie Apple TV
Wie implementiert man das Scrollen von Bildern und die Vorschau von Miniaturansichten in Vue?
Aug 18, 2023 pm 01:51 PM
Wie implementiert man das Scrollen von Bildern und die Vorschau von Miniaturansichten in Vue? In Vue-Projekten müssen wir häufig eine große Anzahl von Bildern anzeigen und hoffen, dass Benutzer diese Bilder problemlos durchsuchen und in der Vorschau anzeigen können. In diesem Artikel wird erläutert, wie Vue-Komponenten zum Implementieren von Bildlauf- und Miniaturansichtsvorschaufunktionen verwendet werden. Zuerst müssen wir die entsprechende Vue-Bibliothek installieren und einführen, um das Scrollen von Bildern und die Vorschau von Miniaturansichten zu erleichtern. In diesem Beispiel verwenden wir zur Implementierung die beiden Bibliotheken vue-awesome-swiper und vue-image-preview
