{"id":24669,"date":"2021-05-23T15:01:00","date_gmt":"2021-05-23T12:01:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24669"},"modified":"2021-10-17T20:43:25","modified_gmt":"2021-10-17T17:43:25","slug":"suosituimmat-3-ilmaista-rich-text-editor-sovellusta-verkkosovelluksille","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/suosituimmat-3-ilmaista-rich-text-editor-sovellusta-verkkosovelluksille\/","title":{"rendered":"Suosituimmat 3 ilmaista Rich Text Editor -sovellusta verkkosovelluksille"},"content":{"rendered":"

Etsitk\u00f6 ilmaista rich text editoria verkkosovelluksellesi? WYSIWYG (mit\u00e4 n\u00e4et on mit\u00e4 saat) -editorin avulla voit kirjoittaa kuvailevaa sis\u00e4lt\u00f6\u00e4 HTML-elementtien kanssa. T\u00e4ss\u00e4 artikkelissa keskustelemme kolmesta parhaasta ilmaisen rikkaan tekstin muokkausohjelmasta, jotka ovat suosittuja ja helppo asentaa.<\/p>\n

Internetiss\u00e4 on useita WYSIWYG-toimittajia. Olen kokeillut joitain toimittajia ja noutanut 3 parasta ilmaista WYSIWYG HTML -editoria, jotka ovat – CKEditor, TinyMCE ja Trix<\/strong>.<\/p>\n

Miksi tarvitset Rich Text Editoria?<\/h3>\n

Voidaan kysy\u00e4, miksi rikastekstieditoria tulisi k\u00e4ytt\u00e4\u00e4? Vastaus on yksinkertainen. Tekstialueella ei ole helppoa ja k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llist\u00e4 kirjoittaa suuria sis\u00e4lt\u00f6j\u00e4. Erilaisten HTML-elementtien sy\u00f6tt\u00e4minen teksti-alueelle on hyvin vaikeaa. Sis\u00e4ll\u00f6n k\u00e4\u00e4riminen elementtien sis\u00e4lle ja niiden hierarkian yll\u00e4pit\u00e4minen on vaikeaa tekstialueella.<\/p>\n

T\u00e4m\u00e4n ongelman yksinkertaistamiseksi meill\u00e4 on mahdollisuus k\u00e4ytt\u00e4\u00e4 Rich Text Editoria. N\u00e4m\u00e4 WYSIWYG-editorit tarjoavat hyv\u00e4n k\u00e4ytt\u00f6liittym\u00e4n ja k\u00e4ytt\u00f6kokemuksen tekstialueen sijaan.<\/p>\n

CKEditor – Web-tekstieditori<\/h3>\n

CKEditor<\/a> on suosittu ja yleisesti k\u00e4ytetty ilmainen rikkaiden tekstien muokkausohjelma. T\u00e4m\u00e4 editori on suunniteltu yksinkertaistamaan verkkosivustojen sis\u00e4ll\u00f6n luomista.<\/p>\n

Jotta voit k\u00e4ytt\u00e4\u00e4 CKEditoria, sinun on ensin sis\u00e4llytett\u00e4v\u00e4 sen JS-tiedosto. He ovat toimittaneet 3 erilaista pakettia – Basic, Standard, Full. Voit valita jommankumman paketin vaatimuksen perusteella. Jokaiselle paketille on saatavana eri JS-tiedosto.<\/p>\n

T\u00e4ss\u00e4 on linkki CKEditor-paketteihin <\/a>http:\/\/ckeditor.com\/download<\/a><\/p>\n

Yll\u00e4 olevalla sivulla voi valita mink\u00e4 tahansa paketin ja saada paketin JS-l\u00e4hdepolun.<\/p>\n

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

K\u00e4yt\u00e4n esimerkiksi vakiopakettia, joten koodini on seuraava.<\/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
Yll\u00e4 oleva koodi luo editorin, joka n\u00e4ytt\u00e4\u00e4 alla olevalta kuvakaappaukselta.<\/p>\n
\"Suosituimmat<\/a><\/p>\n
TinyMCE – Edistynyt WYSIWYG-editori<\/h3>\n
TinyMCE<\/a> on yksi k\u00e4ytetyimmist\u00e4 avoimen l\u00e4hdekoodin editorista. Tunnetut tuotemerkit k\u00e4ytt\u00e4v\u00e4t t\u00e4t\u00e4 editoria ydinkehityksess\u00e4\u00e4n.<\/p>\n
TinyMCE-editorin asennus on eritt\u00e4in helppoa. Seuraava koodi korvaa tekstialueen TinyMCE WYSIWYG -editorilla.<\/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
Alla on kuvakaappaus editorista, joka on luotu k\u00e4ytt\u00e4m\u00e4ll\u00e4 yll\u00e4 olevaa koodia.<\/p>\n
\"Suosituimmat<\/a><\/p>\n
T\u00e4m\u00e4 editori tarjoaa runsaan joukon ty\u00f6kalurivej\u00e4. K\u00e4ytt\u00e4j\u00e4 voi lis\u00e4t\u00e4 ominaisuuksia (laajennuksia), kuten tunteet, ankkuri, koko n\u00e4yt\u00f6n tila, kuva, tulosteet, oikeinkirjoituksen tarkistus, taulukko, sanam\u00e4\u00e4r\u00e4 jne. Editorin ty\u00f6kalupalkkiin. Saat t\u00e4ydellisen luettelon kaikista k\u00e4ytett\u00e4viss\u00e4 olevista ty\u00f6kalupalkin ominaisuuksista heid\u00e4n dokumentaatiostaan<\/a>.<\/p>\n
Trix – avoimen l\u00e4hdekoodin WYSIWYG-editori<\/h3>\n
Trix<\/a> on toinen avoimen l\u00e4hdekoodin rikas tekstieditori Basecampilta. Koska t\u00e4t\u00e4 editoria k\u00e4ytet\u00e4\u00e4n Basecampissa, miljoonat k\u00e4ytt\u00e4j\u00e4t k\u00e4ytt\u00e4v\u00e4t sit\u00e4 jo. Kirjoitin erillisen artikkelin Trix-editorista, joten tutustu t\u00e4h\u00e4n artikkeliin,<\/a> jossa kerrotaan, miten Trix-editoria k\u00e4ytet\u00e4\u00e4n verkkosivustoillasi.<\/p>\n
Toivon, ett\u00e4 sait perustiedot suosituista vapaiden rikkaiden tekstien muokkaajista. Jaa ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n