Nagyon gyakran a webhely tartalmának szerkesztése során szükséges (és nagyon kényelmes) látni a kész eredményt a böngésző oldalon. A HTML5 címkék - contenteditable, Jquery, Ajax és PHP - tulajdonságát felhasználva egy egyszerű HTML5 webhely szövegszerkesztőt készítünk.

Szerkesztőnk a következő tulajdonságokkal rendelkezik:
- a szerkesztésre szánt szövegre kattintva ez a szöveg azonnal szerkeszthető;
- ha a szöveg szerkesztése után megnyomja az Escape billentyűt, az aktuális szöveg minden módosítása törlődik;
- ha elveszíti a fókuszt, vagy egy másik szöveg szerkesztéséhez kattint, a megváltozott szöveg elküldésre kerül a szervernek, üzenet jelenik meg a küldés állapotáról és a szerver válaszáról.

Alább látható a szerkesztett oldal HTML kódja:

Amint láthatja, minden szerkeszthető szöveg egy címkébe van zárva, amelyben a tulajdonság engedélyezett tartalmas- egy HTML5 funkció, amely lehetővé teszi a szöveg közvetlen szerkesztését a böngészőben. A szerveren való spóroláshoz pontosan azonosítani kell a szerkesztett szöveget, így az azonosítónk tartalmazza az anyagazonosítót és az adatbázis mezőt, aláhúzással elválasztva például - id="item1_title".

Oldalunk fejlécében szerepel a style.css és a jquery:

Elfogadjuk a szerkesztett szövegünket a szerveren - save.php fájl

Szerkesztőnk különösen kényelmes táblázatos adatokhoz (például árlista), ahol nincs szükség szöveges tervezésre, de gyorsan kell javítani vagy új adatokat kell bevinni (modernizálni fogjuk a szkriptet). Magam számára modernizálom a forgatókönyvet az áru adatbázis elkészítése, kitöltése érdekében. Az adatbázis ily módon történő kitöltése ugyanolyan kényelmes lesz, mint az általunk annyira megszokott Excelben.

Annak ellenére, hogy WYSIWYGés Árleszállítás vizuális szerkesztők korlátozottak a forráskód-szerkesztőkhöz képest, jelentősen megkönnyíthetik az oldal alapvető tartalmának szerkesztését. Ezért ebben a bejegyzésben összegyűjtöttük a legjobbakat WYSIWYGés Markdown vizuális szerkesztők backend és frontend webhelyfejlesztésben egyaránt használható tartalom.

ContentTools

A legeredetibb szöveg ebből a gyűjteményből. Specifikussága miatt azonban nem minden projekthez alkalmas.

A ContentTools magába a tartalomoldalba van beágyazva. A szerkesztés megkezdéséhez kattintson a megfelelő ikonra, amely után megjelenik tartalomszerkesztő panel. Ez nagyon kényelmes, mert egy anyag elkészítésekor azonnal látjuk, hogyan fog kinézni az oldalon.

Személy szerint nekem úgy tűnik, hogy távolról hasonlít rá Evernote szerkesztő, de más eszköztárral.

AlloyEditor

Vizuális tartalomszerkesztő Az AlloyEditor a népszerű CKEditoron alapul. Ő nagyon hasonlít Közepes szerkesztőés meglehetősen sokféle funkcióval rendelkezik, mint például: Drag&Drop képbetöltés, különféle eszköztárstílusok stb.

Ez egy nagyon jó szerkesztő.

SimpleMDE

A Markdown szintaxisa meglehetősen nehezen érthető egy átlagos felhasználó számára, akinek az a célja, hogy egyszerűen tartalommal egészítse ki az oldalt. A SimpleMDE fejlesztői megpróbálták elkészíteni Markdown szerkesztő hogy bárki dolgozhasson benne, speciális műszaki ismeretek nélkül is.

Anyag

Az anyag egyszerű vizuális tartalomszerkesztő JavaScriptben. Bármely felhasználó, aki úgy dönt, hogy tartalmat ad a webhelyéhez, könnyen dolgozhat vele.

Editor.md

Beágyazott online markdown szerkesztő nyílt forráskód. A könnyebb használat érdekében két részre van osztva. A bal oldalon a hagyományos Markdown jelölés, a jobb oldalon pedig a tartalom vizuális megjelenítése található.

Mint tudják, a soron belüli szerkesztés, vagy más szóval a tartalom közvetlenül az oldalon történő szerkesztésének lehetősége egy nagyon hasznos dolog, amelynek mindig kéznél kell lennie. Megmutatom, hogyan működik mindez, valamint azt is, hogyan lehet PHP segítségével azonnal frissíteni a szerkesztett részt az oldalon, és hogyan kell minden változtatást alkalmazni az adatbázisban.

A kód

Most elmagyarázom, hogy pontosan mi is az inline szerkesztés.

A Demó oldalon egy blokkot fog látni néhány szöveggel. Vigye az egérmutatót a blokk bármely része fölé, és megjelenik egy kis szerkesztési ikon. Úgy néz ki, mint egy Facebook ikon.

Ha a szöveges blokk belsejébe vagy magára az ikonra kattint, akkor a blokk helyére szövegterület alakzat kerül, és alul megjelennek a mentés és a törlés gombok.

Most többet

bind-et és unbind-et használtam. Egyszerűen fogalmazva, egy egérkattintási eseményt köthetünk egy elemhez. És fordítva, ezt az eseményt „elveheti” az elemtől. Minden nagyon egyszerű. Az alábbi kód 9. sorában minden „inlineEdit” osztályú elemhez kattintási eseményt rendelünk, kezelőként pedig az „updateText” függvényt. Ez azt jelenti, hogy minden alkalommal, amikor az "inlineEdit" blokkba kattint, az "updateText" funkció futni fog. Ez a függvény egy szövegblokkot az űrlap szövegterületére cserél.

Most fontolja meg a mentés funkciót. Csak akkor fut, ha rákattint a „Mentés” gombra. Itt egyszerűen a szerkesztett szöveget egy változóba helyezzük, és az update.php fájlon keresztül futtatjuk. Észre fogja venni, hogy amíg a frissítés folyamatban van, egy letöltés ikon jelenik meg. A PHP oldal válaszüzenetét is megjelenítjük. Végül eltávolítjuk az elemből a "kiválasztott" osztályt, majd beillesztjük a frissített szöveget a felhasználó által beírt szövegterületről a div-be.

A törlés funkció akkor fut le, ha egy .revert osztályú elem aktiválva van. Ez a függvény egyszerűen eltávolítja a „kiválasztott” osztályt, mint az előző függvényben, de az eredeti szöveget beszúrja, nem a szerkesztett szöveget a div-be.

$(document).ready(function () ( function slideout() ( setTimeout(function () ( $("#response").slideUp("slow", function () ()); ), 2000); ) $ ("".inlineEdit").bind("click", updateText); var OrigText, NewText; $(.save").live("click", function () ( $("#loading").fadeIn( " lassú"); NewText = $(this).siblings("form").children(.edit").val(); var id = $(this).parent().attr("id"); var data = "?id=" + id + "&text=" + NewText; $.post("update.php", adat, függvény (válasz) ( $("#response").html(válasz); $( " #response").slideDown("lassú"); slideout(); $("#betöltés").fadeOut("lassú"); )); $(this).parent().html(NewText).removeClass ( "selected").bind("click", updateText); )); $(".revert").live("kattintás", függvény () ( $(this).parent().html(OrigText). removeClass ("selected").bind("click", updateText; )); függvény updateText() ( $("li").removeClass("inlineEdit"); OrigText = $(this).html(); $ ( ez).addClass("kijelölve").html("

"+OrigText+""

").unbind("kattintás", updateText); ) ));

PHP

HTML

A HTML nagyon egyszerű, és egyetlen listaelem az „inlineEdit” osztályú, ami szerkeszthetővé teszi. Tetszőleges számú szerkeszthető elemet adhat hozzá az oldalhoz, de ne felejtse el mindegyiknek egyedi azonosítót adni.

jQuery Inline-Edit

Kattintson az alábbi szövegre a szerkesztéshez.

• Lorem Ipsum....

Ingyenesen használható rich text szerkesztőket keres? Ha igen, akkor szerencsés, hogy a megfelelő oldalra került. Ebben az áttekintésben 10 nagyszerű ingyenes Rich-Text szerkesztőt mutatunk be. A gazdag szövegszerkesztők lehetővé teszik a szöveg szerkesztését és beírását a webböngészőből. Különböző módon használják őket, lehetővé téve a felhasználó számára, hogy az általa generált és formázott tartalmat közzétegye.

Reméljük, hogy listánk valóban a legjobb megoldásokat kínálja Önnek. Nyugodtan ossza meg barátaival, és velünk a véleményét erről a gyűjteményről. Itt a teljes lista.

Jó nézelődést!

CKE-szerkesztő egy ingyenes és nyílt forráskódú HTML szövegszerkesztő, amely megkönnyíti a webhelyek tartalommal való feltöltését. WYSIWYG szerkesztő, amely hozzáférést biztosít az ismerős szövegszerkesztő funkciókhoz közvetlenül a weboldalakról. Növelje webhelyének élményét ezzel a közösségvezérelt szerkesztővel.

markItUp! nem "mindig készenlétben" szerkesztőnek tervezték. Éppen ellenkezőleg, ez egy nagyon kompakt, rugalmas konfigurációs és működési szolgáltatás, amely kiszolgálhatja a fejlesztőt a CMS, a blogok, a fórumok vagy a webhelyek hibakeresése során. markItUp! nem WYSIWYG szerkesztő, és soha nem is lesz az.

NicEdit- kompakt, többplatformos, beágyazható tartalomszerkesztő a weboldal tartalmának könnyű és egyszerű variálásához közvetlenül a böngészőben.

TinyMCE egy off-platform javascript/HTML WYSIWYG szerkesztőkonzol, amelyet nyílt forráskódú web-alapú erőforrásként adtak ki, és az LGPL védi. A TinyMCE képes a HTML TEXTAREA mezőket és más HTML elemeket szerkesztési egységekre konvertálni.

Ingyenes cross-platform WYSIWYG szerkesztő, amely tele van minden olyan rich text szerkesztési funkcióval, amelyre szüksége van a tartalomkezelő rendszerének drámai fejlesztéséhez.

A jQuery TE egy jQuery modul. Kompakt (19,5 Kb) és nagyon praktikus HTML-szerkesztő. A WYSIWYG séma szerint működik.
És ami a legfontosabb, mindössze 1 perc alatt bevihető a rendszerébe. A felülete pedig tetszés szerint módosítható. Még a CSS osztályok is lecserélhetők.

Egyszerű Rich-Text szövegszerkesztőt keres a jQuery erőforrásokhoz? Jó helyre jöttél!

Egy egyszerű, kompakt, bővíthető jQuery alapú WYSIWYG HTML szerkesztő. Eszköz a WYSIWYG-HTML szerkesztő egyszerű megjelenítéséhez az oldalon belül bármely TextArea DOM elem helyett. Könnyű script "súlya" 9,17 Kb; CSS képekkel együtt "húz" 25,9 Kb.

uEditor rugalmas és könnyen használható. Világos, működőképes kódot állít elő (bár olyat, amelyet az előírt módon hitelesíteni kell), többek között saját stíluslapját is használhatja a WYSIWYG módban végzett munkához. A szolgáltatás funkcionalitása tovább bővíthető a könnyen használható kiegészítő modulrendszernek köszönhetően.

A Whizzywig segítségével ez egyszerű. Lehetővé teszi "gazdag" formázott szöveg összeállítását a webablakban. Valójában XHTML-ben ír, de nem kell ismernie a HTML-t a használatához. Ha tudja, hogyan kell szövegszerkesztőt vagy e-mailt használni, akkor tudja kezelni.