Vizuálny html editor online. Výber bezplatných multiplatformových webových vývojových prostredí

Dajte používateľom príležitosť formátovanie textu bez učenia sa ďalšieho kódu je niečo, na čom vývojári v posledných rokoch tvrdo pracovali. A všetko nie je márne, už dosiahli výrazný pokrok. Predstavujeme vám 10 najpoužívanejších WYSIWYG editory. Dúfame, že si vyberiete niečo pre svoje vlastné projekty.

01. NickEdit

NicEdit je vynikajúcou alternatívou k veľkým a ťažkopádnym editorom. Obsahuje všetky požadované funkcie, no integrácia do stránky zostáva veľmi jednoduchá.

02. TinyMCE

TinyMCE je bezplatný javascriptový HTML WYSIWYG editor. Je ľahké ho vložiť do stránky a poskytuje širokú škálu možností na prispôsobenie a zmenu vzhľadu. TinyMCE je asi „najkompletnejší“ editor v našom dnešnom výbere. Takmer MSWord.

03. Redaktor CK

CKeditor je nový FCKEditor, ktorý v minulosti získal titul trhového lídra. Editor je založený na ňom a jeho cieľom je opraviť to, čo spôsobovalo problémy v FCKEditor. Výsledkom je vysoko produktívny WYSIWYG editor, ktorý ponúka všetky funkcie, ktoré by ste bežne používali v MSWord alebo Open Office.

04. YUI Rich Text Editor

Editor formátovaného textu YUI je grafické používateľské rozhranie od Yahoo, ktoré premení obyčajné pole na zadávanie textu na plnohodnotný WYSIWYG editor. Aplikácia je poskytovaná v rôznych verziách, s rôznymi funkciami a obsahom. Ale pomocou ktorejkoľvek z verzií získate všetky funkcie potrebné pre editor.

Markitup je doplnok jQuery, ktorý vám umožňuje zmeniť bežné pole na zadávanie textu na editor značiek a formátovač. Html, Wiki a BBcode sú len niektoré z toho, čo doplnok ponúka. Markitup nie je WYSIWYG editor, ale to nie je ešte horšie, pretože vám ponúka všetky funkcie, ktoré potrebujete.

06. FreeTextBox

freetextbox je HTML editor navrhnutý špeciálne pre ASP.NET. Vzhľad editora je veľmi podobný programu Microsoft Word. Bezplatná verzia v skutočnosti nemá veľa funkcií, ale má všetko, čo potrebujete.

07. MooEditable

WYSIWYG editory teraz väčšinou poskytujú pluginy pre populárnu knižnicu jQuery a v menšej miere aj Mootools. MooEditable celkom vypĺňa túto medzeru, keďže ide o jednoduchú, ale veľmi efektívnu knižnicu javascriptu. Ak ste fanúšikom Mootools, potom s ním nebudete mať žiadne problémy.

08. OpenWysiwyg?

Otvorte Wysiwyg je plnohodnotný editor pre rôzne prehliadače so všetkými požadovanými funkciami. Obsahuje dokonca atraktívne rozbaľovacie ponuky a tlačidlá. Chrome to bohužiaľ nepodporuje.

09. Spaw Editor- stránka je mŕtva

spaw editor je WYSIWYG editor, ktorý umožňuje vývojárom webových stránok nahradiť štandardné textové polia spravovaným HTML editorom, so širokým rozsahom nastavení, v mnohých jazykoch a so schopnosťou meniť vzhľad.

10.jHtmlArea

jHtmlArea je ďalší textový editor WYSIWYG, ktorý je doplnkom pre Jquery. Účelom pluginu je jednoduchosť a jednoduchosť používania. Obsahuje všetky požadované funkcie. Môžete si prispôsobiť vzhľad, funkcie a jazyky.

Všetci vieme, že názov jazyka HTML pochádza z HyperText Markup Language, čo znamená hypertextový značkovací jazyk. Terminológia značkovacieho jazyka hovorí, že ide o textový dokument s vyznačením nadpisov, zoznamov a iných zvýraznení v texte. Prevažná väčšina stránok, ktoré môžete nájsť na World Wide Web, je napísaná v HTML. Informácie sa prenášajú zo servera do prehliadača pomocou špeciálnych protokolov a s podmienkou kompresie. Z histórie je tiež známe, že jazyk vyvinul Tim Berners-Lee v rokoch 1986-1991.
Spravodlivo, bežný poznámkový blok môže slúžiť ako editor. Ale to je nepohodlné, existuje veľa editorov s pohodlnejšími funkciami (hádanie znakov, vizuálna úprava, zvýrazňovanie kódu atď.).
Pozrime sa teda na najlepšie editory HTML:

1 miesto. Vznešený text

Jednoduchý, bezplatný a praktický editor pre rôzne kódy. Z plusov si nemožno nevšimnúť príjemné rozhranie, jednoduchú správu a flexibilnú konfiguráciu. Nesporným plusom je aj to, že tento editor je multiplatformový. Veľmi sa mi páčila funkcia viacnásobného výberu a úprav, iné editory túto funkciu nemajú. Funguje to takto: podržíte Ctrl a po označení riadkov textu sa súčasne upravujú. Aj v tomto editore je funkcia klávesových skratiek pre akúkoľvek akciu. Pluginov zatiaľ nie je veľa.

2. miesto. Štúdio Aptana

Tento editor bol vytvorený hlavne pre vývoj webových aplikácií, ale veľmi dobre funguje aj s HTML. Z plusov nemožno opomenúť vynikajúce automatické dopĺňanie, zvýrazňovanie kódu a vynikajúci systém riadenia projektov. Pre bezplatný editor sú tieto funkcie jednoducho neoceniteľné. Rovnako ako Dreamweaver, aj tu nájdete množstvo doplnkov na oficiálnej stránke. Samozrejme, veľký výber pluginov, možností, nastavení môže začiatočníka vydesiť, ale Aptana Studio je vynikajúcou voľbou, ak potrebujete pohodlný a funkčný HTML editor.

3. miesto. Poznámkový blok++

Umiestnený ako bezplatný a otvorený zdrojový editor. Funkcie zvýrazňovania, automatické dopĺňanie blokov kódu sú dobre organizované, funkčnosť je možné zvýšiť vďaka veľkému počtu pluginov a modulov. Taktiež je tento editor veľmi rýchly aj s veľkým množstvom pluginov.

4. miesto. Macromedia (Adobe) Dreamweaver

Je to jeden z najstarších editorov, ktorý sa drží nad vodou vďaka mnohým funkciám. Pri používaní tohto programu si môžete súčasne prezerať dizajn a kód stránky, využívajú sa aj rady a automatické dopĺňanie HTML značiek a atribútov. Vyhľadávanie a nahrádzanie znakov je pohodlne organizované. Na oficiálnej stránke programu nájdete veľa komerčných aj nekomerčných pluginov pre tento program.

5. miesto. RJ TextEd

Jednoduchý bezplatný editor napísaný v roku 2004 pre operačný systém Windows. V ňom si môžete prispôsobiť zvýraznenie kódu pre seba, čiastočne funguje automatické zatváranie značiek a úvodzoviek. Existuje slušný počet nevýhod, závažných aj nepostrehnuteľných, napríklad neexistuje FTP klient, neexistuje ani vyberanie závislých súborov, chýba podpora CSS 3, JS atď.

6. miesto. KompoZer

Toto je jeden z najlepších bezplatných vizuálnych editorov. Pri úprave hneď vidíte, ako bude stránka vyzerať v prehliadači. Podporuje všetky prvky HTML. KompoZer samozrejme nie je platený Dreamweaver a podľa toho sa aj správa. Z plusov si nemožno nevšimnúť vstavaný CSS editor a FTP manažér.

7. miesto. Komodo Edit

Je to bezplatný editor vyvinutý z komerčného Komodo IDE, od ktorého zdedí mnoho funkcií. Editor má štandardné automatické dopĺňanie, zvýraznenie kódu. Z plusov je možné poznamenať rýchly štart, pohodlné klávesové skratky. Tiež vstavaný mechanizmus na inštaláciu rozšírení. Pôvodne bol vyvinutý ako multifunkčný editor.

8. miesto. vim

Starý dobrý editor, vyvinutý na základe staršieho Vi, ktorý vznikol už v roku 1976. Pýtate sa, prečo stále používame to, čo vzniklo takmer pred 40 rokmi? Áno, pretože je to vynikajúci výkon a jednoduché riadenie. Samozrejme, na tento editor si musíte veľmi dobre zvyknúť, po prvé, musíte ovládať slepé písanie (pretože bez neho nie je vo Vime čo robiť), naučiť sa klávesové skratky, vďaka ktorým prebieha hlavné ovládanie programu .

9. miesto. Fraise

Fraise je bezplatný textový editor so zvýraznením syntaxe. Navrhol Jean-François Moy na základe Smultronu. Z výhod je to výborná správa blokov, kódovanie postáv, rozdelenie na 2 okná a mnoho ďalšieho. Hlavnou nevýhodou je ale to, že tento editor existuje len pod Mac OS.

10. miesto. PSPad

Univerzálny textový editor pre platformu Windows s množstvom užitočných funkcií. Veľmi príjemnou vlastnosťou tohto programu je funkcia kompresie HTML kódu, pre rýchlejšie načítanie stránky, ktorú som v iných editoroch nevidel.

Tento článok predstavuje niektoré z najfunkčnejších editory kódu CSS pre front-end vývojárov. Vďaka funkciám, ako je zvýrazňovanie syntaxe, živé zobrazenie, ladenie a spolutvorba, môžu byť tieto služby skvelou voľbou pre vývoj webu priamo v okne prehliadača.

Online editory kódu

1.CodePen

Ponúka podporu pre HTML, CSS a JavaScript a veľké množstvo preprocesorov. Podporované sú Haml, Markdown, Slim a Jade HTML preprocesory. Pre CSS sú podporované funkcie Less , SCSS , Sass a Stylus. Pre JavaScript sú podporované CoffeeScript, TypeScript, LiveScript a Babel.

Okrem toho existuje obrovská komunita vývojárov používajúcich CodePen. Vďaka tomu je ľahké nájsť ukážky a príklady vytvorené skúsenými vývojármi.

CodePen Pro podporuje režim spolupráce, ktorý vám umožňuje dokončiť kód v reálnom čase. Rovnako ako profesorský režim, kde vás môže sledovať skupina študentov, keď vysvetľujete kód, a môžete s nimi chatovať.

2. JSFiddle

Ďalší populárny CSS editor online. Vývojári ho úspešne používajú už nejaký čas a bol prvým pred príchodom CodePen. JSFiddle je ľahko použiteľný online editor kódu s bezplatným spolutvorbou, textovým a hlasovým chatom. Na používanie funkcie spolupráce sa ani nemusíte registrovať.

JSFiddle tiež podporuje SCSS a CoffeeScript. S JSFiddle je celkom jednoduché spolupracovať na kóde alebo uverejňovaní ukážok.

3 Liveweave

Je to online editor CSS s funkciou náhľadu v reálnom čase. Liveweave obsahuje vstavané kontextové rady kódu HTML5, CSS3, JavaScript a JQuery. Umožňuje vám tiež stiahnuť váš projekt ako archív, čo je veľmi výhodné.

V Liveweave je celkom jednoduché zahrnúť do projektov externé knižnice ako JQuery , AndgularJS , Bootstrap atď. Je to tiež nástroj pravítka, ktorý pomáha pri vývoji responzívneho webového dizajnu. Liveweave ponúka funkciu " Pridaj sa“, ktorý poskytuje rovnakú funkčnosť ako režim spoločnej úpravy v JSFiddle.

4. Plunker

Toto je online komunita (napr kódové pero) na kódovanie, spoluprácu a zdieľanie nápadov pri vývoji webu. Služba je open source online editor licencovaný pod licenciou MIT. Zdrojový kód Plunker nájdete na GitHub.

Online editor štýlov CSS vám umožňuje pridať viacero súborov do vášho pracovného priestoru a tiež vám poskytuje šablóny vytvorené komunitou, ktoré môžete použiť na rýchle spustenie projektu.

5.JS Bin

Cloudové prostredie na spoluprácu s kódom JavaScript. Zahŕňa podporu pre celý rad preprocesorov, ako sú SCSS, Less, CoffeeScript, Jade a ďalšie. K dispozícii je aj konzola na ladenie a kontrolu kódu, ktorá funguje ako konzola v prehliadači Google Chrome alebo Firefox.

JS Bin tiež podporuje interaktívne nahrávanie a vysielanie generovania kódu ľubovoľnému počtu účastníkov. Tento režim je dostupný bezplatne pre registrovaných a anonymných používateľov.

6. CSS Deck

Tento editor CSS je v porovnaní s inými nástrojmi o niečo jednoduchší. Okrem hlavných funkcií obsahuje funkciu komentárov. CSS Deck podporuje aj zdieľanie a vkladanie ukážok.

7.test kódu

kodtest je užitočný, keď potrebujete otestovať svoj kód na rôznych veľkostiach obrazovky. Tento online nástroj vám umožňuje rýchlo prepínať medzi niekoľkými prednastavenými veľkosťami obrazovky.

Ukážka online editorov kódu

Nižšie je ukážka, ktorú som vytvoril na CodePen. Môžete prepínať medzi kartami a zobraziť kód HTML, CSS a JS. Alebo experimentujte presúvaním tvarov na karte Výsledok.

Zobraziť ukážku

Záver

CSS editory online možno použiť na rôzne účely. Napríklad, ak potrebujete spolupracovať na projektoch alebo ukázať demo klientovi.

Editory webových kódov sú skvelé aj na vzdelávacie účely, pretože nevyžadujú inštaláciu a sú prístupné zo všetkých druhov zariadení.

Ak ste vývojár, napíšte do komentárov svoj obľúbený online editor kódu.

Preklad článku " 7 bezplatných online editorov kódu pre front-end vývoj webu» pripravil priateľský tím projektu budovania webovej stránky od A po Z.

Najlepšia softvérová súprava online editora HTML v reálnom čase s dynamickým okamžitým živým vizuálnym náhľadom a vloženým editorom WYSIWYG pomocou CKEditor a funkcie čistenia značiek. Obsahuje prehliadač HTML, editor, kompresor, skrášľovač a jednoduchý formátovač. Pomocou tohto nástroja nie je možné vytvoriť neplatný kód.

Ako používať editor HTML?

Aktivujte automatické posúvanie. Keď je táto možnosť povolená, dva editory sa budú posúvať spolu.

Upravte veľkosť písma podľa svojich preferencií.

Vykonajte všetky možnosti, ktoré sú začiarknuté v nastaveniach (pozri ikonu ozubeného kolieska vyššie).

Ďalšie dôležité funkcie úprav

Tieto funkcie editora HTML môžete vyskúšať na precvičenie a maximalizáciu efektívnosti kódovania.

• konvertor dokumentov- Ak chcete previesť akýkoľvek vizuálny dokument, ako je Excel, PDF, Word, do HTML, stačí vložiť dokument do vizuálneho editora a označenie sa okamžite zobrazí na pravej strane.
• online textový editor- Vytvárajte dokumenty, rovnako ako v editore formátovaného textu. Pomocou ovládacieho panela môžete do papiera zahrnúť obrázky, tabuľky, nadpisy, zoznamy a ďalšie položky.
• Kopírovať vložiť- Editor vám nedovolí uložiť dokumenty. Na to musíte skopírovať vygenerovaný kód do prázdneho textového súboru a zmeniť jeho príponu na .html a otvorte ho v a webový prehliadač.
• Práca s tabuľkami- Pomocou panela editora WYSIWYG môžete vytvoriť tabuľku ľubovoľného rozmeru iba 2 kliknutiami. Existuje možnosť čistenia na ich konverziu na štýlové značky DIV.
• Vrátenie späť- Oba editory majú túto funkciu, ktorá umožňuje vrátiť dokument späť do predchádzajúceho stavu, tj. pred vykonaním čistenia.
• interaktívne demo- Urobte si prehliadku v 4 krokoch a prejdite jednotlivými funkciami kliknutím na Rýchla prehliadka položka menu. Naučte sa používať editor a experimentujte s ukážkovým textom.

nikdy nezabudnúť:

• Pred použitím tohto nástroja si vytvorte zálohu, aby ste sa uistili, že sa vždy môžete vrátiť k pôvodnému dokumentu.
• Pred zverejnením na živej webovej lokalite vždy skontrolujte svoj kód.
• Tento editor nikdy neukladá ani neodosiela váš dokument, všetky operácie sa vykonávajú na vašom lokálnom počítači.
• Ako väčšina webových stránok, aj táto používa súbory cookie.

Štýl tabuľky Div

Uistite sa, že pri publikovaní tabuliek konvertovaných na prvky div použijete nižšie uvedený kód CSS. Vyskúšajte interaktívny online štylizátor tabuliek, ktorý dokáže generovať mriežky z prvkov div aj z prvkov tabuľky. Obe sú podporované týmto editorom.

Upozorňujeme, že názvy tried, ktoré používame, sa mierne líšia od tých, ktoré používa DivTable.com.

.rTabuľka ( displej : tabuľka; šírka : 100 % ;) .rTableRow ( display : table-row ; ) .rTableHeading ( background-color : #ddd ; display : table-header-group ; ) .rTableCell , .rTableHead ( display : table-cell ; padding : 3 px 10px; hranica: 1 px pevné #999999 ; ) .rTableHeading ( display : table-header-group ; background-color : #ddd ; font-weight : bold; ) .rTableFoot ( display : table-footer-group ; font-weight : bold ; background-color : #ddd ; ) .rTableBody ( display : table-row-group ; )

.rTable ( display: table; width: 100%;) .rTableRow ( display: table-row; ) .rTableHeading ( background-color: #ddd; display: table-header-group ; ) .rTableCell, .rTableHead ( display: table-cell; padding: 3px 10px; border: 1px solid #999999; ) .rTableHeading ( display: table-header-group; background-color: #ddd; font-weight: bold ; ) .rTableFoot ( display: table-footer -group; font-weight: bold; background-color: #ddd; ) .rTableBody ( display: table-row-group; )

Vizualizácia kódu už dlho nie je prioritou vývojárov. Tento článok poskytuje zoznam 9 WYSIWYG editorov, ktoré sa používajú na tento účel. Odporúčame Vám sa s ním oboznámiť v prípade, že sa podobná úloha vyskytne pri realizácii Vášho projektu.

Aký je najlepší editor roku 2016?

V tejto časti článku nájdete niekoľko skvelých editorov, ktoré vám uľahčia a zrýchlia prácu. A čo je z nich najlepšie?

Výber editora: Atom.io

V priebehu rokov sa vytvorilo mnoho editorov, no len málo z nich sa udržalo na vysokej úrovni alebo sa stalo ešte lepším. Atom.io používajú všetci moji kamaráti programátori a vyberám si ho aj ja.

Ak hľadáte najlepší WYSIWYG HTML editor, ktorý vám skráti čas strávený písaním alebo úpravou kódu 10-krát, Atom je ten pravý. Skúste to a budete mi vďační. Atom.io je zadarmo a vytvoril ho tím Github.

Ďalším nástrojom, ktorý si zaslúži pochvalu, je Coda, veľmi skvelý editor pre používateľov počítačov Mac. Má perfektné a krásne rozhranie, ale stojí $ 99. Momentálne preferujem Atom!

Teraz prehľad ostatných redaktorov.

1. NickEdit

Demo verzia | Stiahnuť ▼

NicEdit je alternatívou k objemnejším a komplexnejším vizuálnym editorom, má malú veľkosť. Tiež sa môže pochváliť mnohými základnými funkciami editora a tento online WYSIWYG editor sa dá ľahko integrovať do vašej webovej stránky.

2. TinyMCE

Demo verzia | Stiahnuť ▼

TinyMCE je open source WYSIWYG HTML editor napísaný v JavaScripte. Ľahko sa integruje a je vysoko prispôsobiteľný pomocou tém a doplnkov. TinyMCE je jedným z „kompletnejších“ editorov, ktoré ponúkajú funkcie podobné MSWord.

3. Editor CK

Demo verzia | Stiahnuť ▼

CKEditor je vylepšená verzia FCKEditor, ktorý bol lídrom v tomto odvetví. Bolo to založené na túžbe opraviť chyby FCKEditor. Výsledkom je vysoko výkonný vizuálny editor, ktorý ponúka funkcie úprav porovnateľné s MSWord a Open Office.

4. YUI Rich Text Editor

Demo verzia | Stiahnuť ▼

YUI Rich WYSIWYG Website Editor je ovládací prvok používateľského rozhrania od Yahoo, ktorý premení jednoduchý textový panel na plnohodnotný WYSIWYG editor. Nástroj sa dodáva v niekoľkých verziách rôznej úrovne zložitosti a s rôznymi funkciami, no v každej sa autorom darí dosiahnuť výbornú ergonómiu ( žiadny neporiadok tlačidiel, ktoré zahlcujú rozhranie).

5. MarkItUp!

Demo verzia | Stiahnuť ▼

Markitup je doplnok jQuery, ktorý vám umožňuje zmeniť textové oblasti na editory značiek podľa vášho výberu. Syntax HTML, Wiki a BBcode sú len niektoré z podporovaných možností. Markitup nie je WYSIWYG editor, ale to neznamená, že neponúka všetky funkcie, ktoré potrebujete. Je tiež kompaktný a ľahko ovládateľný.

6.FreeTextBox

Demo verzia | Stiahnuť ▼

FreeTextBox je online WYSIWYG HTML editor špeciálne navrhnutý pre ASP.NET. Vzhľad editora je veľmi podobný programu Microsoft Word. Bezplatná verzia nedisponuje viacerými pokročilými funkciami, no dostupná zostava je viac než dostatočná na plnohodnotnú prácu.

7MooUpraviteľné

Demo verzia | Stiahnuť ▼

MooEditable poskytuje jednoduché, ale výkonné funkcie založené na dobre napísanej knižnici JavaScript. Ak ste fanúšikom Mootools, nebudete s tým mať žiadne problémy.

8. OpenWysiwyg

Demo verzia | Stiahnuť ▼

OpenWYSIWYG je jednoduchý WYSIWYG editor pre rôzne prehliadače so všetkými funkciami, ktoré potrebujete. Má krásne používateľské rozhranie vrátane kontextových okien a tlačidiel. Jedným z jeho poznávacích znakov je dobre zrealizovaná práca s tabuľkami. OpenWYSIWYG zároveň stále nie je podporovaný v prehliadači Google Chrome.

9.jHtmlArea

Demo verzia | Stiahnuť ▼

jHtmlArea je ďalší WYSIWYG editor navrhnutý ako plugin pre populárnu knižnicu jQuery. Je jednoduchý na používanie a obsahuje len tie najnutnejšie možnosti. Vďaka tomu je veľmi jednoduché prispôsobiť všetky jeho súčasti, od vzhľadu až po jazyk.