Heim Web-Frontend js-Tutorial Markdown-Editor mit reiner Frontend-Technologie für Echtzeitvorschau

Markdown-Editor mit reiner Frontend-Technologie für Echtzeitvorschau

Mar 10, 2018 pm 03:39 PM
markdown 实时 预览

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)


Markdown-Editor mit reiner Frontend-Technologie für Echtzeitvorschau

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>
Nach dem Login kopieren

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=&#39;UTF-8&#39;>
        <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" />
                <!--略-->
Nach dem Login kopieren

5 Initialisierungs-Plug-in

(Zuerst Bearbeitungsbereich hinzufügen und Ortsvorwahl anzeigen)

<!--略-->#mdeditor,#preview,#panel-editor,#panel-preview{
                height: 100%;
                width: 100%;
            }        </style>
    </head>
    <body>
        <div id=&#39;toolbar&#39;></div>
        <div id=&#39;container&#39;><div id=&#39;editor-column&#39; class=&#39;pull-left&#39;>
                <div id=&#39;panel-editor&#39;>
                                        <!--编辑区-->
                    <div class="editor-content" id="mdeditor" ></div>
                </div> 
            </div>
            <div id=&#39;preview-column&#39; class=&#39;pull-right&#39;>
                <div id=&#39;panel-preview&#39;>
                                        <!--显示区-->
                    <div id="preview" class="markdown-body"></div>
                </div>
            </div> 
 <!--略-->
Nach dem Login kopieren

( Zuerst Initialisierungscode hinzufügen)

<!--略--><script>
            var acen_edit = ace.edit(&#39;mdeditor&#39;); 
            acen_edit.setTheme(&#39;ace/theme/chrome&#39;);
            acen_edit.getSession().setMode(&#39;ace/mode/markdown&#39;);
            acen_edit.renderer.setShowPrintMargin(false);
            $("#mdeditor").keyup(function() {
                $("#preview").html(marked(acen_edit.getValue()));
            });        </script>
    </body></html>
Nach dem Login kopieren


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=&#39;toolbar&#39;>
            <button onclick="insertText(&#39;**?**&#39;)">加粗</button>
            <button onclick="insertText(&#39;_?_&#39;)">斜体</button>
            <button onclick="insertText(&#39;>&#39;)">引用</button>
            .....        </div>
Nach dem Login kopieren

Der vierte Schritt ist die ace.js-API zum Implementieren der Editoreinstellung Funktion:

<div id=&#39;toolbar&#39;>
           <button onclick="insertText(&#39;**?**&#39;)">加粗</button>
           <button onclick="insertText(&#39;_?_&#39;)">斜体</button>
           <button onclick="insertText(&#39;>&#39;)">引用</button>
Nach dem Login kopieren

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!

Verwandte Lektüre:
<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);
Nach dem Login kopieren

Eine Website, die NodeJS zur Einführung verwendet

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Die Kombination von Java und WebSocket: So erreichen Sie Echtzeit-Videostreaming 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

Wie Vue3 Markdown analysiert und Code-Hervorhebung implementiert 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

Verwendung von C++ zur Implementierung von Echtzeit-Audio- und Videoverarbeitungsfunktionen eingebetteter Systeme 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 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

Aufbau eines Echtzeit-Übersetzungstools auf Basis von JavaScript 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

So aktivieren Sie Live-Untertitel sofort in Windows 11 So aktivieren Sie Live-Untertitel sofort in Windows 11 Jun 27, 2023 am 08:33 AM

So aktivieren Sie Live-Untertitel sofort in Windows 11 1. Drücken Sie Strg+L auf Ihrer Tastatur 2. Klicken Sie auf „Zustimmen“ 3. Es erscheint ein Popup mit der Meldung „Bereit zum Hinzufügen von Untertiteln in Englisch (US)“ (abhängig von Ihrer bevorzugten Sprache) 4. Darüber hinaus Können Sie Obszönitäten filtern, indem Sie auf die Zahnradschaltfläche klicken? Präferenz? Filtern von Swear Verwandte Artikel So beheben Sie den Aktivierungsfehlercode 0xc004f069 in Windows Server Der Aktivierungsprozess unter Windows nimmt manchmal eine plötzliche Wendung und zeigt eine Fehlermeldung mit diesem Fehlercode 0xc004f069 an. Obwohl der Aktivierungsprozess online erfolgt, kann dieses Problem bei einigen älteren Systemen mit Windows Server auftreten. Bestehen Sie diese vorläufigen Prüfungen, wenn diese Prüfungen nicht erfolgreich sind

Erstellen Sie einen Echtzeit-Chatroom basierend auf JavaScript Erstellen Sie einen Echtzeit-Chatroom basierend auf JavaScript Aug 10, 2023 pm 11:18 PM

Aufbau eines Echtzeit-Chatrooms auf Basis von JavaScript Mit der rasanten Entwicklung des Internets legen die Menschen immer mehr Wert auf Instant Messaging und interaktive Echtzeiterlebnisse. Als gängiges Instant-Messaging-Tool sind Echtzeit-Chatrooms sowohl für Privatpersonen als auch für Unternehmen sehr wichtig. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript einen einfachen Echtzeit-Chatroom erstellen, und entsprechende Codebeispiele bereitgestellt. Wir benötigen zunächst eine Frontend-Seite als UI-Schnittstelle des Chatrooms. Hier ist ein Beispiel für eine einfache HTML-Struktur: &lt;!DOCTYPE

Erstellen Sie eine Echtzeit-Börsenkursanzeige basierend auf JavaScript 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

See all articles