თანამედროვე ვიზუალური html რედაქტორი word jquery wysiwyg. მარტივი Jquery რედაქტორი HTML5 ტექსტის რედაქტირებისთვის და ajax-ის გამოყენებით შესანახად. ვიზუალური რედაქტორი AJAX, jQuery, JavaScript

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

აქ არის რამდენიმე საკმაოდ კარგად კომენტირებული კოდი:

// რედაქტირების ღილაკების ჩვენება
დოკუმენტი.წერე("");
დოკუმენტი.წერე("");
document.write("
");
დოკუმენტი.წერე(""); // დაამატეთ iframe
/* ბრაუზერის მიხედვით, ჩვენ ვიღებთ წვდომას შექმნილ ჩარჩოზე */
var isGecko = navigator.userAgent.toLowerCase().indexOf("გეკო") != -1;
var iframe = (isGecko) ? document.getElementById("frameId") : ჩარჩოები["frameId"];
var iWin = (isGecko) ? iframe.contentWindow: iframe.window;
var iDoc = (isGecko) ? iframe.contentDocument: iframe.document;
/* შექმენით კოდი ცარიელი HTML გვერდისთვის */
iHTML = "";
iDoc.open(); // გახსენით ჩარჩო
iDoc.write(iHTML); // ჩაწერეთ ჩაწერილი კოდი ჩარჩოში
iDoc.close(); // დახურეთ ჩარჩო
iDoc.designMode = "ჩართული"; // ჩარჩოს რედაქტირების რეჟიმის ჩართვა
/* შერჩეული ტექსტის გარეგნობის დაყენების ფუნქციები
შესაძლო ბრძანებების სრული ნაკრები: http://javascript.itsoft.ru/execcom/execCommands.html */
ფუნქცია setBold() (
iWin.focus();
iWin.document.execCommand("bold", null, "");
}
ფუნქცია setItal() (
iWin.focus();
iWin.document.execCommand("დახრილი", null, "");
}
ფუნქცია შენახვა () (
/* HTML კოდის შენახვა დამალულ ველში, რათა მოგვიანებით მიღებული HTML კოდი გადასცეთ სკრიპტის დამმუშავებელს */
document.getElementById("შინაარსი").value = iDoc.body.innerHTML;
დაბრუნება true;
}

ერთი შეხედვით, კოდი ძალიან რთული ჩანს. ასეც არის, მაგრამ თუ შეხედავთ მას მისი ძირითადი ელემენტებიდან გამომდინარე, მაშინ არაფერია რთული. არის ჩვეულებრივი ფორმა და ფარული ველი, სადაც ინახება რედაქტორში გენერირებული HTML კოდი. თავად რედაქტორი არის ჩვეულებრივი ჩარჩო, ანუ ჩვეულებრივი HTML გვერდი, რომელშიც შეგვიძლია დავწეროთ ტექსტი (designMode = „on“). და სხვადასხვა ფორმატირება იქმნება execCommand() მეთოდის გამოყენებით, რომელიც ასრულებს პარამეტრში მითითებულ ბრძანებას. და ვფიქრობ, არ გაგიჭირდებათ ახალი ღილაკების შექმნა და მათზე მსგავსი დამმუშავებლების მიმაგრება.

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

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

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

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

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

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

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

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

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

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

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

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

ჩემი აზრით, თითოეული ეს პრობლემა მოგვარდა და აი რა გამოვიდა აქედან:

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

იმიტომ, რომ მინდოდა, თავიდან ავიცილო მრავალი ფუნქციის სირთულე და კოდი მაქსიმალურად მოქნილი გამეკეთებინა;

რედაქტორი არ არის დანამატი, არამედ თავისთავად დამოუკიდებელი რამ.

თუმცა, რედაქტორს არ სჭირდება მესამე მხარის დანამატები ან გაფართოებები, თქვენ უბრალოდ უნდა დააკავშიროთ ძირითადი jQuery ფაილი, თავად რედაქტორი და ყველაფერი იმუშავებს.

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

რატომ არ არის ღილაკი „Word უსარგებლო ნივთების გასასუფთავებლად“?

ეს არის სერვერული დავალება, რადგან ამ ღილაკს არავინ იყენებს და რედაქტორებსა და ჟურნალისტებსაც კი არ ესმით, რატომ არის ეს საჭირო. თუ შესაძლებელია პრობლემის გადაჭრა ავტომატური და პროგრამული მეთოდების გამოყენებით, ის უნდა მოგვარდეს ამ მეთოდების გამოყენებით, მომხმარებლისთვის გადატანის გარეშე.

რატომ არ არის ესა თუ ის ღილაკი და რედაქტორის გაფართოებები?

ეს არის ერთ-ერთი მიზანი - ამოიღოთ ყველა არასაჭირო რამ. ყოველთვის, როცა გაფართოების მოფიქრება გსურს, მაჯაზე უნდა სცემო.

შეიმუშავებს და დაემატება დოკუმენტაცია?

აუცილებელია, მათ შორის გამოხმაურებისა და კითხვების საფუძველზე.

არის IE6 მხარდაჭერილი?

არა და არასდროს იქნება.

რას გეგმავთ შემდეგ ვერსიაში?

• ლოკალიზაცია (ინგლისური და რუსული ერთ პაკეტში);
• გადაამუშავეთ და გახადეთ ცხრილების ჩასმა და მართვა უფრო მოსახერხებელი.

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

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

01. NicEdit

NicEdit არის შესანიშნავი ალტერნატივა დიდი და შრომატევადი რედაქტორებისთვის. იგი მოიცავს ყველა საჭირო მახასიათებელს, მაგრამ ძალიან მარტივია ვებსაიტში ინტეგრირება.

02. TinyMCE

TinyMCE არის უფასო Javascript HTML WYSIWYG რედაქტორი. მისი დანერგვა მარტივია თქვენს საიტზე და უზრუნველყოფს პერსონალიზაციისა და გარეგნობის ვარიანტების ფართო სპექტრს. TinyMCE ალბათ ყველაზე "სრული" რედაქტორია ჩვენს არჩევანში დღეს. თითქმის MSWord.

03.CKEditor

CKeditor არის ახალი FCKEditor, რომელიც გახდა ბაზრის ადრეული ლიდერი. რედაქტორი შემუშავებულია მის საფუძველზე და მიზნად ისახავს გამოასწოროს რა პრობლემები წარმოიშვა FCKEditor-ში. შედეგი არის უაღრესად პროდუქტიული WYSIWYG რედაქტორი, რომელიც გთავაზობთ ყველა იმ მახასიათებელს, რომელსაც ჩვეულებრივ ნახავთ MSWord-ში ან Open Office-ში.

04. YUI მდიდარი ტექსტის რედაქტორი

YUI Rich Text Editor არის Yahoo-ს მომხმარებლის გრაფიკული ინტერფეისი, რომელიც აქცევს ტექსტის შეყვანის ჩვეულებრივ ველს სრულფასოვან WYSIWYG რედაქტორად. აპლიკაცია წარმოდგენილია სხვადასხვა ვერსიით, განსხვავებული თვისებებითა და შინაარსით. მაგრამ ნებისმიერი ვერსიის გამოყენებით, თქვენ მიიღებთ რედაქტორისთვის საჭირო ყველა ფუნქციას.

Markitup არის jQuery დანამატი, რომელიც საშუალებას გაძლევთ გადააქციოთ ჩვეულებრივი ტექსტის შეყვანის ველი ტეგების და ფორმატირების რედაქტორად. Html, Wiki და BBcode მხოლოდ რამდენიმეა, რასაც მოდული გთავაზობთ. Markitup არ არის WYSIWYG რედაქტორი, მაგრამ ეს არ აუარესებს მას, რადგან ის გთავაზობთ ყველა საჭირო ფუნქციას.

06. FreeTextBox

FreeTextBox არის HTML რედაქტორი, რომელიც შექმნილია სპეციალურად ASP.NET-ისთვის. რედაქტორის გარეგნობა ძალიან ჰგავს Microsoft Word-ს. უფასო ვერსიას ნამდვილად არ აქვს ბევრი ფუნქცია, მაგრამ აქვს ყველაფერი რაც თქვენ გჭირდებათ.

07.MooEditable

WYSIWYG რედაქტორები, უმეტესწილად, ახლა უზრუნველყოფენ დანამატებს პოპულარული jQuery ბიბლიოთეკისთვის და ნაკლებად შემთხვევაში Mootools. MooEditable საკმაოდ კარგად ავსებს ამ ხარვეზს, რადგან არის მარტივი, მაგრამ ძალიან ეფექტური Javascript ბიბლიოთეკა. თუ Mootools-ის ფანი ხართ, მაშინ მასთან არანაირი პრობლემა არ შეგექმნებათ.

08. OpenWysiwyg?

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

09. Spaw Editor - საიტი მკვდარია

Spaw Editor არის WYSIWYG რედაქტორი, რომელიც საშუალებას აძლევს ვებსაიტების დეველოპერებს შეცვალონ სტანდარტული ტექსტური ველები კონტროლირებადი HTML რედაქტორით, მრავალფეროვანი ოფციებით, მრავალი ენით და გარეგნობის შეცვლის შესაძლებლობით.

10.jHtml ფართობი

jHtmlArea არის კიდევ ერთი WYSIWYG ტექსტური რედაქტორი, რომელიც არის მოდული Jquery-ისთვის. მოდულის მიზანია სიმარტივე და გამოყენების სიმარტივე. იგი მოიცავს ყველა საჭირო ფუნქციას. თქვენ შეგიძლიათ დააკონფიგურიროთ გარეგნობა, მახასიათებლები და ენები.

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

შესავალი ეს თემა არის ვიზუალური რედაქტორების ვრცელი სია, რომლებიც თითქმის ან ნაწილობრივ შესაფერისია გამოსაყენებლად. ჩემი მიზანი იყო ინტერნეტში მიმოფანტული არსებული მონაცემების ორგანიზება.TinyMCE
ერთ-ერთი ყველაზე გავრცელებული ვიზუალური რედაქტორი, მას აქვს შესანიშნავი ფუნქციონირება. ნაგულისხმევად დაინსტალირებულია მრავალი დანამატი და მრავალი დანამატი.
(ბრაუზერები: Mozilla 1.3+, MSIE 5.5+, Opera 9.0+, Safari, Chrome)
[ოფიციალური საიტი | დემო]CKრედაქტორი
TinyMCE-ის სრული ანალოგი.

[ოფიციალური ვებსაიტი]CLEditor

მარტივი ვიზუალური რედაქტორი, რომელიც არ გვთავაზობს დიდ ფუნქციონირებას. მაგრამ ის საკმაოდ კარგად არის გაკეთებული, ყველა ფუნქცია ეფექტურად ხორციელდება.
(ბრაუზერები: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Camino 1.0+, Internet Explorer 5.5+, Google Chrome)
[ოფიციალური საიტი] NicEdit

რედაქტორი ძალიან ჰგავს CLEditor-ს. აქვს სტანდარტული ფუნქციონირება.
(ბრაუზერები: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[ოფიციალური ვებგვერდი] elRTE

ძალიან მაღალი ხარისხის ვიზუალური რედაქტორი. აქვს ფართო ფუნქციონირება. დამზადებულია ძალიან მაღალი ხარისხის.
(ბრაუზერები: Firefox 3.5+, Opera 10+, Safari 3.0+, Internet Explorer 7+, Google Chrome)
[ოფიციალური საიტი | დემო ]Spaw

ძალიან საშუალო ვიზუალური რედაქტორი. აქვს სტანდარტული ფუნქციონირება.

[ოფიციალური საიტი | დემო ]სინჰა

კარგი ვიზუალური რედაქტორი, გამორჩეული თვისებაა ბევრი ჩაშენებული მოქმედება, ანუ მისი მორგება არ იქნება რთული.
(ბრაუზერები: Firefox 1.5+, Opera 9+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[ოფიციალური საიტი | დემო ]იმპერავი (ფასიანი)

საკმაოდ კარგი რედაქტორია, ფუნქციონალური არ არის შესანიშნავი, მაგრამ სავსებით საკმარისია. არსებობს მთელი რიგი შეცდომები, რომლებიც დაკავშირებულია html-დან ვიზუალურ რედაქტორზე გადასვლასთან და უკან. (ხაზები ამოღებულია) მნიშვნელოვანია აღინიშნოს, რომ Imperavi მუშაობს როგორც დანამატი JQuery-სთვის.
არის კარგი დოკუმენტაცია.
(ბრაუზერები: Firefox 1.5+, Opera 9+, Safari 4+, Internet Explorer 7+, Google Chrome)
[ოფიციალური საიტი | დემო ]Markitup

Markitup უფრო მოსახერხებელი html რედაქტორია, რომელიც უფრო შესაფერისია პროფესიონალისთვის, ვიდრე საშუალო მომხმარებლისთვის. მაგრამ თუ თქვენ იცით html, მაშინ ეს შეიძლება იყოს საკმაოდ მოსახერხებელი.
(ბრაუზერები: Firefox 3+, Opera 9+, Safari 3+, Internet Explorer 6+, Google Chrome)
[ოფიციალური საიტი | დემო ]Aloha რედაქტორი

არ არის ცუდი რედაქტორი, ძალიან მოსახერხებელი. თუმცა, არის უზარმაზარი მინუსი, რომელიც ჩრდილავს თითქმის ყველა უპირატესობას - ეს არის ძველი და არც ისე ძველი ბრაუზერების მხარდაჭერაზე უარის თქმა (ხელმისაწვდომია მხოლოდ ბრაუზერების უახლესი ვერსიები).
(ბრაუზერები: საჭიროა HTML5 მხარდაჭერა, Opera არ არის მხარდაჭერილი)
[ოფიციალური საიტი | დემო ]მერკური რედაქტორი

Mercury არის სრული ვებ გვერდი და შეიძლება გამოყენებულ იქნას მთელი გვერდის ან ცალკეული კონკრეტული უბნების რედაქტირებისთვის. იგი მხარს უჭერს რედაქტირებული შინაარსის წინასწარ გადახედვას, ასევე ბმულების, სურათების, ვიდეოების და ცხრილების განთავსებას. ფაილების ატვირთვა შეიძლება განხორციელდეს drag"n"drop ინტერფეისის გამოყენებით.
რედაქტორი ასევე მხარს უჭერს მრავალ პიროვნების თანამშრომლობას. Mercury შეიძლება დამონტაჟდეს როგორც დამოუკიდებელი რელსი, ან მისი ჩასმა გვერდის კოდში. (საჭიროა JQuery)
და უარყოფითი მხარე ის არის, რომ მხარდაჭერილია მხოლოდ შემდეგი ბრაუზერები: Chrome 10+, Safari 5+, Firefox 4+.
[ოფიციალური საიტი | დემო მთავარ გვერდზე]YUI მდიდარი ტექსტის რედაქტორი

ვიზუალური რედაქტორი Yahoo-დან. როგორც sdevalex-მა სწორად აღნიშნა, ერთ-ერთი საუკეთესო ვიზუალური რედაქტორია. მას აქვს ყოვლისმომცველი ფუნქციონირება და მას მხარს უჭერს ბრაუზერების დიდი უმრავლესობა.
[დემო]MooEditable

ფუნქციების დიაპაზონი ძალიან შეზღუდულია, მაგრამ ზოგჯერ მეტი არ არის საჭირო.
[დემო] OpenWysiwyg

ბრაუზერის სრულფასოვანი რედაქტორი ყველა საჭირო ფუნქციით. მასში შედის მიმზიდველი ჩამოსაშლელი მენიუები და ღილაკები. სამწუხაროდ, Chrome მას არ დაუჭერს მხარს.
(IE 5.5+, Firefox 1.0+, Mozilla 1.3+ და Netscape 7+)