{"id":28456,"date":"2021-05-23T15:02:00","date_gmt":"2021-05-23T12:02:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28456"},"modified":"2021-10-17T04:42:00","modified_gmt":"2021-10-17T01:42:00","slug":"topp-3-gratis-rich-text-editor-for-webbapplikation","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/topp-3-gratis-rich-text-editor-for-webbapplikation\/","title":{"rendered":"Topp 3 gratis Rich Text Editor f\u00f6r webbapplikation"},"content":{"rendered":"

Letar du efter en gratis rich text-redigerare f\u00f6r din webbapplikation? En WYSIWYG-redigerare (vad du ser \u00e4r vad du f\u00e5r) l\u00e5ter dig skriva in beskrivande inneh\u00e5ll tillsammans med HTML-element. I den h\u00e4r artikeln diskuterar vi de tre b\u00e4sta fria textredigerarna som \u00e4r popul\u00e4ra och enkla att installera.<\/p>\n

Det finns flera WYSIWYG-redakt\u00f6rer tillg\u00e4ngliga p\u00e5 Internet. Jag har f\u00f6rs\u00f6kt n\u00e5gra av redakt\u00f6rerna och plockat upp en 3 b\u00e4sta gratis WYSIWYG HTML-redigerare som \u00e4r – CKEditor, TinyMCE och Trix<\/strong>.<\/p>\n

Varf\u00f6r beh\u00f6ver du Rich Text Editor?<\/h3>\n

Man kan fr\u00e5ga varf\u00f6r man ska anv\u00e4nda rich text editor? Svaret \u00e4r enkelt. I textomr\u00e5det \u00e4r det inte l\u00e4tt och anv\u00e4ndarv\u00e4nligt att skriva in stora delar av inneh\u00e5llet. Det \u00e4r mycket sv\u00e5rt att ange olika typer av HTML-element i textomr\u00e5det. Inpackning av inneh\u00e5llet i element och bibeh\u00e5llande av hierarkin \u00e4r sv\u00e5rt i textomr\u00e5det.<\/p>\n

F\u00f6r att f\u00f6renkla detta problem har vi m\u00f6jlighet att anv\u00e4nda en rich text-editor. Dessa WYSIWYG-redakt\u00f6rer ger ett bra anv\u00e4ndargr\u00e4nssnitt och en anv\u00e4ndarupplevelse ist\u00e4llet f\u00f6r textomr\u00e5det.<\/p>\n

CKEditor – webbtextredigerare<\/h3>\n

CKEditor<\/a> \u00e4r en popul\u00e4r och ofta anv\u00e4nda fri rich text-redigerare. Denna redakt\u00f6r \u00e4r utformad f\u00f6r att f\u00f6renkla skapandet av webbplatsinneh\u00e5ll.<\/p>\n

F\u00f6r att anv\u00e4nda CKEditor m\u00e5ste du f\u00f6rst inkludera dess JS-fil. De har tillhandah\u00e5llit tre typer av paket – Basic, Standard, Full. Du kan v\u00e4lja vilket paket som helst baserat p\u00e5 kravet. Olika JS-filer \u00e4r tillg\u00e4ngliga f\u00f6r varje paket.<\/p>\n

H\u00e4r \u00e4r l\u00e4nken f\u00f6r CKEditor-paket <\/a>http:\/\/ckeditor.com\/download<\/a><\/p>\n

P\u00e5 ovanst\u00e5ende sida kan man v\u00e4lja vilket paket som helst och f\u00e5 en JS-k\u00e4llv\u00e4g till ett paket.<\/p>\n

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

Till exempel anv\u00e4nder jag standardpaketet s\u00e5 min kod blir som f\u00f6ljer.<\/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
Ovanst\u00e5ende kod genererar en redigerare som ser ut som sk\u00e4rmdumpen nedan.<\/p>\n
\"Topp<\/a><\/p>\n
TinyMCE – Advanced WYSIWYG Editor<\/h3>\n
TinyMCE<\/a> \u00e4r en av de mest anv\u00e4nda open source-redigerarna. V\u00e4lk\u00e4nda varum\u00e4rken anv\u00e4nder denna redakt\u00f6r i sin k\u00e4rnutveckling.<\/p>\n
Installation av TinyMCE-redigeraren \u00e4r super enkel. F\u00f6ljande kod ers\u00e4tter textarea med TinyMCE WYSIWYG-redigeraren.<\/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
Nedan visas en sk\u00e4rmdump av en redigerare som genereras med hj\u00e4lp av ovanst\u00e5ende kod.<\/p>\n
\"Topp<\/a><\/p>\n
Denna redakt\u00f6r tillhandah\u00e5ller en rik upps\u00e4ttning verktygsf\u00e4lt. Anv\u00e4ndaren kan l\u00e4gga till funktioner (plugins) som k\u00e4nslor, ankare, helsk\u00e4rmsl\u00e4ge, bild, utskrift, stavningskontroll, tabell, ordr\u00e4kning etc. i verktygsf\u00e4ltet i en redigerare. Du f\u00e5r en fullst\u00e4ndig lista \u00f6ver alla tillg\u00e4ngliga verktygsfunktionsfunktioner i deras dokumentation<\/a>.<\/p>\n
Trix – en WYSIWYG-redigerare med \u00f6ppen k\u00e4llkod<\/h3>\n
Trix<\/a> \u00e4r en annan \u00f6ppen k\u00e4llkod rich text editor fr\u00e5n Basecamp. Eftersom denna redakt\u00f6r anv\u00e4nds i Basecamp anv\u00e4nder miljontals anv\u00e4ndare den redan. Jag skrev en separat artikel om Trix-redakt\u00f6ren, s\u00e5 kolla in den h\u00e4r artikeln<\/a> som f\u00f6rklarar hur du anv\u00e4nder Trix-editor p\u00e5 dina webbplatser.<\/p>\n
Jag hoppas att du har en grundl\u00e4ggande f\u00f6rst\u00e5else f\u00f6r de popul\u00e4ra fria rich text-redigerarna. Dela dina tankar och f\u00f6rslag i en kommentarsektion nedan.<\/p>\n
relaterade artiklar<\/h4>\n