Foarte des, în procesul de editare a conținutului site-ului, este necesar (și, de asemenea, foarte convenabil) să vedeți rezultatul final pe pagina browserului. Folosind proprietatea etichetelor HTML5 - contenteditable, Jquery, Ajax și PHP, vom crea un editor de text HTML5 simplu.

Editorul nostru va avea următoarele proprietăți:
- atunci cand dai click pe textul destinat editării, acest text poate fi editat imediat;
- când apăsați tasta Escape după editarea textului, toate modificările aduse textului curent sunt anulate;
- când pierdeți focalizarea sau faceți clic pentru a edita un alt text, textul modificat este trimis către server, este afișat un mesaj despre starea trimiterii și răspunsul serverului.

Mai jos este codul HTML al paginii editate:

După cum puteți vedea, fiecare text editabil este inclus într-o etichetă cu proprietatea activată contenteditabil- o caracteristică HTML5 care vă permite să editați text direct în browser. Pentru a salva pe server, trebuie să identificați cu exactitate textul editat, astfel încât id-ul nostru conține identificatorul materialului și câmpul bazei de date, separate printr-un caracter de subliniere, de exemplu - id="item1_title".

În antetul paginii noastre, includem style.css și jquery:

Acceptăm textul nostru editat pe server - fișier save.php

Editorul nostru este deosebit de convenabil pentru datele tabulare (de exemplu, o listă de prețuri), unde nu este nevoie de design text, dar trebuie să corectați rapid sau să introduceți date noi (vom moderniza scriptul). Pentru mine, modernizez scriptul pentru a face, completa baza de date a bunurilor. Completarea bazei de date în acest fel va fi la fel de convenabilă ca și în Excel, cu care suntem atât de obișnuiți.

In ciuda faptului ca WYSIWYGși Markdown editori vizuali sunt limitate în comparație cu editorii de cod sursă, pot face editarea conținutului de bază al unei pagini mult mai ușoară. Prin urmare, în această postare am adunat cele mai bune WYSIWYGși Editori vizuali Markdown conținut care poate fi utilizat atât în ​​dezvoltarea de site-uri web backend, cât și în partea frontală.

ContentTools

Cele mai originale text din această colecție. Cu toate acestea, nu este potrivit pentru toate proiectele datorită specificului său.

ContentTools este încorporat în pagina de conținut în sine. Pentru a începe editarea, trebuie să faceți clic pe pictograma corespunzătoare, după care va apărea panoul de editare a conținutului. Acest lucru este foarte convenabil, deoarece atunci când creați un material, vedem imediat cum va arăta pe pagină.

Personal, mi se pare că se aseamănă la distanță cu Editor Evernote, dar cu o bară de instrumente diferită.

AlloyEditor

Editor de conținut vizual AlloyEditor se bazează pe popularul CKEditor. El este foarte asemănător cu Editor mediuși are o gamă destul de largă de funcții, cum ar fi: Încărcarea imaginilor Drag&Drop, diverse stiluri de bară de instrumente etc.

Acesta este un editor care este foarte plăcut de folosit.

SimpluMDE

Sintaxa lui Markdown este destul de dificil de înțeles de către utilizatorul obișnuit, al cărui scop este pur și simplu să adauge conținut pe pagină. Dezvoltatorii SimpleMDE au încercat să facă Editor Markdown astfel încât oricine să poată lucra în ea, chiar și fără cunoștințe tehnice speciale.

Substanţă

Substanța este simplă editor de conținut vizual în JavaScript. Orice utilizator care decide să adauge conținut pe site-ul tău poate lucra cu ușurință cu acesta.

Editor.md

Încorporat online editor de reduceri sursa deschisa. Pentru ușurință în utilizare, este împărțit în două părți. În stânga este marcajul tradițional Markdown, iar în dreapta este reprezentarea vizuală a conținutului.

După cum știți, editarea inline sau, cu alte cuvinte, abilitatea de a edita conținut direct pe pagină, este un lucru foarte util care ar trebui să fie întotdeauna la îndemână. Vă voi arăta cum funcționează totul, precum și cum să actualizați instantaneu partea editată de pe pagină folosind PHP și cum să aplicați toate modificările în baza de date.

Codul

Acum voi explica ce este exact editarea inline.

Pe pagina Demo veți vedea un bloc cu ceva text. Plasați cursorul peste orice parte a acestui bloc și veți vedea o mică pictogramă de editare. Arată ca o pictogramă de pe Facebook.

Dacă dați clic în interiorul blocului cu text sau pe pictograma propriu-zisă, blocul va fi înlocuit cu formularul textarea, iar butoanele de salvare și anulare vor apărea în partea de jos.

Acum mai mult

Am folosit bind and unbind. În termeni simpli, putem lega un eveniment de clic de mouse la un element. Și invers, puteți „înlătura” acest eveniment din element. Totul este destul de simplu. În a 9-a linie a codului de mai jos, atribuim un eveniment de clic tuturor elementelor cu clasa „inlineEdit” și atribuim funcția „updateText” ca handler. Aceasta înseamnă că de fiecare dată când faceți clic în interiorul blocului „inlineEdit”, funcția „updateText” va rula. Această funcție înlocuiește un bloc de text cu forma textarea.

Acum luați în considerare funcția de salvare. Acesta va rula doar când faceți clic pe butonul „Salvare”. Aici pur și simplu punem textul editat într-o variabilă și îl rulăm prin fișierul update.php. Veți observa că, în timp ce actualizarea este în curs, este afișată o pictogramă de descărcare. De asemenea, vom afișa un mesaj de răspuns din pagina PHP. La final, vom elimina clasa „selectată” din element și apoi vom lipi textul actualizat din zona de text introdusă de utilizator în div.

Funcția de anulare va rula atunci când este activat un element cu clasa .revert. Această funcție elimină pur și simplu clasa „selectată”, ca în funcția anterioară, dar inserează textul original, nu textul editat, în div.

$(document).ready(function () ( function slideout() ( setTimeout(function () ( $("#response").slideUp("lent", function () ()); ), 2000); ) $ ("".inlineEdit").bind("click", updateText); var OrigText, NewText; $(".save").live("clic", function () ( $("#loading").fadeIn( "lent"); NewText = $(this).frati("form").children(".edit").val(); var id = $(this).parent().attr("id"); var data = "?id=" + id + "&text=" + NewText; $.post("update.php", date, funcție (răspuns) ( $("#response").html (răspuns); $( „ #răspuns”).slideDown(„lent”); slideout(); $(„#încărcare”).fadeOut(„lent”); )); $(this).parent().html(NewText).removeClass ( „selectat”).bind(„clic”, updateText); )); $(”.revert”).live(„clic”, funcția () ( $(this).parent().html(OrigText). removeClass ("selectat").bind("click", updateText); )); function updateText() ( $("li").removeClass("inlineEdit"); OrigText = $(this).html(); $ ( aceasta).addClass("selectat").html("

„+OrigText+””

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

PHP

HTML

HTML-ul este foarte simplu și este un singur element de listă cu clasa „inlineEdit”, ceea ce îl face editabil. Puteți adăuga în pagină câte elemente editabile doriți, dar nu uitați să acordați fiecăruia dintre ele un ID unic.

jQuery Inline-Edit

Faceți clic pe textul de mai jos pentru a-l edita.

• Lorem Ipsum....

Căutați gratuit să utilizați editori de text îmbogățit? Dacă da, atunci ești norocos că ai ajuns pe pagina potrivită. În această recenzie, vă oferim 10 editori de text îmbogățit gratuit. Editorii de text îmbogățit vă permit să editați și să introduceți text dintr-un browser web. Ele sunt folosite în moduri diferite, oferind utilizatorului posibilitatea de a posta conținut generat și formatat de acesta.

Sperăm că lista noastră vă va oferi cu adevărat cele mai bune soluții. Simțiți-vă liber să-l împărtășiți prietenilor dvs. și cu noi părerile voastre despre această colecție. Iată lista completă.

Vizionare fericită!

CKEditor este un editor de text HTML gratuit și cu sursă deschisă, conceput pentru a vă facilita completarea unui site web cu conținut. Editor WYSIWYG care vă oferă acces la funcțiile familiare ale procesorului de text direct din paginile web. Îmbunătățiți-vă experiența pe site cu acest editor bazat pe comunitate.

MarkItUp! nu este conceput ca un editor „întotdeauna gata și cu toate mâinile”. Dimpotrivă, este un serviciu foarte compact, flexibil în configurare și operare, care poate servi dezvoltatorului atunci când își depanează CMS-ul, blogurile, forumurile sau site-urile web. MarkItUp! nu este un editor WYSIWYG și nu va fi niciodată.

NiceEdit- un editor de conținut compact, multi-platformă, încorporabil pentru a varia conținutul site-ului web cu ușurință și simplu chiar în browser.

TinyMCE este o consolă de editare WYSIWYG în afara platformei Javascript/HTML lansată ca resursă web bazată pe sursă deschisă și protejată de LGPL. TinyMCE poate converti câmpurile HTML TEXTAREA și alte elemente HTML în unități de editare.

Editor WYSIWYG multiplatform gratuit, dotat cu toate funcțiile de editare a textului îmbogățit de care aveți nevoie pentru a vă îmbunătăți dramatic sistemul de gestionare a conținutului.

jQuery TE este un modul jQuery. Editor HTML compact (19,5 Kb) și foarte util. Funcționează conform schemei WYSIWYG.
Și cel mai important, poate fi introdus în sistemul dumneavoastră în doar 1 minut. Și interfața sa poate fi modificată după cum doriți. Chiar și clasele CSS pot fi înlocuite.

Căutați un editor de text Rich-Text fără fiori pentru resursele jQuery? Ai venit la locul potrivit!

Un editor HTML WYSIWYG simplu, compact, extensibil bazat pe jQuery. Un mijloc de a afișa cu ușurință un editor WYSIWYG-HTML în locul oricărui element DOM TextArea dintr-o pagină. Scriptul ușor „cântărește” 9,17 Kb; CSS cu imagini împreună „trage” 25,9 Kb.

uEditor flexibil și ușor de utilizat. Produce cod clar, funcțional (deși unul care trebuie certificat în modul prescris), printre altele, puteți folosi propria foaie de stil pentru a lucra în modul WYSIWYG. Funcționalitatea serviciului poate fi îmbunătățită și mai mult datorită unui sistem ușor de utilizat de module suplimentare.

Cu Whizzywig, este ușor. Vă permite să compuneți text formatat „bogat” în fereastra web. De fapt, scrie în XHTML, dar nu trebuie să cunoști HTML pentru a-l folosi. Dacă știi să folosești un procesor de text sau un e-mail, atunci te poți descurca.