Zum Hauptinhalt springen

Erste Schritte

Dieses klare und umfassende Tutorial führt Sie durch die Schritte, die erforderlich sind, um einen voll funktionsfähigen RichText auf einer Seite einzurichten.

DHTMLX RichText WYSIWYG-Editor auf einer Webseite

Schritt 1. Quelldateien einbinden​

Erstellen Sie zunächst eine HTML-Datei und nennen Sie sie index.html. Binden Sie dann die RichText-Quelldateien in die erstellte Datei ein.

Es werden zwei Dateien benötigt:

  • die JS-Datei von RichText
  • die CSS-Datei von RichText
index.html
<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with RichText</title>
        <script src="./codebase/richtext.js"></script>   
        <link href="./codebase/richtext.css" rel="stylesheet">
    </head>
    <body>
        <script>
        // Ihr Code kommt hierher
        </script>
    </body>
</html>

RichText über npm oder yarn installieren​

Sie können JavaScript RichText mithilfe des Paketmanagers yarn oder npm in Ihr Projekt importieren.

Testversion von RichText über npm oder yarn installieren​

Info

Wenn Sie die Testversion von RichText verwenden möchten, laden Sie das RichText-Testpaket herunter und befolgen Sie die im README-File beschriebenen Schritte. Beachten Sie, dass die Testversion von RichText nur 30 Tage lang verfügbar ist.

PRO-Version von RichText über npm oder yarn installieren​

Info

Sie können direkt im Kundenbereich auf das private DHTMLX-npm zugreifen, indem Sie Ihren Login und Ihr Passwort für npm generieren. Eine detaillierte Installationsanleitung ist ebenfalls dort verfügbar. Bitte beachten Sie, dass der Zugang zum privaten npm nur aktiv ist, solange Ihre proprietäre RichText-Lizenz gültig ist.

Schritt 2. RichText erstellen​

Jetzt können Sie RichText zur Seite hinzufügen. Erstellen Sie zunächst den <div>-Container für RichText. Gehen Sie dazu wie folgt vor:

  • Definieren Sie einen DIV-Container in der Datei index.html
  • Initialisieren Sie RichText mithilfe des Konstruktors richtext.Richtext

Der Konstruktor nimmt als Parameter einen gültigen CSS-Selektor des HTML-Containers, in den RichText eingefügt wird, sowie die entsprechenden Konfigurationsobjekte entgegen.

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with RichText</title>
        <script src="./codebase/richtext.js"></script>   
        <link href="./codebase/richtext.css" rel="stylesheet">  
    </head>
    <body>
        <div id="root"></div>

        <script>
            const editor = new richtext.Richtext("#root", {
                // Konfigurationseigenschaften
            });
        </script>
    </body>
</html>

Schritt 3. RichText konfigurieren​

Als Nächstes können Sie Konfigurationseigenschaften festlegen, die die RichText-Komponente bei der Initialisierung haben soll.

Um mit RichText arbeiten zu können, müssen Sie zunächst die initialen Daten für den Editor über die Eigenschaft value bereitstellen. Darüber hinaus können Sie die menubar aktivieren, die toolbar anpassen, den Vollbildmodus und den Layout-Modus festlegen, eine neue locale sowie Standardstile anwenden.

const editor = new richtext.Richtext("#root", {
    menubar: true,
    toolbar: false,
    fullscreenMode: true,
    layoutMode: "document",
    locale: richtext.locales.cn
    defaultStyles: {
        h4: {
            "font-family": "Roboto"
        },
        // weitere Einstellungen
    }
});

Wie geht es weiter​

Das war es schon. Nur drei einfache Schritte, und Sie verfügen über ein praktisches Werkzeug zur Bearbeitung von Inhalten. Jetzt können Sie mit Ihren Inhalten arbeiten oder die Welt von JavaScript RichText weiter erkunden.

Need more help?Contact Support