7 Bästa WYSIWYG HTML Editor Open Source

Det finns två typer av kodredigerare - Enkel textbaserad redigerare och WYSIWYG (vad du ser är vad du får). I vår tidigare artikel diskuterade vi några av de bästaOpen Source HTML Editor där du skriver in koden manuellt. Även om det inte finns några problem med de textbaserade HTML-redigerarna, är de ändå gamla skolan. Och det är där WYSIWYG HTML-redigerare öppen källkod kommer in. WYSIWYG HTML-redaktörer ger visuellt baserade alternativ för att bygga en webbplats utan någon programmeringskunskap (kom ihåg Wix-annonsen, det är wizzy-sig)

WYSIWYG HTML-redigerare har flera fördelar jämfört med textbaserade redaktörer. Till att börja med kan du skapa en webbplats med WYSIWYG-redaktörer även om du inte vet hur du kodar. Allt du behöver göra är att dra och släppa objekt i redigeraren och när du är klar, kopierar du bara koden. Att hitta en bra WYSIWYG HTML-redigerare med öppen källkod kan dock vara en ansträngning. Det är här vi kommer in.

Läs också: 50+ Android-appar med öppen källkod när du vill gräva Google

Bästa WYSIWYG HTML Editor Open Source

1. Pell

Pell är förmodligen den minsta och enklaste WYSIWYG-redigeraren som du någonsin kommer att stöta på. Det är bokstavligen 1,38 kb i storlek!

Det erbjuder alla grundläggande funktioner och format som rubriker, fetstil, kursiv, listor, citat, länkar och bilder. Andra tillgängliga åtgärder inkluderar inryckning, övertryck, prenumeration, teckensnittsnamn och storlek. När du är klar med att skriva och formatera med Pell kommer den att mata ut hela HTML-koden som du sedan bara kan kopiera och klistra in på din webbplats eller sida så är du klar.

Fördelar:

Minsta och lättaste WYSIWYG
Inga beroenden
Enkelt anpassningsbar

Nackdelar:

Ingen snygg HTML-redigering
Bilder endast via länkar

Dom:
Med tanke på dess storlek gör Pell ett övertygande paket. Men låt oss vara ärliga, du kan bara få grundläggande HTML-filer gjort med de begränsade redigeringsalternativen. Så om du är någon som letar efter en snabb och lätt WYSIWYG-redigerare som är öppen källkod för mycket grundläggande arbete, kolla definitivt Pell.

Få Pell

2. OpenWYSIWYG

OpenWYSIWYG är en HTML-redigerare med flera texter för webbläsare som är helt kodad i JavaScript. Genom att bara kopiera och klistra in några rader kod kan du vända på valfri in i OpenWYSIWYGs robusta WYSIWYG HTML-redigerare. Användargränssnittet och redigeringsalternativen med rullgardinsmenyerna är mycket lika de för alla textredigerare och du kommer att känna dig som hemma. Bortsett från alla grundläggande formateringsalternativ, har OpenWYSIWYG en förbättrad färgväljare med 216 webbfärger att välja mellan och ett kraftfullt bordsformateringsverktyg med alla alternativ du kan tänka dig. En annan bra sak med OpenWYSIWYG är att du, tillsammans med alla visuella alternativ, fortfarande kanvisa rå HTML-kod och gör justeringar direkt i koden. Användbar för när du vill lära dig eller uppdatera dina kodningsfärdigheter. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-2a8d34d0ca966deffc6441af9dbbe702-101381.jpg" alt="7 Bästa WYSIWYG HTML Editor Open Source"> Fördelar: <ul> <li>Kraftfull redigeringsmiljö</li> <li>Intuitivt och enkelt användargränssnitt</li> <li>Färgväljare och omfattande redigeringsalternativ för bord</li> </ul> Nackdelar: <ul> <li>Uppdaterades inte på några år</li> </ul> Dom: Att vara skriven i JavaScript, OpenWYSIWYG HTML-redigerare öppen källkod bör fungera med alla andra webbprogrammeringsspråk. Om du letar efter något mer kraftfullt än Pell att integrera i din webbapplikation är detta ett bra alternativ. Skaffa OpenWYSIWYG <h3>3. TinyMCE (Community Edition)</h3> Nästa WYSIWYG-editor med öppen källkod på vår lista är TinyMCE. Det är också helt skrivet i JavaScript och erbjuder ett användargränssnitt och upplevelse som de flesta ordbehandlare. Det gör det mer användarvänligt. TinyMCE är inte gratis, men Community Edition är en gratis och öppen källkod. Den levereras med alla grundläggande redigeringsalternativ som formatering av text, listor, tabeller och även några bildredigeringsalternativ. Utvecklarna har hållit prissättningen av premiummodellerna efter antalet användare. Några av premiumfunktionerna inkluderar stöd för Google Drive och Microsoft Azure, tillägg, stavnings- och länkkontroll och teknisk support. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-35ef757e6374c689f5158bf25ea8b2c6-101381.jpg" alt="Om du har tidigare erfarenhet av programmering och inte har tid att lära dig, kan du absolut komma undan genom att använda en WYSIWYG HTML-editor. Att hitta en bra WYSIWYG HTML Editor är dock inte så lätt, speciellt om du behöver det för att vara en gratis och öppen källkod."> Fördelar: <ul> <li>Extensionsstöd</li> <li>Filhantering</li> <li>Teknisk support</li> <li>IDE-stil kodredigerare för HTML</li> </ul> Nackdelar: <ul> <li>Dyrt</li> <li>Inte helt öppen källkod</li> </ul> Dom: TinyMCE med sitt enkla integrationsalternativ, användarvänliga användargränssnitt och en mängd funktioner är ett komplett paket. Om du bara vill ha den mest funktionsrika WYSIWYG HTML-redigeraren med öppen källkod och är okej med att spendera lite pengar, är TinyMCE vägen att gå. De erbjuder också en månads gratis provperiod för sin Pro-modell som du alltid kan kolla in. Få TinyMCE Demo <h3>4. Jodit</h3> Jodit är en annan snabb och lätt WYSIWYG HTML-editor med öppen källkodsredigerare som du kan bädda in i din kod och börja redigera din sida. Det är ganska lätt på cirka 100 kB i storlek och har skrivits helt i TypeScript. Det är därför du inte behöver några beroenden eller bibliotek för att köra det. Den levereras med ett dra-n-släpp-gränssnitt för bilden också. Du kan också bifoga YouTube- eller Vimeo-videor via en länk eller bädda in dem. Det bästa jag gillar med Jodit är att det kommer med en ACE-redaktör ur lådan och med en enda knapp kan du växla mellan den faktiska koden och förhandsgranskningsläget. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-d9f6924fe440a4261e0839c0c4b1c532-101381.jpg" alt="html, wysiwyg, redigering, alternativ, openurce, editopenurce, proffs, kod, text, nackdelar, support, redaktörer, baserad, dom, bootstrap"> Fördelar: <ul> <li>Lätt, inga bibliotek</li> <li>Dra och släpp</li> <li>ACE-redaktör ur lådan</li> <li>Teknisk support (betald)</li> </ul> Dom: Jodit erbjuder det bästa från två världar - enkel visuell WYSIWYG-redigerare samt redigering av råkod. Om du är någon som åtminstone har kunskap om HTML, kan Jodit vara det bästa alternativet för dig. Skaffa Jodit Playground <h3>5. Summernote</h3> Summernote är en super enkel WYSIWYG-editor med öppen källkod byggd på jQuery och baserad på Bootstrap. Eftersom den stöder Bootstrap kan du använda alla de stilar och teman som stöds i din redaktör från Bootswatch. WYSIWYG HTML-redaktörens öppna källkod har ett mycket rent och minimalt gränssnitt och du kan till och med redigera eller lägga till formateringsalternativ efter dina behov. Med Summernotes Air-mode kan du dölja hela verktygsfältet och redigera ditt dokument direkt. Bekväm. Det kan också automatiskt konvertera alla bilder till base64, så du behöver inte göra bildhantering alls. För mig är det bästa med Summernote det hårt arbetande teamet av utvecklare bakom det som alltid lyssnar på samhället och lägger till nya funktioner. Exempel inkluderar stöd för plugins och en lite eller vaniljversion av Summernote som inte kräver Bootstrap. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-d48b6067378fbbbed4746fb15a5e64e8-101381.jpg" alt="7 Bästa WYSIWYG HTML Editor Open Source"> Fördelar: <ul> <li>Lägsta inlärningskurva</li> <li>Luftläge för redigering i farten</li> <li>Stöder Bootstrap 3.x.x till 4.x.x</li> <li>Visa och redigera i HTML</li> </ul> Nackdelar: <ul> <li>Kräver Bootstrap</li> </ul> Dom: Summernote är förmodligen den mest funktionsrika men fria och öppna WYSIWYG HTML-redigeraren som finns tillgänglig på marknaden och den förbättras ständigt. Om du arbetar med Bootstrap, så är Summernote en bra idé, men även om du inte gör det, förtjänar Summernote att checkas ut. Få Summernote-demo <h3>6. Froala</h3> Froala är en vacker WYSIWYG HTML-editor med öppen källkod skriven i JavaScript. Det är ett av de mer populära verktygen på den här listan och dess popularitet hos utvecklare kan tillskrivas dess enkla integration och rena design. Froala är en mycket kraftfull redaktör i sig och det stora utbudet av plugins har bara ökat detsamma. Några av dem inkluderar en avancerad bildredigerare, uttryckssymboler, stavningskontroll, och det är enkelt att till och med skapa ditt eget plugin. Alla verktyg kan också nås med inline-redigeraren, vilket är extremt bekvämt. Precis som TinyMCE finns Froala i många olika smaker, men även den gratis versionen innehåller massor av slag. Den enda skillnaden är att du inte får hela källkoden och teknisk support. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-5a89ec944a7b7318dad29d4cbe38303c-101381.jpg" alt="7 Bästa WYSIWYG HTML Editor Open Source"> Fördelar: <ul> <li>Lätt kraftfull redaktör</li> <li>Inline redigering</li> <li>En uppsjö av plugins</li> </ul> Nackdelar: <ul> <li>Inte bra för mobil hybridapp / webbplats</li> </ul> Dom: Froala är snabb och lätt med ett vackert användargränssnitt men lyckas ändå ta med alla funktioner man kan leta efter i en WYSIWYG HTML-redigerare. Om du är okej utan källkoden och supporten kommer den fria versionen att fungera bra, annars vet du vad du ska göra. Skaffa Froala <h3>7. CKEditor</h3> CKEditor är extremt populär bland användare för att vara en vackert utformad WYSIWYG HTML-editor med öppen källkod. Den levereras med över 21 000 tester som hjälper dig att lära dig HTML i en vänlig layout. Detaljerad dokumentation finns för att hjälpa dig att ytterligare förbättra dina kunskaper. Några av de största namnen i teknikbranschen litar på det. Observera att du måste behålla upphovsrättsmeddelandena i varje fil intakt och inte ta bort LICENSE.md-filen i CKEditor-installationsmappen. Det är ingen nackdel, särskilt när du får så mycket värde i gengäld. Det finns stöd för plugins, @mention, emojis, äldre webbläsare och till och med autoslutförande vilket kan spara mycket tid. <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-f7cf4bbbed846085854eb05d6236462e-101381.png" alt="Om du har tidigare erfarenhet av programmering och inte har tid att lära dig, kan du absolut komma undan genom att använda en WYSIWYG HTML-editor. Att hitta en bra WYSIWYG HTML Editor är dock inte så lätt, speciellt om du behöver det för att vara en gratis och öppen källkod."> Fördelar: <ul> <li>Detaljerad dokumentation, tester, frågor</li> <li>Samarbeta och @mention</li> <li>Autoslutför</li> </ul> Nackdelar: <ul> <li>Spara licensfilen</li> </ul> Skaffa CKEditor Hedersomtal: 1. MediumEditor är en open source-klon av den inbyggda WYSIWYG-redigeraren för Medium.com. Den är död enkel, lätt och kommer utan beroenden. Även om det inte är så kraftfullt kan det fungera som ett utmärkt redigeringsverktyg för text eller textrelaterade dokument. 2. Atoms HTML-förhandsgranskningspaket låter dig lägga till en förhandsgranskningsruta där du kan få en liveförhandsgranskning av din HTML-kod, vilket kan vara till stor hjälp för utvecklare. Även om detta definitivt inte är för nybörjare är det ett bra paket att lägga till i ditt befintliga arbetsflöde om du redan gör programmering i HTML. <h3>Bästa WYSIWYG HTML Editor Open Source</h3> Medan HTML fortfarande är det kraftfullaste sättet att bygga en webbplats och mycket mer invecklade saker är möjliga med den, har WYSIWYG-redaktörer säkrat en egen plats. Att lära sig koda kräver mycket tid och energi och kanske inte är vettigt för alla. Om du har tidigare erfarenhet av programmering och inte har tid att lära dig, kan du absolut komma undan genom att använda en öppen källkod för WYSIWYG HTML-editor. Läs också: <a href="/7-best-open-source-browser-for-android-2018-100540" target="_blank">7 bästa webbläsare med öppen källkod för Android (2018)</a>