bejáratEgyszerű JQuery Editor A HTML5 szöveg szerkesztéséhez és az Ajax mentéséhez. Beépített szerkesztés JQuery és PHP JQuery szövegszerkesztő segítségével
Mint tudják, beépített szerkesztés, vagy más szavakkal, a tartalom közvetlenül az oldalon szerkeszthetők, nagyon hasznos dolog, ami mindig a kezedben kell lennie. Megmondom, hogyan működik, és megmutatja, hogyan használja a PHP-t, hogy azonnal frissítse a szerkesztett részt az oldalon, és hogyan lehet az összes módosítást az adatbázisban.
A kód
Most megmagyarázom, hogy mi van még beépített szerkesztés.
A DEMO oldalon egy szöveget látsz egy szöveggel. Mozgassa a kurzort a blokk bármely részén, és megjelenik egy kis szerkesztési ikon. Úgy néz ki, mint egy ikon a Facebook-ról.
Ha rákattint a blokkon belül a szöveget, vagy maga az ikon, a blokk helyébe a textarea a formát, a Mentés és a Mégse gomb jelenik meg az oldal alján.
Most további részletek
A kötést és az "felszabadítót" használtam. Egyszerű szavak, az elemet az egérkattintással köthetjük. Ezzel ellentétben "elveszi" az esemény elemét. Minden nagyon egyszerű. A 9. sorban a kód alább bemutatott szánunk a click esemény minden eleme a „InlineEdit” osztályú, és rendelje hozzá a „UpdateText” funkció a felvezető. Ez azt jelenti, hogy minden alkalommal, amikor rákattint az "Inlineedit" blokkba, az "UpdateText" funkció elindul. Ez a funkció helyettesíti a blokkot a Textarea szövegformával.
Most tekintse meg a mentési funkciót. Csak akkor kezdődik, amikor a "Mentés" gombra kattint. Itt csak eltömíti a szerkesztett szöveget a változóhoz, és futtatjuk az Update.php fájlon keresztül. Meg fogja venni, hogy a frissítés frissítése közben megjelenik a letöltési ikon. Visszatérünk egy üzenetet a PHP oldal válaszával. A végén töröljük a "kiválasztott" osztályt az elemen, majd beillesztjük a frissített szöveget a felhasználó által, a DIV-ban.
A CANCEL funkció megkezdődik az elem aktiválásakor az osztály .Rert. Ez a funkció egyszerűen törli a "kiválasztott" osztályt, mint az előző funkciót, de beilleszti az eredeti behelyezést a DIV blokkba, és nem szerkesztett szöveget.
$ (Function slideout () () (SettImeout (funkció () ($ (# válasz)). Slideup ("lassú", funkció () ());), 2000);) $ (".inlineedit"). Bind (" Kattintson a ", UpdatEtext); Var Origmondext, NewText; $ (". Mentés "). Live (" kattintás ", funkció () ($ (# betöltés). fadein (" lassú "); newtext \u003d $ (ez). testvérek ("forma"). Gyermekek ("szerkesztés"). Val (); var id \u003d $ (ez) .Parent (). Att ("ID"); VAR DATA \u003d "? ID \u003d" + ID + " szöveg \u003d "+ newtext; $ .post (" update.php ", adatok, függvény (válasz) ($ (" # válasz "). HTML (válasz); $ (" #response "). Slidentown (" lassú "). ; Slideout (); $ ("# betöltés"). FadeOut ("lassú");))); $ (ez) .Parent () html (newtext) .removeclass ("Kiválasztott"). Bind ("Kattintson", UpdatEtext);)); $ (". Visszatérés"). Live ("kattintás", funkció () () ($ (ez) .plent (). , UpdatEtext);)); Funkció UpdateText () ($ ("Li"). Removeclass ("inlineedit"); orig mondex \u003d $ (ez) .html (), $ (ez). HTML ("
") .Unbind (" Kattintson az ", UpdatreText);)))));
PHP.
Html
A HTML nagyon egyszerű, és a lista egyik elemét képviseli az "Inlineedit" osztályhoz, ami szerkeszthetővé teszi. Felveheti hány szerkeszthető elemek az oldalt, de ne felejtsük el, hogy jelöljenek ki egy egyedi azonosítót, hogy mindegyikre.
jquery inline-szerkesztés 
Kattintson az alábbi szövegre a szerkesztéshez.
- Lorem Ipsum ....
Szabadon keres, hogy szerkesztők "dúsított" szöveget használjon? Ha igen, szerencsés, hogy eljutsz a kívánt oldalra. Ebben a felülvizsgálatban 10 kiváló ingyenes gazdag szöveges szerkesztőt kínálunk Önnek. Szerkesztők "dúsított" szöveg Engedje meg, hogy szerkesztheti és írja be a szöveget egy webböngészőből. Különböző módon vesznek részt, biztosítva a felhasználót azzal a lehetőséggel, hogy elhelyezzük a generált tartalmat és formázva őket.
Reméljük, hogy a listánk valóban a legjobb megoldásokat kínálja. Nyugodtan megoszthatja velük barátaival, és velünk a választás véleménye. Teljes lista előtt.
Boldog nézet!
Ckaditor - Egy szabad szöveg HTML-szerkesztő nyílt forráskódú, amely megkönnyíti a webhely tartalmának tartalmának kitöltését. WYSIWYG szerkesztő, amely megnyitja a szöveges feldolgozó szokásos funkcióihoz közvetlenül a weboldalakról. Készítsen munkát a webhelyén kényelmesebbé a szerkesztővel az egész közösség által szolgáltatott.
markitup! Nem volt szerkesztő, "mindig készen és az on-os-hands." Ez ellenkezőleg, nagyon kompakt, rugalmas a beállításban és egy olyan szolgáltatás munkájában, amely fejlesztőként szolgálhat a CMS, blogok, fórumok vagy webhelyek hibakeresésénél. Markitup! - Nem WYSIWYG szerkesztő, és soha nem lesz.
Nakar. - Kompakt, interplatform, beépített tartalomszerkesztő a weboldal tartalmát könnyen és csak jobbra a böngészőben.
Tinymce. - Nem parancsolt JavaScript / HTML távú WYSIWYG szerkesztés, amely nyílt forráskódú hálózati alapforrásként és biztonságos LGPL licencként jelenik meg. A Tinymce átalakíthatja a HTML Textarea mezőket és más HTML elemeket szerkesztési egységenként.
Ingyenes Inter-Platform Wysiwyg szerkesztő, A "dúsított" szöveg szerkesztésének minden funkciójával van ellátva, amelyre szükség van a tartalomkezelő rendszer észrevehető javításához.
jquery te egy jquery modul. Kompakt (19,5 kb) és egy nagyon kényelmes HTML-szerkesztő. WYSIWYG rendszeren dolgozik.
És ami a legfontosabb, csak 1 perc alatt beágyazhatja a rendszerét. És az interfész bármit is módosítható. Még a CSS-osztályok is cserélhetők.
Keresi a gazdag szöveges szövegszerkesztőt a jquery erőforrásokhoz, anélkül, hogy túlzott lenne? Ön felkeltette!
Egyszerű, kompakt, bővíthető HTML-szerkesztő JQuery alapú, WYSIWYG alapelvén dolgozik. Világos kijelző segítségével megjeleníti a WYSIWYG-HTML szerkesztő az oldalon minden a szövegszerkesztő DOM elemet az oldalon belül. Könnyű szkript "súlya" 9.17 KB; CSS képek együtt "húzzunk" 25,9 kb.
uédtor Rugalmas és könnyen használható. Ez többek között egy hegyi tisztességes megfelelő kódot (igazságot igényel az előírt módon), többek között a saját stílusú stílusokat használhat WYSIWYG módban. A szolgáltatás funkcionalitása még jobban növelhető, a további modulok könnyen használható rendszerének köszönhetően.
Whizzywig segítségével minden egyszerű. Lehetővé teszi a "dúsított" formázott szöveget a webablakban. Igazából írja az XHTML-t, de nem kell saját HTML-rétegnek lennie, hogy használja őket. Ha tudod, hogyan kell használni a szöveges processzort vagy e-mailt, akkor megbirkózzon vele.
Visualit szerkesztőt keresek, kellemes szemmel, hogy nem kellett újra a design, és ismét tölteni időt. A folyamatban számos vizuális szerkesztőt találtam és tapasztaltam. A mortage vizuális szerkesztők a webhelyen egy egyszerű cselekvési rendszert mutatnak be. Számos szkriptet kérnie kell a fejcímkéhez (a teljes mappát a kiszolgáló vizuális szerkesztőjének letöltése után). A letöltött fájlokon rendszerint a DEMO verziója általában rendelkezésre áll, ez az oldal kódja egyszerűen megkaphatja a kívánt szkriptek nevét. Itt van egy kis kód, amelyet a testoldalakon használnak a védelem nélküli szerkesztő számára. Ezt a HTML-formában helyezzük el, ahol szükségünk van.
A vizuális szerkesztők különböző feldolgozással rendelkező fajokra oszthatók. Tehát találkoztam a vizuális szerkesztőkkel a jquery, a pootools, az ActiveX és a JavaScript alapján.
Vizuális szerkesztők a Mootools használatával
Nagyon érdekes vizuális szerkesztőket kaptam ezen a technológia alapján. Azonban az összeférhetetlenség miatt a helyszínen már használt jquery szkriptekkel, más szükségletekre, továbbra is több univerzális keresést keresek.
Példa a Visual Editor Moooditabed használatával Mootools
A címkék között beillesztett szkriptek<Fej.>Fej.>:
Használat B.
Itt van a standard textarea űrlapcímke, amely a beviteli mezőt akkor is, ha le van tiltva
JavaScript a felhasználóból (bár a vizuális szerkesztő minden lehetősége nem fog működni).
Töltse le a Mooodable vizuális szerkesztőt
Példa GGEDIT, Visual Mootools-alapú szerkesztő
A Firefoxban ez a vizuális szerkesztő ("Gedit") nem volt hajlandó dolgozni egyáltalán. Ahogy a felhasználó Mozilla, egyáltalán nem illett nekem.
Az interfész azonban ilyen vizuális szerkesztővel rendelkezik (például a "Gedit" (a forrás letölthető)) tetszett.
Vizuális jquery szerkesztők
Ez a vizuális szerkesztő (WKRTE) jó volt, ha a moduláris ablakok (kép beillesztése, linkek) nem voltak elárasztva a képernyőkön kívül
Példa WKRTE, Visual JQuery-alapú szerkesztő:
Érdemes megjegyezni, hogy a fő szkriptek nincsenek behelyezve
…Ahol, többnyire stílusok (CSS) kéri:
Az alapvető szkriptek a zárócímke előtt lesznek
