Enkel Jquery -redigerare för att redigera HTML5 -text och spara med ajax. Inline redigering med jQuery och PHP Jquery textredigerare

Som du vet är inline -redigering, eller med andra ord, möjligheten att redigera innehåll direkt på sidan en mycket användbar sak som alltid bör finnas till hands. Jag kommer att berätta hur det hela fungerar, och också visa dig hur med använder PHP uppdatera omedelbart den redigerade delen på sidan och hur du gör alla ändringar i databasen.

Koda

Nu ska jag förklara vad inline -redigering handlar om.

På demosidan ser du ett block med lite text. Håll muspekaren över valfri del av det här blocket så ser du en liten redigeringsikon. Det ser ut som en Facebook -ikon.

Om du klickar inuti blocket med texten eller på själva ikonen, kommer blocket att ersättas med textområdesformuläret och knapparna för att spara och avbryta visas längst ner.

Nu mer i detalj

Jag använde bindning och avbindning. I enkla ord, kan vi binda en musklickhändelse till elementet. Omvänt kan du "ta bort" denna händelse från ett element. Det är ganska enkelt. På den nionde raden i koden nedan tilldelar vi en klickhändelse till alla element med "inlineEdit" -klassen och tilldelar hanteraren "updateText" -funktionen. Det betyder att varje gång du klickar inuti blocket "inlineEdit" körs "updateText" -funktionen. Denna funktion ersätter ett textblock med formuläret textområde.

Låt oss nu titta på spara -funktionen. Den körs bara när du klickar på knappen "Spara". Här trycker vi bara in den redigerade texten i en variabel och kör den genom filen update.php. Du kommer att märka att medan en uppdatering pågår visas en nedladdningsikon. Vi kommer också att visa ett svarsmeddelande från PHP -sidan. Slutligen kommer vi att ta bort den "utvalda" klassen från elementet och infoga sedan den uppdaterade texten från textområdet, inmatat av användaren, i div -blocket.

Avbrytningsfunktionen körs när elementet med .revert -klassen är aktiverat. Denna funktion tar helt enkelt bort den "utvalda" klassen som i föregående funktion, men infogar originaltexten i div, inte den redigerade texten.

$ (dokument) .ready (function () (function slideout () (setTimeout (function () ($ ("# svar"). slideUp ("slow", function () ());), 2000);) $ (".inlineEdit"). bind ("click", updateText); var OrigText, NewText; $ (". save"). live ("click", function () ($ ("# loading"). fadeIn (" långsam "); NewText = $ (detta) .siblings (" form "). barn (". redigera "). val (); var id = $ (detta) .parent (). attr (" id "); var data = "? id =" + id + "& text =" + NewText; $ .post ("update.php", data, funktion (svar) ($ ("# svar"). html (svar); $ ( "#response"). slideDown ("slow"); slideout (); $ (" # loading"). fadeOut ("slow");)); $ (this) .parent (). html (NewText) .removeClass ("vald"). bind ("klicka", updateText);)); $ (". återgå"). live ("klicka", funktion () ($ (detta) .parent (). html (OrigText). removeClass ("vald"). bind ("click", updateText);)); function updateText () ($ ("li"). removeClass ("inlineEdit"); OrigText = $ (this) .html (); $ (detta) .addClass ("valt"). html ("

" + OrigText +" "

") .unbind (" klicka ", updateText);)));

PHP

Html

HTML är mycket enkelt och består av ett enda listobjekt med klassen "inlineEdit", vilket gör det redigerbart. Du kan lägga till så många redigerbara element som du vill på sidan, men kom ihåg att tilldela ett unikt ID till var och en.

jQuery Inline-Edit

Klicka på texten nedan för att redigera den.

• Lorem Ipsum ....

Letar du efter gratis att använda rich text -redigerare? Om så är fallet har du tur att du är på rätt sida. I den här recensionen ger vi dig 10 fantastiska gratis textredigerare. Rich text -redigerare låter dig redigera och skriva från en webbläsare. De används på olika sätt, vilket ger användaren möjlighet att lägga upp genererat och formaterat innehåll av honom.

Vi hoppas att vår lista kommer att erbjuda dig de riktigt bästa lösningarna. Dela den gärna med dina vänner och med oss ​​dina åsikter om den här samlingen. Här är en komplett lista.

Glad titt!

CKEditorär en gratis HTML -textredigerare med öppen källkod som är utformad för att göra det lättare för dig att fylla din webbplats med innehåll. En WYSIWYG -editor som ger dig tillgång till välbekanta ordbehandlingsfunktioner direkt från webben. Förbättra din webbplatsupplevelse med denna community-driven redaktör.

markItUp! Inte tänkt som en alltid redo-and-of-all-trades redaktör. Tvärtom, det är en mycket kompakt, flexibel konfiguration och driftstjänst som kan tjäna en utvecklare vid felsökning av hans CMS, bloggar, forum eller webbplatser. markItUp! är inte en WYSIWYG -redaktör och kommer aldrig att göra det.

NicEdit- kompakt, plattformsoberoende, inbäddningsbar innehållsredigerare för varierande webbplatsinnehåll enkelt och enkelt direkt i webbläsaren.

TinyMCEär en Javascript / HTML WYSIWYG-redigeringskonsol utanför plattformen som släpptes som en webbaserad resurs med öppen källkod och skyddad av LGPL. TinyMCE kan konvertera HTML TEXTAREA -fält och andra HTML -element till redigeringsenheter.

Gratis WYSIWYG-redigerare över flera plattformar packad med alla funktioner för redigering av rik text som du behöver för att dramatiskt förbättra ditt innehållshanteringssystem.

jQuery TE är en jQuery -modul. Kompakt (19,5 Kb) och mycket lättanvänd HTML -editor. Fungerar enligt WYSIWYG -schemat.
Viktigast av allt, det kan vara inbäddat i ditt system på bara 1 minut. Och dess gränssnitt kan ändras som du vill. Även CSS -klasser kan ersättas.

Letar du efter en no-nonsense Rich-Text-textredigerare för jQuery-resurser? Du har kommit till rätt ställe!

En enkel, kompakt, utökningsbar jQuery-baserad HTML-editor som fungerar på ett WYSIWYG-sätt. En möjlighet att enkelt visa en WYSIWYG HTML -redigerare i stället för alla TextArea DOM -element på sidan. Det lätta manuset "väger" 9,17 Kb; CSS med bilder tillsammans "dra" 25,9 Kb.

uEditor flexibel och lätt att använda. Ger en tydlig, användbar kod (om än en som kräver certifiering på föreskrivet sätt), bland annat kan du använda ditt eget stilark för att arbeta i WYSIWYG -läge. Tjänstens funktionalitet kan förbättras ytterligare tack vare ett lättanvänt system med ytterligare moduler.

Med Whizzywig är det enkelt. Gör att du kan skriva rik formaterad text i ett webbfönster. Han skriver faktiskt i XHTML, men du behöver inte kunna HTML för att använda det. Om du vet hur du använder en ordbehandlare eller e-post kan du göra det också.

Jag letade efter en visuell redaktör som var tilltalande för ögat så att jag inte behövde göra om designen och slösa tid. I processen hittade och testade jag flera visuella redaktörer. Installera visuella redaktörer på en webbplats ger ett enkelt handlingssystem. Det är nödvändigt att lägga ett antal förfrågningar om skript i HEAD -taggen (efter att hela mappen har laddats upp med den visuella redigeraren till servern). De nedladdade filerna ger vanligtvis en demoversion av användningen, det är från koden på denna sida som du enkelt kan få namnen på skripten du behöver. Här finns också en liten kod som används på BODY -sidan för direkt användning av redigeraren. Vi kommer att placera det på plats i html-form där vi behöver det.
Visuella redaktörer är indelade i vyer med olika behandlingar. Så jag träffade visuella redaktörer baserade på jQuery, MooTools, ActiveX och bara JavaScript.

Visuella redaktörer som använder MooTools
Jag stötte på några mycket intressanta visuella redaktörer baserade på denna teknik. På grund av inkompatibilitet med jQuery -skript som redan används på webbplatsen för andra behov fortsatte jag dock att leta efter något mer universellt.

Exempel på MooEditable visuell redigerare med MooTools

Skript infogade mellan taggar<HUVUD>HUVUD>:

Använda i

Textområde 1 —Här är texten skriven i en visuell redigerare—

Den använder standardformuläret TEXTAREA, vilket gör att inmatningsfältet fungerar även om det är inaktiverat
JavaScript för användaren (även om alla alternativ i den visuella redigeraren inte fungerar).
Ladda ner Visual Editor MooEditable

Exempel ggEdit, en visuell redigerare baserad på MooTools
I FireFox vägrade den här visuella redigeraren ("ggEdit") att fungera alls. Som Mozilla -användare passade detta inte alls för mig.
Jag gillade dock gränssnittet för en sådan visuell redigerare (exempel "ggEdit" (källan kan laddas ner)).

JQuery -baserade visuella redaktörer
Den här visuella redigeraren (WKRTE) skulle förmodligen vara trevlig om de modulära fönstren (bildinsättning, länkar) inte dyker upp utanför skärmramen
Exempel WKRTE, jQuery -baserad visuell redigerare:

Det är anmärkningsvärt att huvudskripten inte infogas i … där i princip stilförfrågningar (CSS):

Huvudskripten visas före den avslutande taggen:

<KROPP>

--Något innehåll--

Visual editor AJAX, jQuery, JavaScript

Denna visuella redigerare ("CKEditor") använder en rik palett av teknik i sina användningsfall. Även om AJAX här tjänar snarare hjälp - snarare än nyckelfunktioner i den visuella redigeraren. Huvudbibliotek: jQuery, JavaScript.
Jag utförde inte noggranna tester för kompatibilitet mellan webbläsare, men i mina webbläsare fungerar det med en smäll, som inte kunde annat än glädjas. Ett ytterligare plus är det ryska språket!

Skript: kan vara annorlunda. Ett exempel:

Huvudbibliotek i HEAD:

<HUVUD>

HUVUD>

<KROPP>

--Något innehåll--

Mycket ofta, under redigeringen av webbplatsinnehåll, är det nödvändigt (och också mycket bekvämt) att se det färdiga resultatet på webbläsarsidan. Med hjälp av egenskapen HTML5 -taggar - contenteditable, Jquery, Ajax och PHP, låt oss skapa en enkel HTML5 -textredigerare för webbplatsen.

Vår redaktör kommer att ha följande egenskaper:
- när du klickar på den text som är avsedd för redigering kan denna text redigeras omedelbart;
- när du trycker på Escape -tangenten efter att du redigerat texten avbryts alla ändringar av den aktuella texten;
- om du tappar fokus eller klickar för att redigera en annan text, skickas den ändrade texten till servern, ett meddelande visas om statusen för servern som skickar och svarar.

Nedan är HTML -koden för sidan som redigeras:

Som du kan se ingår varje redigerbar text i en tagg med den aktiverade egenskapen nöjd- en funktion i HTML5 som låter dig redigera text direkt i webbläsaren. För att spara på servern måste du exakt identifiera den redigerade texten, så vårt ID innehåller materialidentifieraren och databasfältet, åtskilda av en understrykning, till exempel - id = "item1_title".

I sidhuvudet, inkludera style.css och jquery:

Vi accepterar vår redigerade text på servern - filen save.php

Vår redaktör är särskilt bekväm för tabelldata (till exempel prislista), där textdesign inte behövs, men du måste snabbt korrigera eller lägga till ny data (vi kommer att modernisera skriptet). För mig själv ändrar jag skriptet för att lägga till, fyll i produktdatabasen. Att fylla i databasen på detta sätt kommer att vara lika bekvämt som i Excel, som vi är så vana vid.

Ge användarna möjlighet formatera text utan att lära sig ytterligare kod är något som utvecklare har arbetat hårt med de senaste åren. Och allt är inte förgäves, de har redan gjort betydande framsteg. Här är de 10 mest använda WYSIWYG -redaktörer... Vi hoppas att du hittar något för dina egna projekt.

01. NicEdit

NicEditär ett bra alternativ till stora och otympliga redaktörer. Den innehåller alla nödvändiga funktioner, men är fortfarande väldigt lätt att integrera på webbplatsen.

02. TinyMCE

TinyMCEär en gratis javascript HTML WYSIWYG -editor. Det är enkelt att integrera på en webbplats och erbjuder ett brett utbud av anpassnings- och utseendealternativ. TinyMCE är förmodligen den mest "kompletta" redaktören i vår samling idag. Nästan MSWord.

03. CKEditor

CKeditorÄr den nya FCKEditor, som tidigt har vunnit titeln marknadsledande. Redaktören är utvecklad på grundval och syftar till att åtgärda vilka problem som uppstod i FCKEditor. Resultatet är en mycket produktiv WYSIWYG -editor som erbjuder alla funktioner du normalt skulle använda i MSWord eller Open Office.

04. YUI Rich Text Editor

YUI Rich Text EditorÄr ett grafiskt användargränssnitt från Yahoo som förvandlar ett enkelt textinmatningsfält till en fullvärdig WYSIWYG-editor. Applikationen finns i olika versioner, med olika egenskaper och innehåll. Men om du använder någon av versionerna får du alla funktioner du behöver för redigeraren.

MarkitupÄr ett jQuery -plugin som låter dig göra ett vanligt textinmatningsfält till en tagg- och formateringsredigerare. Html, Wiki och BBcode är bara några av vad plugin -programmet erbjuder. Markitup är inte en WYSIWYG -redigerare, men det gör det inte värre eftersom det erbjuder dig all funktionalitet du behöver.

06. FreeTextBox

FreeTextBoxär en HTML -editor utformad speciellt för ASP.NET. Redaktörens utseende liknar mycket Microsoft Word. Den fria versionen har inte riktigt många funktioner, men den har allt du behöver.

07. MooEditable

WYSIWYG -redaktörer erbjuder för det mesta nu plugins för det populära jQuery -biblioteket och i mindre fall Mootools. MooEditableöverbryggar klyftan ganska bra med ett enkelt men mycket effektivt javascript -bibliotek. Om du är ett fan av Mootools har du inga problem med det.

08. OpenWysiwyg?

OpenWysiwygÄr en cross-browser fullvärdig redaktör med alla nödvändiga funktioner. Det innehåller till och med attraktiva rullgardinsmenyer och knappar. Tyvärr stöder inte Chrome det.

09. Spaw Editor- sajten är död

Spaw EditorÄr en WYSIWYG -editor som gör det möjligt för webbplatsutvecklare att ersätta standardtextfält med en hanterbar HTML -editor, med ett stort antal inställningar, på många språk och med möjligheten att ändra utseende.

10.jHtmlArea

jHtmlAreaÄr en annan WYSIWYG textredigerare som är ett plugin för Jquery. Målet med plugin är enkelhet och användarvänlighet. Den innehåller alla nödvändiga funktioner. Du kan anpassa utseende, funktionalitet och språk.