tiny editor

winziger Eduor

Ein winziger HTML -Rich -Texteditor in Vanille JavaScript geschrieben

Ziel

Erstellen Sie eine weniger als 5 KB -Bibliothek (komprimiert), in der ein HTML -Element als reichhaltiger Texteditor in der einfachen alten Vanille -JavaScript verwendet werden kann.

Unterstützung

Wenn Sie diese Bibliothek verwenden und mögen, können Sie meine Open -Source -Projekte gerne unterstützen.

So installieren

 npm install tiny-editor

Oder laden Sie die Bundle -Datei direkt am Ende Ihres HTML -Dokuments.

 <script src="https://unpkg.com/tiny-editor/dist/bundle.js"></script>

Wie man benutzt

1. Verweisen Sie auf die Editorbibliothek in Ihrem HTML -Dokument
2. Fügen Sie dem HTML-Element, das Sie in einen Editor verwandeln möchten, ein data-tiny-editor -Attribut hinzu

So erstellen Sie dynamisch einen Editor

Verwenden Sie das exportierte window.__tinyEditor.transformToEditor() , das als erstes Argument das DOM -Element (normalerweise eine <div> ) annehmen, die Sie in einen Editor verwandeln möchten. Ein Beispiel finden Sie im /public/index.html .

Wie man den formatierten Text extrahiert

Hören Sie sich das input im Editor HTML -Element an.

 document
  .querySelectorAll('[data-tiny-editor]')
  .forEach(editor =>
    editor.addEventListener('input', e => console.log(e.target.innerHTML)
  )
);

Wie man anpassen

Es gibt verschiedene Optionen, mit denen Sie anpassen können, wie der winzige Herausgeber gerendert wird. Standardmäßig sind alle Optionen aktiviert. Sie können eine Option mithilfe von Datenattributen deaktivieren.

Sie können beispielsweise die Schaltfläche FOLD -Format mit dem folgenden Attribut entfernen:

 <div data-tiny-editor data-bold="no"></div>

Optionen

• data-formatblock="no" : Entfernen Sie die Dropdown-Liste der Stile
• data-bold="no" : Entfernen Sie die fetthaltige Taste
• data-italic="no" :: Entfernen Sie die kursive Taste
• data-underline="no" : Entfernen Sie die Unterstreichung der Taste
• data-fontname="no" : Entfernen Sie die Dropdown-Liste der Schriftart
• data-forecolor="no" :: Entfernen Sie die Schaltfläche Textfarbe
• data-justifyleft="no" : Entfernen Sie die linke Schaltfläche Ausrichtung
• data-justifycenter="no" : Entfernen Sie die Taste zur Mitte-Ausrichtung
• data-justifyright="no" : Entfernen Sie die rechte Taste ausgerichtet
• data-insertorderedlist="no" : Entfernen Sie die nummerierte Listen-Taste
• data-insertunorderedlist="no" .
• data-outdent="no" : Entfernen Sie die Taste der Abnahme der Einklage
• data-indent="no" : Entfernen Sie die Einklebungstaste erhöhen
• data-remove-format="no" : Entfernen Sie die Schaltfläche "Formatierung löschen"
• data-autofocus="no" : Autofokus aus dem Editor entfernen

Unterstützte Browser

Moderner Browser (Chrom, Firefox, Edge, ...) werden unterstützt. Tiny Editor arbeitet nicht im Internet Explorer.