Topp 3 gratis Rich Text Editor för webbapplikation

Senaste uppdateringen okt 17, 2021

Innehåll

Trix – en WYSIWYG-redigerare med öppen källkod

Letar du efter en gratis rich text-redigerare för din webbapplikation? En WYSIWYG-redigerare (vad du ser är vad du får) låter dig skriva in beskrivande innehåll tillsammans med HTML-element. I den här artikeln diskuterar vi de tre bästa fria textredigerarna som är populära och enkla att installera.

Det finns flera WYSIWYG-redaktörer tillgängliga på Internet. Jag har försökt några av redaktörerna och plockat upp en 3 bästa gratis WYSIWYG HTML-redigerare som är – CKEditor, TinyMCE och Trix.

Varför behöver du Rich Text Editor?

Man kan fråga varför man ska använda rich text editor? Svaret är enkelt. I textområdet är det inte lätt och användarvänligt att skriva in stora delar av innehållet. Det är mycket svårt att ange olika typer av HTML-element i textområdet. Inpackning av innehållet i element och bibehållande av hierarkin är svårt i textområdet.

För att förenkla detta problem har vi möjlighet att använda en rich text-editor. Dessa WYSIWYG-redaktörer ger ett bra användargränssnitt och en användarupplevelse istället för textområdet.

CKEditor – webbtextredigerare

CKEditor är en populär och ofta använda fri rich text-redigerare. Denna redaktör är utformad för att förenkla skapandet av webbplatsinnehåll.

För att använda CKEditor måste du först inkludera dess JS-fil. De har tillhandahållit tre typer av paket – Basic, Standard, Full. Du kan välja vilket paket som helst baserat på kravet. Olika JS-filer är tillgängliga för varje paket.

Här är länken för CKEditor-paket http://ckeditor.com/download

På ovanstående sida kan man välja vilket paket som helst och få en JS-källväg till ett paket.

Till exempel använder jag standardpaketet så min kod blir som följer.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CKEditor</title>
        <script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
    </head>
    <body>
        <textarea name="editor1"></textarea>
        <script>
            CKEDITOR.replace( 'editor1' );
        </script>
    </body>
</html>

Ovanstående kod genererar en redigerare som ser ut som skärmdumpen nedan.

TinyMCE – Advanced WYSIWYG Editor

TinyMCE är en av de mest använda open source-redigerarna. Välkända varumärken använder denna redaktör i sin kärnutveckling.

Installation av TinyMCE-redigeraren är super enkel. Följande kod ersätter textarea med TinyMCE WYSIWYG-redigeraren.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
  <script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
  <textarea>Next, get a free Tiny Cloud API key!</textarea>
</body>
</html>

Nedan visas en skärmdump av en redigerare som genereras med hjälp av ovanstående kod.

Denna redaktör tillhandahåller en rik uppsättning verktygsfält. Användaren kan lägga till funktioner (plugins) som känslor, ankare, helskärmsläge, bild, utskrift, stavningskontroll, tabell, ordräkning etc. i verktygsfältet i en redigerare. Du får en fullständig lista över alla tillgängliga verktygsfunktionsfunktioner i deras dokumentation.

Trix – en WYSIWYG-redigerare med öppen källkod

Trix är en annan öppen källkod rich text editor från Basecamp. Eftersom denna redaktör används i Basecamp använder miljontals användare den redan. Jag skrev en separat artikel om Trix-redaktören, så kolla in den här artikeln som förklarar hur du använder Trix-editor på dina webbplatser.

Jag hoppas att du har en grundläggande förståelse för de populära fria rich text-redigerarna. Dela dina tankar och förslag i en kommentarsektion nedan.

relaterade artiklar

Inspelningskälla: artisansweb.net