ძალიან ხშირად, საიტის შინაარსის რედაქტირების პროცესში აუცილებელია (და ასევე ძალიან მოსახერხებელი) დასრულებული შედეგის ნახვა ბრაუზერის გვერდზე. HTML5 ტეგების თვისების გამოყენებით - contenteditable, Jquery, Ajax და PHP, ჩვენ შევქმნით მარტივ HTML5 საიტის ტექსტურ რედაქტორს.

ჩვენს რედაქტორს ექნება შემდეგი თვისებები:
- რედაქტირებისთვის განკუთვნილ ტექსტზე დაწკაპუნებისას ამ ტექსტის რედაქტირება შესაძლებელია დაუყოვნებლივ;
- ტექსტის რედაქტირების შემდეგ Escape კლავიშზე დაჭერისას, მიმდინარე ტექსტში ყველა ცვლილება გაუქმდება;
- როდესაც კარგავთ ფოკუსს ან დააჭირეთ სხვა ტექსტის რედაქტირებას, შეცვლილი ტექსტი იგზავნება სერვერზე, გამოჩნდება შეტყობინება გაგზავნის სტატუსისა და სერვერის პასუხის შესახებ.

ქვემოთ მოცემულია რედაქტირებული გვერდის HTML კოდი:

როგორც ხედავთ, თითოეული რედაქტირებადი ტექსტი ჩართულია ტეგში ჩართული თვისებით კმაყოფილი დასამუშავებელი- HTML5 ფუნქცია, რომელიც საშუალებას გაძლევთ დაარედაქტიროთ ტექსტი პირდაპირ ბრაუზერში. სერვერზე შესანახად საჭიროა ზუსტად განსაზღვროთ რედაქტირებული ტექსტი, ასე რომ, ჩვენი ID შეიცავს მასალის იდენტიფიკატორს და მონაცემთა ბაზის ველს, გამოყოფილი ხაზგასმით, მაგალითად - id="item1_title".

ჩვენი გვერდის სათაურში ჩვენ შევიტანთ style.css და jquery:

ჩვენ ვიღებთ ჩვენს რედაქტირებულ ტექსტს სერვერზე - save.php ფაილი

ჩვენი რედაქტორი განსაკუთრებით მოსახერხებელია ცხრილის მონაცემებისთვის (მაგალითად, ფასების სია), სადაც ტექსტის დიზაინი არ არის საჭირო, მაგრამ თქვენ უნდა სწრაფად შეასწოროთ ან შეიყვანოთ ახალი მონაცემები (ჩვენ მოვახდინოთ სკრიპტის მოდერნიზება). საკუთარი თავისთვის ვაკეთებ სკრიპტის მოდერნიზებას, რათა გავაკეთო, შევავსო საქონლის მონაცემთა ბაზა. მონაცემთა ბაზის ამ გზით შევსება ისეთივე მოსახერხებელი იქნება, როგორც Excel-ში, რომელსაც ასე მიჩვეულები ვართ.

თუმცა WYSIWYGდა მარკდაუნი ვიზუალური რედაქტორებიშეზღუდულია წყაროს კოდის რედაქტორებთან შედარებით, მათ შეუძლიათ გააადვილონ გვერდის ძირითადი შინაარსის რედაქტირება. ამიტომ, ამ პოსტში ჩვენ შევიკრიბეთ საუკეთესო WYSIWYGდა Markdown ვიზუალური რედაქტორებიშიგთავსი, რომელიც შეიძლება გამოყენებულ იქნას როგორც სარეზერვო, ისე ფრონტენდის ვებსაიტების განვითარებაში.

ContentTools

ყველაზე ორიგინალური ტექსტიამ კოლექციიდან. თუმცა, ის არ არის შესაფერისი ყველა პროექტისთვის თავისი სპეციფიკის გამო.

ContentTools ჩართულია თავად შინაარსის გვერდზე. მისი რედაქტირების დასაწყებად, თქვენ უნდა დააჭიროთ შესაბამის ხატულას, რის შემდეგაც ის გამოჩნდება შინაარსის რედაქტირების პანელი. ეს ძალიან მოსახერხებელია, რადგან მასალის შექმნისას ჩვენ მაშინვე ვხედავთ, როგორ გამოიყურება ის გვერდზე.

პირადად მე მეჩვენება, რომ ის დისტანციურად ჰგავს Evernote რედაქტორი, მაგრამ სხვა ხელსაწყოთა ზოლით.

AlloyEditor

ვიზუალური შინაარსის რედაქტორი AlloyEditor დაფუძნებულია პოპულარულ CKEditor-ზე. ის ძალიან ჰგავს საშუალო რედაქტორიდა აქვს ფუნქციების საკმაოდ ფართო სპექტრი, როგორიცაა: Drag&Drop image loading, სხვადასხვა ინსტრუმენტთა ზოლის სტილი და ა.შ.

ეს არის რედაქტორი, რომლის გამოყენება ნამდვილად სასიამოვნოა.

მარტივი MDE

Markdown-ის სინტაქსი საკმაოდ რთული გასაგებია ჩვეულებრივი მომხმარებლისთვის, რომლის მიზანია უბრალოდ გვერდის შინაარსის დამატება. SimpleMDE-ის დეველოპერები ცდილობდნენ შეექმნათ Markdown რედაქტორირათა მასში ნებისმიერმა შეძლოს მუშაობა, თუნდაც სპეციალური ტექნიკური ცოდნის გარეშე.

ნივთიერება

ნივთიერება მარტივია ვიზუალური შინაარსის რედაქტორი JavaScript-ში. ნებისმიერ მომხმარებელს, რომელიც გადაწყვეტს თქვენს საიტზე კონტენტის დამატებას, შეუძლია მარტივად იმუშაოს მასთან.

რედაქტორი.მდ

ჩაშენებული ონლაინ ნიშნის რედაქტორისაჯარო წყარო. მოხერხებულობისთვის იგი იყოფა ორ ნაწილად. მარცხნივ არის ტრადიციული Markdown მარკირება, ხოლო მარჯვნივ არის შინაარსის ვიზუალური წარმოდგენა.

მოგეხსენებათ, ინლაინ რედაქტირება, ან სხვა სიტყვებით რომ ვთქვათ, კონტენტის პირდაპირ გვერდზე რედაქტირების შესაძლებლობა არის ძალიან სასარგებლო რამ, რომელიც ყოველთვის ხელზე უნდა იყოს. მე გაჩვენებთ, თუ როგორ მუშაობს ეს ყველაფერი, ასევე, როგორ მყისიერად განაახლოთ რედაქტირებული ნაწილი გვერდზე PHP-ის გამოყენებით და როგორ გამოიყენოთ ყველა ცვლილება მონაცემთა ბაზაში.

Კოდი

ახლა მე აგიხსნით რა არის ინლაინ რედაქტირება.

დემო გვერდზე ნახავთ ბლოკს გარკვეული ტექსტით. გადაიტანეთ მაუსი ამ ბლოკის ნებისმიერ ნაწილზე და დაინახავთ რედაქტირების პატარა ხატულას. ის ფეისბუქის ხატს ჰგავს.

თუ დააწკაპუნებთ ბლოკის შიგნით ტექსტით ან თავად ხატულაზე, ბლოკი შეიცვლება ტექსტური არეალის ფორმით და ბოლოში გამოჩნდება შენახვისა და გაუქმების ღილაკები.

ახლა მეტი

გამოვიყენე bind და unbind. მარტივი სიტყვებით, ჩვენ შეგვიძლია დავაკავშიროთ მაუსის დაწკაპუნების მოვლენა ელემენტთან. და პირიქით, თქვენ შეგიძლიათ „ამოართვათ“ ეს მოვლენა ელემენტს. ყველაფერი საკმაოდ მარტივია. ქვემოთ მოცემული კოდის მე-9 სტრიქონში, ჩვენ ვანიჭებთ დაწკაპუნების მოვლენას ყველა ელემენტს „inlineEdit“ კლასით და ვანიჭებთ ფუნქციას „updateText“, როგორც დამმუშავებელი. ეს ნიშნავს, რომ ყოველ ჯერზე, როცა დააწკაპუნებთ "inlineEdit" ბლოკში, "updateText" ფუნქცია იმუშავებს. ეს ფუნქცია ცვლის ტექსტის ბლოკს ფორმის textarea-ით.

ახლა განიხილეთ შენახვის ფუნქცია. ის იმუშავებს მხოლოდ მაშინ, როდესაც დააჭირეთ ღილაკს "შენახვა". აქ ჩვენ უბრალოდ ვდებთ რედაქტირებულ ტექსტს ცვლადში და ვატარებთ მას update.php ფაილში. თქვენ შეამჩნევთ, რომ სანამ განახლება მიმდინარეობს, ჩამოტვირთვის ხატულა გამოჩნდება. ჩვენ ასევე გამოვაჩენთ საპასუხო შეტყობინებას PHP გვერდიდან. დაბოლოს, ჩვენ ამოვიღებთ "შერჩეულ" კლასს ელემენტიდან და შემდეგ ჩასვით განახლებულ ტექსტს მომხმარებლის მიერ შეყვანილი ტექსტური ზონიდან div-ში.

გაუქმების ფუნქცია იმუშავებს, როდესაც .rever კლასის ელემენტი გააქტიურდება. ეს ფუნქცია უბრალოდ აშორებს „შერჩეულ“ კლასს, როგორც წინა ფუნქციაში, მაგრამ ათავსებს ორიგინალ ტექსტს და არა რედაქტირებულ ტექსტს div-ში.

$(document).ready(function () ( function slideout() ( setTimeout(function () ( $("#response").slideUp("ნელი", ფუნქცია () ()); ), 2000); ) $ ("".inlineEdit").bind("click", updateText); var OrigText, NewText; $("save").live("click", ფუნქცია () ($("#loading").fadeIn( "ნელი"); NewText = $(this).ძმები ("ფორმა").children(".edit").val();var id = $(this).parent().attr("id"); var data = "?id=" + id + "&text=" + NewText; $.post("update.php", მონაცემები, ფუნქცია (პასუხი) ($("#response").html(response); $( " #response").slideDown("ნელი"); slideout(); $("#იტვირთება").fadeOut("ნელი"); )); $(this).parent().html(NewText).removeClass ("არჩეული").bind("click", updateText); )); $("revert").live("click", ფუნქცია () ($(this).parent().html(OrigText). removeClass ("შერჩეული").bind("click", updateText); )); ფუნქცია updateText() ($("li").removeClass("inlineEdit"); OrigText = $(this).html(); $ (this).addClass("რჩეული").html("

"+OrigText+""

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

PHP

HTML

HTML ძალიან მარტივია და არის სიის ერთი ელემენტი კლასით „inlineEdit“, რაც მას რედაქტირებადს ხდის. თქვენ შეგიძლიათ დაამატოთ იმდენი რედაქტირებადი ელემენტი გვერდზე, რამდენიც გსურთ, მაგრამ არ დაგავიწყდეთ, რომ თითოეულ მათგანს მიეცით უნიკალური ID.

jQuery Inline-Edit

დააწკაპუნეთ ქვემოთ მოცემულ ტექსტზე მის რედაქტირებისთვის.

• ლორემ იფსუმი....

ეძებთ უფასოდ გამოიყენოთ მდიდარი ტექსტური რედაქტორები? თუ კი, მაშინ გაგიმართლათ, რომ მოხვდით სწორ გვერდზე. ამ მიმოხილვაში, ჩვენ შემოგთავაზებთ 10 დიდ უფასო Rich-Text რედაქტორს. მდიდარი ტექსტური რედაქტორები საშუალებას გაძლევთ დაარედაქტიროთ და აკრიფოთ ტექსტი ვებ ბრაუზერიდან. ისინი გამოიყენება სხვადასხვა გზით, რაც მომხმარებელს აძლევს შესაძლებლობას განათავსოს მის მიერ გენერირებული და ფორმატირებული შინაარსი.

ვიმედოვნებთ, რომ ჩვენი სია ნამდვილად შემოგთავაზებთ საუკეთესო გადაწყვეტილებებს. მოგერიდებათ გაუზიაროთ ის თქვენს მეგობრებს და ჩვენთან ერთად თქვენი მოსაზრებები ამ კოლექციის შესახებ. აქ არის სრული სია.

ბედნიერი ყურება!

CKEditorარის უფასო და ღია კოდის HTML ტექსტური რედაქტორი, რომელიც შექმნილია იმისათვის, რომ გაგიადვილოთ ვებსაიტის შინაარსით შევსება. WYSIWYG რედაქტორი, რომელიც გაძლევთ წვდომას ნაცნობ ტექსტური პროცესორის ფუნქციებზე პირდაპირ ვებ გვერდებიდან. გააუმჯობესეთ თქვენი ვებსაიტის გამოცდილება ამ საზოგადოებაზე ორიენტირებული რედაქტორით.

markItUp!არ არის შექმნილი, როგორც "ყოველთვის მზად-და-ყველა-ხელის" რედაქტორი. პირიქით, ეს არის ძალიან კომპაქტური, მოქნილი კონფიგურაციისა და ოპერაციული სერვისი, რომელიც შეიძლება მოემსახუროს დეველოპერს მისი CMS, ბლოგების, ფორუმების ან ვებსაიტების გამართვისას. markItUp! არ არის WYSIWYG რედაქტორი და არც იქნება.

NicEdit- კომპაქტური, კროს-პლატფორმული, ჩაშენებული კონტენტის რედაქტორი ვებსაიტის შინაარსის მარტივად და მარტივად შეცვლაზე პირდაპირ ბრაუზერში.

TinyMCEარის javascript/HTML WYSIWYG რედაქტირების კონსოლი, რომელიც არ არის პლატფორმა, გამოშვებულია, როგორც ღია კოდის ვებ რესურსი და დაცულია LGPL-ით. TinyMCE-ს შეუძლია გადაიყვანოს HTML TEXTAREA ველები და სხვა HTML ელემენტები რედაქტირების ერთეულებად.

უფასო cross-platform WYSIWYG რედაქტორი, შეფუთულია ტექსტის რედაქტირების ყველა მდიდარი ფუნქციით, რაც გჭირდებათ თქვენი კონტენტის მართვის სისტემის მკვეთრად გასაუმჯობესებლად.

jQuery TE არის jQuery მოდული.კომპაქტური (19.5 Kb) და ძალიან მოსახერხებელი HTML რედაქტორი. მუშაობს WYSIWYG სქემის მიხედვით.
და რაც მთავარია, ის შეიძლება დაინერგოს თქვენს სისტემაში სულ რაღაც 1 წუთში. და მისი ინტერფეისი შეიძლება შეიცვალოს, როგორც გსურთ. CSS კლასებიც კი შეიძლება შეიცვალოს.

ეძებთ ულამაზეს Rich-Text ტექსტურ რედაქტორს jQuery რესურსებისთვის? თქვენ სწორ ადგილას მოხვედით!

მარტივი, კომპაქტური, გაფართოებადი jQuery დაფუძნებული WYSIWYG HTML რედაქტორი. WYSIWYG-HTML რედაქტორის მარტივად ჩვენების საშუალება გვერდზე ნებისმიერი TextArea DOM ელემენტის ნაცვლად. მსუბუქი სკრიპტი „იწონის“ 9,17 კბ; CSS ერთად სურათებით "გაიყვანეთ" 25.9 Kb.

uEditorმოქნილი და მარტივი გამოსაყენებელი. აწარმოებს მკაფიო, შესამუშავებელ კოდს (თუმცა ისეთს, რომელიც უნდა იყოს დამოწმებული დადგენილი წესით), სხვა საკითხებთან ერთად, შეგიძლიათ გამოიყენოთ თქვენი საკუთარი სტილის ფურცელი WYSIWYG რეჟიმში მუშაობისთვის. სერვისის ფუნქციონალობა შეიძლება კიდევ უფრო გაიზარდოს დამატებითი მოდულების ადვილად გამოსაყენებელი სისტემის წყალობით.

Whizzywig-ით ადვილია.საშუალებას გაძლევთ შეადგინოთ "მდიდარი" ფორმატირებული ტექსტი ვებ ფანჯარაში. ის რეალურად წერს XHTML-ში, მაგრამ თქვენ არ გჭირდებათ HTML-ის ცოდნა მის გამოსაყენებლად. თუ იცით, როგორ გამოიყენოთ ტექსტის დამმუშავებელი ან ელფოსტა, მაშინ შეგიძლიათ გაუმკლავდეთ მას.