{"id":24678,"date":"2021-05-23T15:26:00","date_gmt":"2021-05-23T12:26:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24678"},"modified":"2021-10-18T02:39:42","modified_gmt":"2021-10-17T23:39:42","slug":"top-3-der-kostenlosen-rich-text-editoren-fuer-webanwendungen","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/top-3-der-kostenlosen-rich-text-editoren-fuer-webanwendungen\/","title":{"rendered":"Top 3 der kostenlosen Rich-Text-Editoren f\u00fcr Webanwendungen"},"content":{"rendered":"

Sie suchen einen kostenlosen Rich-Text-Editor f\u00fcr Ihre Webanwendung? Mit einem WYSIWYG-Editor (What You See Is What You Get) k\u00f6nnen Sie neben HTML-Elementen auch beschreibende Inhalte eingeben. In diesem Artikel besprechen wir die Top 3 der kostenlosen Rich-Text-Editoren, die beliebt und einfach zu installieren sind.<\/p>\n

Im Internet stehen mehrere WYSIWYG-Editoren zur Verf\u00fcgung. Ich habe einige der Editoren ausprobiert und einen der 3 besten kostenlosen WYSIWYG-HTML-Editoren ausgew\u00e4hlt, n\u00e4mlich CKEditor, TinyMCE und Trix<\/strong>.<\/p>\n

Warum brauchen Sie einen Rich-Text-Editor?<\/h3>\n

Man kann sich fragen, warum man den Rich-Text-Editor verwenden sollte. Die Antwort ist einfach. Im Textbereich ist es nicht einfach und benutzerfreundlich, gro\u00dfe Inhalte einzugeben. Es ist sehr schwierig, verschiedene Arten von HTML-Elementen in den Textbereich einzugeben. Das Umschlie\u00dfen des Inhalts in Elemente und das Beibehalten ihrer Hierarchie ist in textarea schwierig.<\/p>\n

Um dieses Problem zu vereinfachen, haben wir die M\u00f6glichkeit, einen Rich-Text-Editor zu verwenden. Diese WYSIWYG-Editoren bieten eine gute Benutzeroberfl\u00e4che und eine Benutzererfahrung anstelle von textarea.<\/p>\n

CKEditor \u2013 Web-Texteditor<\/h3>\n

CKEditor<\/a> ist ein beliebter und h\u00e4ufig verwendeter kostenloser Rich-Text-Editor. Dieser Editor wurde entwickelt, um die Erstellung von Website-Inhalten zu vereinfachen.<\/p>\n

Um den CKEditor zu verwenden, m\u00fcssen Sie zuerst seine JS-Datei einbinden. Sie haben 3 Arten von Paketen bereitgestellt \u2013 Basic, Standard, Full. Sie k\u00f6nnen je nach Anforderung eines der Pakete ausw\u00e4hlen. F\u00fcr jedes Paket ist eine andere JS-Datei verf\u00fcgbar.<\/p>\n

Hier ist der Link f\u00fcr CKEditor-Pakete <\/a>http:\/\/ckeditor.com\/download<\/a><\/p>\n

Auf der obigen Seite kann man ein beliebiges Paket ausw\u00e4hlen und einen JS-Quellpfad eines Pakets erhalten.<\/p>\n

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

Zum Beispiel verwende ich das Standardpaket, sodass mein Code wie folgt aussieht.<\/p>\n

<!DOCTYPE html>\n<html>\n\u00a0\u00a0\u00a0\u00a0<head>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<meta charset=\"utf-8\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<title>CKEditor<\/title>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<script src=\"\/\/cdn.ckeditor.com\/4.14.1\/standard\/ckeditor.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<\/head>\n\u00a0\u00a0\u00a0\u00a0<body>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<textarea name=\"editor1\"><\/textarea>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<script>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0CKEDITOR.replace( 'editor1' );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/script>\n\u00a0\u00a0\u00a0\u00a0<\/body>\n<\/html><\/code><\/pre>\n
Der obige Code generiert einen Editor, der wie im Screenshot unten aussieht.<\/p>\n
\"Top<\/a><\/p>\n
TinyMCE \u2013 Erweiterter WYSIWYG-Editor<\/h3>\n
TinyMCE<\/a> ist einer der am h\u00e4ufigsten verwendeten Open-Source-Editoren. Namhafte Marken verwenden diesen Editor in ihrer Kernentwicklung.<\/p>\n
Die Installation des TinyMCE-Editors ist super einfach. Der folgende Code ersetzt textarea durch den TinyMCE WYSIWYG-Editor.<\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n\u00a0\u00a0<script src=\"https:\/\/cdn.tiny.cloud\/1\/no-api-key\/tinymce\/5\/tinymce.min.js\" referrerpolicy=\"origin\"><\/script>\n\u00a0\u00a0<script>tinymce.init({ selector:'textarea' });<\/script>\n<\/head>\n<body>\n\u00a0\u00a0<textarea>Next, get a free Tiny Cloud API key!<\/textarea>\n<\/body>\n<\/html><\/code><\/pre>\n
Unten ist der Screenshot eines Editors, der mit dem obigen Code generiert wird.<\/p>\n
\"Top<\/a><\/p>\n
Dieser Editor bietet eine Vielzahl von Symbolleisten. Der Benutzer kann Funktionen (Plugins) wie Emotionen, Anker, Vollbildmodus, Bild, Druck, Rechtschreibpr\u00fcfung, Tabelle, Wortz\u00e4hlung usw. in der Symbolleiste eines Editors hinzuf\u00fcgen. Sie erhalten die vollst\u00e4ndige Liste aller verf\u00fcgbaren Symbolleistenfunktionen in deren Dokumentation<\/a>.<\/p>\n
Trix \u2013 ein Open-Source-WYSIWYG-Editor<\/h3>\n
Trix<\/a> ist ein weiterer Open-Source-Rich-Text-Editor von Basecamp. Da dieser Editor in Basecamp verwendet wird, verwenden ihn bereits Millionen von Benutzern. Ich habe einen separaten Artikel \u00fcber den Trix-Editor geschrieben, also lesen Sie bitte diesen Artikel,<\/a> der erkl\u00e4rt, wie Sie den Trix-Editor auf Ihren Websites verwenden.<\/p>\n
Ich hoffe, Sie haben ein grundlegendes Verst\u00e4ndnis der beliebten kostenlosen Rich-Text-Editoren erlangt. Bitte teilen Sie Ihre Gedanken und Vorschl\u00e4ge in einem Kommentarbereich unten mit.<\/p>\n
Zum Thema passende Artikel<\/h4>\n