{"id":24241,"date":"2021-05-14T12:25:00","date_gmt":"2021-05-14T09:25:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24241"},"modified":"2021-10-18T02:44:19","modified_gmt":"2021-10-17T23:44:19","slug":"trix-ein-open-source-wysiwyg-editor-fuer-websites","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/trix-ein-open-source-wysiwyg-editor-fuer-websites\/","title":{"rendered":"Trix – Ein Open-Source-WYSIWYG-Editor f\u00fcr Websites"},"content":{"rendered":"

Ein Rich-Text-Editor oder WYSIWYG-Editor ist n\u00fctzlich, um beschreibenden Inhalt zu schreiben, der HTML-Elemente und Bilder enth\u00e4lt. Im HTML-Textarea-Tag kann man keine Inhalte mit HTML-Tags schreiben. Aus diesem Grund verwenden die meisten Websites den WYSIWYG-HTML-Editor.<\/p>\n

Trix<\/a> ist ein Open-Source-Rich-Text-Editor von Basecamp. Da es in Basecamp verwendet wird, verwenden es bereits Millionen von Menschen, um ihre Inhalte zu schreiben. In diesem Artikel untersuchen wir, wie Sie den Trix-Editor zu Ihren Webanwendungen hinzuf\u00fcgen.<\/p>\n

Installation<\/h3>\n

Trix hat sein Paket auf GitHub gehostet,<\/a> sodass Benutzer diesen sch\u00f6nen Editor problemlos in ihren Webanwendungen verwenden k\u00f6nnen. F\u00fcr den Einstieg m\u00fcssen Sie zun\u00e4chst JS- und CSS-Dateien von Trix einbinden. Sie k\u00f6nnen diese Dateien direkt im Ordner dist von ihrer GitHub-<\/a> Seite abrufen<\/a>. Oder aber, laden ihr Paket und kopieren trix.js<\/code>und trix.css<\/code>Dateien.<\/p>\n

Au\u00dferdem m\u00fcssen Sie 2 PHP-Dateien und eine weitere JS-Datei erstellen. Wir werden im sp\u00e4teren Teil sehen, warum und wie diese Dateien verwendet werden. Ihre Ordnerstruktur sollte wie folgt aussehen:<\/p>\n

\"Trix<\/a><\/p>\n

Schreiben Sie den folgenden Code, um den Trix-Editor auf Ihrer Webseite hinzuzuf\u00fcgen.<\/p>\n

index.php<\/strong><\/p>\n

<link rel=\"stylesheet\" href=\"css\/trix.css\">\n<script src=\"js\/trix.js\"><\/script>\n<script src=\"js\/attachments.js\"><\/script>\n<form method=\"post\">\n\u00a0\u00a0\u00a0\u00a0<input id=\"x\" type=\"hidden\" name=\"content\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<trix-editor input=\"x\"><\/trix-editor>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form><\/code><\/pre>\n
Im obigen Code haben wir CSS- und JS-Dateien direkt hinzugef\u00fcgt. Nat\u00fcrlich sollten Sie Ihre Framework-\/CMS-Richtlinien befolgen, um diese Dateien einzubinden.<\/p>\n
Der Trix-Editor f\u00fcgt alle geschriebenen Inhalte an das versteckte Feld an, das wir oben hinzugef\u00fcgt haben. Und wenn Sie das Formular absenden, sollten Sie mit dem versteckten Feld fortfahren, um den Inhalt vom Editor zu erhalten. Grunds\u00e4tzlich erhalten Sie die Inhalte des Trix Editors serverseitig mit:<\/p>\n
<?php\necho $_POST['content']; \/\/here 'content' is the name given to hidden field<\/code><\/pre>\n
Auf die gleiche Weise m\u00f6chten Sie den Editor mit dem Inhalt vorausf\u00fcllen und dann den Inhalt in den Wertattributen des ausgeblendeten Felds \u00fcbergeben. Der Trix-Editor f\u00fcllt automatisch Inhalte aus einem versteckten Element.<\/p>\n
Als n\u00e4chstes f\u00fchren Sie diese Datei in Ihrem Browser aus und Sie sollten Ihren WYSIWYG-Editor auf der Seite sehen.<\/p>\n
\"Trix<\/a><\/p>\n
Bild im Trix WYSIWYG-Editor hochladen<\/h3>\n
In der GitHub-Dokumentation erw\u00e4hnten sie das Speichern angeh\u00e4ngter Dateien.<\/p>\n
Trix \u00fcbernimmt automatisch Dateien, die in einen Editor gezogen oder eingef\u00fcgt werden, und f\u00fcgt sie als Anh\u00e4nge in das Dokument ein. Jeder Anhang gilt als ausstehend, bis Sie ihn remote speichern und Trix eine permanente URL zur Verf\u00fcgung stellen.<\/p>\n
Das bedeutet, dass Sie ein Bild aus dem Editor nehmen, an den Server senden, Bilder auf den Server hochladen und die Bild-URL zur\u00fcckgeben m\u00fcssen. Um diesen Prozess durchzuf\u00fchren, werden wir in den n\u00e4chsten Schritten JS- und PHP-Code schreiben.<\/p>\n
Beginnen wir zun\u00e4chst mit JS-Code. Sie haben eine attachments.js<\/code>Datei im Verzeichnis ‚js‘ erstellt. Diese JS-Datei enth\u00e4lt den folgenden Code.<\/p>\n
(function() {\n\u00a0\u00a0\u00a0\u00a0var HOST = \"YOUR_DOMAIN_URL\/upload.php\"\n\u00a0\n\u00a0\u00a0\u00a0\u00a0addEventListener(\"trix-attachment-add\", function(event) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (event.attachment.file) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uploadFileAttachment(event.attachment)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0})\n\u00a0\n\u00a0\u00a0\u00a0\u00a0function uploadFileAttachment(attachment) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uploadFile(attachment.file, setProgress, setAttributes)\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function setProgress(progress) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0attachment.setUploadProgress(progress)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function setAttributes(attributes) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0attachment.setAttributes(attributes)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0function uploadFile(file, progressCallback, successCallback) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var formData = createFormData(file)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var xhr = new XMLHttpRequest()\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.open(\"POST\", HOST, true)\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.upload.addEventListener(\"progress\", function(event) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var progress = event.loaded \/ event.total * 100\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0progressCallback(progress)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.addEventListener(\"load\", function(event) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var attributes = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: xhr.responseText,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0href: xhr.responseText + \"?content-disposition=attachment\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0successCallback(attributes)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.send(formData)\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0function createFormData(file) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = new FormData()\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data.append(\"Content-Type\", file.type)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data.append(\"file\", file)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return data\n\u00a0\u00a0\u00a0\u00a0}\n})();<\/code><\/pre>\n
Ersetzen Sie den Platzhalter "YOUR_DOMAIN_URL" durch Ihre tats\u00e4chliche URL. Dieser Code h\u00f6rt auf ein trix-attachment-add<\/code>Ereignis und sendet einen Anhang an die upload.php<\/code>Datei. Wenn eine Antwort vom Server zur\u00fcckgegeben wird, wird eine permanente Bild-URL in den Editor-Attributen festgelegt.<\/p>\n
Schreiben Sie abschlie\u00dfend den Code f\u00fcr das Hochladen des Bildes in die upload.php<\/code>Datei.<\/p>\n
<?php\nif (!file_exists('uploads')) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0mkdir('uploads', 0777);\n}\n\u00a0\nmove_uploaded_file($_FILES['file']['tmp_name'], 'uploads\/'.$_FILES['file']['name']);\n\u00a0\necho \"YOUR_DOMAIN_URL\/uploads\/\".$_FILES['file']['name'];<\/code><\/pre>\n
Wir hoffen, Sie verstehen, wie Sie den Trix WYSIWYG-Editor mit PHP auf Ihrer Website hinzuf\u00fcgen. Wir w\u00fcrden gerne Ihre Meinung im Kommentarbereich unten h\u00f6ren.<\/p>\n