MediumEditor - Inline-Textbearbeitungssymbolleiste für das Web

Jeder weiß Medium.com und ihre beliebte Blogging-Plattform. Sie Viele Ideen in der Designwelt neu definiert und Sie können viele Tutorials finden, die Ihnen beibringen, wie sie ihre Designs klonen.

Ein Werkzeug, das Ihnen gefallen könnte, ist das MediumEditor-Plugin basierend auf reinem JavaScript. Es lässt dich Fügen Sie einen benutzerdefinierten Inline-Texteditor hinzu auf jede Seite im selben Design wie die Medium Blog-Site. So können Sie Leser fett, kursiv, Links, Kopfzeilen und so ziemlich alles andere hinzufügen, mit einer einfachen visuellen Symbolleiste.

Beachten Sie, dass dieses Projekt in keiner Weise mit Medium verbunden ist kein offizielles Plugin.

Es wurde von einem Fan der Website und jemandem erstellt, der den Medium-Designstil liebt. Sie können Erfahren Sie mehr über das Setup auf GitHub die speichert den gesamten Code, völlig frei zur Verwendung.

Der Editor funktioniert in allen gängigen Browsern, einschließlich der aktuellen Version von Microsoft Edge und IE. Es unterstützt sogar ältere Versionen von Internet Explorer, die auf den IE7 zurückgehen. Verrückt!

Die Installation ist ein Kinderspiel, wo Sie können ziehen Sie alle Dateien direkt über npm oder Bower oder sogar Verwenden Sie eine kostenlose Online-CDN wie JSDelivr.

Dann wirst du eindd sowohl die CSS- als auch die JavaScript-Datei in der Kopfzeile Ihrer Website. Kinderleicht.

Von dort aus Sie rufen Sie den Editor an mit einer einzigen Codezeile:

 var editor = neuer MediumEditor ('. editable'); 

Sie können eine Liste von Seitenelementen übergeben das sollte nur mit dem editor funktionieren, oder du kannst Lass es über die ganze Seite laufen.

Die praktischste Verwendung dieses Plugins ist wahrscheinlich Erstellen Sie einen Typ von WYSIWYG-Editor für eine Web-App.

Es übernimmt nicht das Weiterleiten von Daten zwischen dem Server und dem Client, so müssen Sie diese Logik selbst erstellen. Dennoch ist dieses Plugin so viel einfacher, als von vorne zu beginnen.

Wenn Sie ganz nach unten auf der MediumEditor-Demoseite blättern, finden Sie eine Liste der Erweiterungen Sie können auch testen. Diese schließen ein vollständige Markdown-Bearbeitung, zusammen mit Mittlere Tasten und andere Schnittstellenfunktionen.

Dieses Plugin wird allen Fans von Medium empfohlen, die dies möchten einige ihrer UX replizieren in einem anderen Projekt.