wejścieProsty edytor jQuery do edycji tekstu HTML5 i zapisywanie się z AJAX. Wbudowany edytor za pomocą edytora tekstu jQU i PHP jQP
Jak wiesz, wbudowany edycję lub innymi słowy, możliwość edycji treści bezpośrednio na stronie jest bardzo przydatną rzeczą, która powinna zawsze być w dłoni. Powiem ci, jak to działa, a także pokazać, jak za pomocą PHP. Natychmiast zaktualizuj edytowaną część na stronie i jak wprowadzić wszystkie zmiany w bazie danych.
Kod
Teraz wyjaśnię, co wciąż jest w stanie edycji.
Na stronie demo zobaczysz blok z tekstem. Przesuń kursor na dowolnej części tego bloku, a zobaczysz małą ikonę edycji. Wygląda jak ikona z Facebooka.
Jeśli klikniesz w bloku z tekstem lub na samej ikonie, blok zostanie zastąpiony formularzem Textlai, a przyciski Zapisz i Anuluj pojawią się na dole.
Teraz więcej szczegółów
Użyłem wiązania i "uwolnić". Proste słowa, Możemy wiązać element za pomocą kliknięcia myszą. I odwrotnie, możesz "zabrać" element ten wydarzenie. Wszystko jest dość proste. W 9. linie przedstawionego poniżej linii przypisujemy zdarzenie Click do wszystkich elementów z klasą "Inlineedit" i przypisania funkcji "UpdateText" do przewodnika. Oznacza to, że za każdym razem klikniesz w blok "Inlineedit", zostanie uruchomiona funkcja "UpdateText". Ta funkcja zastępuje blok tekstem tekstowym Textarea.
Teraz rozważ funkcję Zapisz. Zacznie się tylko po kliknięciu przycisku "Zapisz". Tutaj tylko zatykamy edytowany tekst do zmiennej i uruchom go za pomocą pliku aktualizacji.php. Zauważysz, że podczas aktualizacji jest aktualizowany, wyświetlana jest ikona pobierania. Wypłacimy również wiadomość z odpowiedzią z strony PHP. Na końcu usuwamy klasę "wybraną" w pozycji, a następnie włóż zaktualizowany tekst z Textarea, wprowadzony przez użytkownika w Div.
Funkcja Anuluj rozpoczyna się podczas aktywowania elementu za pomocą klasy.Rert. Ta funkcja po prostu usuwa klasę "wybraną", jak w poprzedniej funkcji, ale wstawia oryginalne wstawianie do bloku div, a nie edytowany tekst.
$ (Funkcja SlideOut () (Settimeout (Funkcja () ($ (ASPACTION "). SlideUp (" powolny ", funkcja () ();), 2000);) $ (" .inlineedit "). Bind (" Kliknij ", UpdateText); Var OrigText, NewText; $ (". Zapisz "). Live (" Kliknij ", funkcja () ($ (# Loading"). Fadein ("SLOW"); rodzeństwo ("formularz"). Dzieci ("Edycja"). Val (); var ID \u003d $ (to) .Parent (). attr ("ID"); var dane \u003d "ID \u003d" + ID + "& Tekst \u003d "+ Newtext; $ .post (" Update.php ", dane, funkcja (odpowiedź) ($ (" # odpowiedź "). HTML (odpowiedź); $ (" #response "). Slidedown (" Slow ") ; Slideout (); $ ("# Loading"). Fadeout ("SLOW");)); $ (to) .Parent (). HTML (NewText) .Removeclass ("wybrany"). Bind ("kliknij", UpdateText);));)); $ (". Revert"). Live ("Kliknij", funkcja () ($ (to) .Parent (). HTML (origtext) .Removeclass ("wybrany") , UpdateText);)); Funkcja UpdateText () ($ ("LI"). Removeclass ("inlineedit"); origtext \u003d $ (to) .html (); $ (to) .adclass ("wybrany"). html ("
") .Unbind (" Kliknij ", UpdateText);));
PHP.
Html.
HTML jest bardzo prosty i reprezentuje jeden element listy z klasą "inlineedit", co czyni go edytowalnym. Możesz dodać liczbę edytowalnych elementów do strony, ale nie zapomnij przypisać unikalnego identyfikatora do każdego z nich.
jQuery inline-edit 
Kliknij poniższy tekst, aby go edytować.
- Lorem Ipsum ....
Szukasz darmowego tekstu redaktorów "wzbogacony"? Jeśli tak, masz szczęście, że dostaniesz się na żądaną stronę. W tej recenzji oferujemy 10 doskonałych darmowych redaktorów tekstowych. Edytory "wzbogacony" tekst umożliwiają edycję i typ tekstu z przeglądarki internetowej. Są one zaangażowani na różne sposoby, zapewniając użytkownikowi możliwość umieszczenia treści generowanych i sformatowanych.
Mamy nadzieję, że nasza lista zaoferuje Ci najlepsze rozwiązania. Zapraszamy do udostępniania ich przyjaciółmi i z nami Twoi opinie na temat tego wyboru. Przed pełną listą.
Szczęśliwe oglądanie!
Ckaditor. - Darmowy tekst Edytor HTML z otwartym źródłem, zaprojektowany, aby ułatwić wypełnienie treści zawartości witryny. Edytor WYSIWYG, który otwiera dostęp do zwykłych funkcji procesora tekstowego bezpośrednio ze stron internetowych. Dokonaj pracy na swojej stronie internetowej bardziej wygodniej z tym edytorem obsługiwanym przez całą społeczność.
markITUP! Nie został pomyślany jako edytor, "zawsze gotowe i na całą ręce". To, wręcz przeciwnie, jest bardzo kompaktowy, elastyczny w konfiguracji i pracy usługi, która może służyć jako deweloper podczas debugowania swoich CMS, blogów, forów lub stron internetowych. MarkITUP! - Nie edytor WSIWYG i nigdy się nie stanie.
Nicedit. - Kompaktowa, międzyplatformowa, wbudowany edytor treści, aby łatwo zmienić zawartość witryny i po prostu w przeglądarce.
TinyMce. - Niewykonteczny edycja JavaScript / HTML-REMOTE WYSIGYG, wydany jako podstawowy zasób podstawowy sieci open source i bezpieczną licencję LGPL. TinyMCE może konwertować pola Textarea HTML i inne elementy HTML na jednostkę edycji.
Bezpłatna redaktor Edytor WYSIWYG, wyposażony we wszystkie funkcje edycji tekstu "wzbogaconego", który potrzebujesz do zauważalnej poprawy systemu zarządzania treścią.
jQuery te jest modułem jQuery. Kompaktowy (19,5 KB) i bardzo wygodny edytor HTML. Działa na schemacie WYSIWYG.
A co najważniejsze, może osadzić do twojego systemu w ciągu zaledwie 1 minuty. A interfejs może być modyfikowany przez wszystko. Nawet klasy CSS można wymienić.
Szukasz redaktora tekstowego Rich-teksta dla zasobów jQuery bez żadnych ekscesów? Odwołałeś się!
Prosty, kompaktowy, rozwijany Edytor HTML oparty na jQuery, pracując na zasadzie WYSIWYG. Wyświetlacz światła Środki wyświetlania edytora WSIWYG-HTML w miejscu dowolnego elementu TEXTAREA DOM na stronie. Lekki skrypt "waży" 9,17 KB; CSS ze zdjęciami razem "Pull" o 25,9 KB.
ueditor. Elastyczne i łatwe w użyciu. Daje przyzwoity odpowiedni odpowiedni kod (prawda, wymagająca zapewnienia w określonym sposobie), między innymi można użyć własnego stołu stylów do pracy w trybie WYSIWYG. Funkcjonalność Usługi może być jeszcze bardziej wzmocniona, dzięki łatwym w użyciu system dodatkowych modułów.
Whizzywig wszystko jest proste. Pozwala połączyć "wzbogacony" sformatowany tekst w oknie internetowym. Pisze, w rzeczywistości w XHTML, ale nie musisz posiadać HTML-warstwy, aby ich użyć. Jeśli wiesz, jak używać procesora tekstowego lub wiadomości e-mail, a następnie poradzić sobie z nim.
Szukałem edytora wizualnego, przyjemnego oka, więc nie musiałem ponowić projektowania i po raz kolejny spędzać czas. W tym procesie znalazłem i doświadczyłem kilku edytorów wizualnych. Redaktorzy wizualne na stronie Witryna na stronie przedstawia prosty system działań. Musisz umieścić wiele skryptów żądań do tagu głowicy (po pobraniu całego folderu z edytorem wizualnym na serwer). W pobranych plikach zwykle dostarczono wersję użycia demo, z kodu tej strony jest łatwo uzyskać nazwy żądanych skryptów. Oto mały kod używany na stronach ciała dla nierównomiernego użycia Edytora. Zostaniemy umieszczony na miejscu w formularzu HTML, gdzie potrzebujemy.
Redaktorzy wizualni są podzielone na gatunki przy użyciu różnych przetwarzania. Więc spotkałem edytorów wizualnych na podstawie jQuery, mootools, ActiveX i JavaScript.
Edytory wizualne za pomocą mootools
Mam bardzo interesujących edytorów wizualnych na podstawie tej technologii. Jednak ze względu na niezgodność z skryptami jQuery używanymi już w witrynie dla innych potrzeb, kontynuowałem szukać czegoś bardziej uniwersalnego.
Przykład edytora wizualnego mocowania za pomocą mootools
Skrypty włożone między tagami<Głowa.>Głowa.>:
Zastosowanie B.
Oto standardowy znacznik formularza Textlay, który sprawi, że pole wejściowe dla pracowników, nawet jeśli jest wyłączone
JavaScript z użytkownika (chociaż wszystkie opcje edytora wizualnego nie będą działać).
Pobierz Meosbled Visual Editor
Przykład GGGEDIT, edytor oparty na Visual Mootools
W Firefoksie, ten edytor wizualny ("Ggget") w ogóle nie chciał pracować. Jako użytkownika Mozilla, nie pasowała do mnie w ogóle.
Jednak interfejs ma taki wizualny edytor (przykład "GGGGED" (można pobrać źródło)) Lubiłem to.
Edytory Visual JQuery.
Ten edytor wizualny (WKRTE) mógł być dobry, jeśli modułowe okna (wstawianie obrazów, linki) nie były zalane poza ekranami
Przykład WKRTE, edytor oparty na Visual jQuery:
Warto zauważyć, że główne skrypty nie są włożone do
…Gdzie, głównie, style (CSS) prośby:
Podstawowe skrypty będą przed tagiem zamykającym
