👼🏻 👨🏻‍💻 👹 ऐस: द मोस्ट फंक्शनल कोड एडिटर 🎡 🏬 🧑🏿‍🤝‍🧑🏾

नमस्कार सज्जनों!

मुझे सुखद आश्चर्य हुआ जब मुझे पता चला कि Ajax.org प्रोजेक्ट, जिसे ऐस कहा जाता है , लगभग हब पर कभी उल्लेख नहीं किया गया था । ऐस अगली पीढ़ी का वेब सोर्स एडिटर है। यह कई अलग-अलग कार्यों का समर्थन करता है, जिनमें शामिल हैं: 60 से अधिक प्रोग्रामिंग भाषाओं के लिए सिंटैक्स हाइलाइटिंग मोड की उपस्थिति, विभिन्न लोकप्रिय आईडीई, फ़ंक्शन से रंग योजनाओं की पागल राशि के लिए समर्थन, कई स्क्रिप्टिंग भाषाओं के लिए व्यापक अनुकूलन, सिंटैक्स की जाँच सहित। यह सिर्फ इतना हुआ कि यह लेख बहुमुखी होने की संभावना है, अर्थात्। वेब डेवलपर्स और C ++ प्रोग्रामर के लिए सामग्री होती है, जिन्हें मैं Qt के लिए सफलतापूर्वक अभियान करता हूं। तो आप इस लेख में क्या पढ़ सकते हैं?

ऐस के साथ त्वरित शुरुआत। मैं ऐस का उपयोग कहाँ कर सकता हूँ? क्यों?
ऐस को क्यूटी में पोर्ट करना और उसके एपीआई को लपेटना: Qt5- आधारित पुस्तकालयों के रचनाकारों के लिए कैसे-कैसे (जैसे मेरे ऐस पोर्ट - नोविले

अब मैं आपको एक उदाहरण एप्लिकेशन के कुछ स्क्रीनशॉट दिखाता हूं जो मेरी नॉवेल लाइब्रेरी का उपयोग करता है:

ऐस क्या है?

Ace (Ajax.org Cloud9 Editor) एक ऑनलाइन स्रोत कोड संपादक है, जो वाक्य रचना हाइलाइटिंग, थीम और जावास्क्रिप्ट में लिखा गया है, जिसे MPL / LGPL / GPL लाइसेंस के तहत वितरित किया जाता है और आसानी से किसी भी वेब पेज में एम्बेड किया जाता है। ऐस को Cloud9 IDE के मुख्य संपादक के रूप में तैयार किया गया है जो कि प्रोजेक्ट मोज़िला स्काईटाइटर (बेस्पिन) की निरंतरता है। अब इस परियोजना को GitHub पर होस्ट किया गया है और यह सक्रिय रूप से विकसित हो रहा है।

ऐस किसी ऐसे व्यक्ति के लिए रुचि हो सकती है जिसे एक सुंदर और सबसे महत्वपूर्ण रूप से स्थापित करने की आवश्यकता है - साइट पर एक सुविधाजनक स्रोत कोड संपादक या आपके आवेदन में एम्बेड। संपादक के फायदों के बीच पहचाना जा सकता है:

60 से अधिक भाषाओं के लिए बैकलाइट (.tmlanguage फ़ाइलों का आयात होता है)
20 से अधिक थीम हैं (.tmtheme भी आयात किए गए हैं)
वास्तविक समय वाक्यविन्यास जाँच (जावास्क्रिप्ट / पीएचपी / सीएसएस / आदि)
बड़े दस्तावेज़ों पर काम करता है (वे कहते हैं, कोड की 4,000,000 लाइनें खींचती हैं)
कोड तह, इसकी प्रोग्रामिंग भाषा की उपस्थिति में
आसानी से अनुकूलन कीबोर्ड शॉर्टकट और शॉर्टकट
एकाधिक कर्सर और चयन
अनपेक्षित वर्ण प्रदर्शित करें (जो बहुत महत्वपूर्ण है)
ऑटो कोड संरेखण
नियमित खोज और प्रतिस्थापन
नरम और कठोर टैब

यह ऐस को एक बहुत ही सुविधाजनक और आसानी से एम्बेड करने योग्य संपादक बनाता है!

एपीआई और प्रलेखन

प्रलेखन की उपस्थिति इसकी अनुपस्थिति को निर्धारित करती है। संक्षेप में, ऐस का कोई सामान्य दस्तावेज नहीं है। साइट पर एक है, लेकिन इसे एपीआई संदर्भ कहते हुए बहुत जोर से कहा जा रहा है। अब, किसी तरह इस संपादक को अंतःक्रियात्मक रूप से कॉन्फ़िगर करते हैं। कदम-कदम, तो बोलना है।

चरण 1. मूल सेटअप

आइए संपादक के साथ इच्छित पृष्ठ बनाकर शुरू करें। एक टेम्पलेट बनाएँ:

<!DOCTYPE html> <html lang="en"> <head> <title>Ace Editor Demo</title> <style type="text/css"> #editor { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } </style> </head> <body> <div id="editor"></div> <script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> <script> var editor = ace.edit("editor"); //       editor //      ! </script> </body> </html>

बहुत बढ़िया! अब हमारे पास सरल कोड संपादक वाला एक सरल पृष्ठ है। यह पहले से ही कुछ है। वैसे, आप अन्य स्रोतों का उपयोग कर सकते हैं a.js. यह उल्लेख नहीं करने के लिए कि आपको अन्य फ़ाइलों की आवश्यकता होगी, इसे स्वयं (नोड) में इकट्ठा करना बेहतर होगा या अलग-अलग कार्यक्षमता के साथ अंतर्निहित फ़ाइलों से टुकड़ा इकट्ठा करना होगा।

चरण 2. अधिक रंग!

अब हमारे इच्छित जावास्क्रिप्ट कोड में रंग जोड़ने का समय है। यह कुछ सरल कॉल के साथ आसानी से किया जा सकता है। खैर, आइए कुछ पंक्तियों को जोड़ते हैं:

 editor.setTheme("ace/theme/monokai"); editor.getSession().setMode("ace/mode/javascript");

हमने क्या किया है? संपादक की थीम एक स्ट्रिंग द्वारा निर्दिष्ट होती है जिसमें प्रारूप पथ इक्का / थीम / <theme_name> होता है। यह ध्यान रखना महत्वपूर्ण है कि विषय वास्तव में संपादक विशेषता है । अगला, हम बैकलाइट मोड सेट करते हैं, बैकलाइट एडिटसेशन विशेषता है । यह इस विषय पर समान रूप से सेट है, सिवाय इसके कि यह सीधे संपादक को नहीं, बल्कि उसके सत्र के लिए सेट किया गया है। अब, थोड़ा गड़बड़ करते हैं। उदाहरण के लिए, आप एक परिष्कृत jquery- आधारित AJAX अनुरोध लिखने का अभ्यास कर सकते हैं :)

चरण 3. एपीआई स्तर पर पाठ का प्रबंधन करें

लेखन कोड अच्छा है, लेकिन कार्यक्रम स्तर पर इसके साथ कुछ करने में सक्षम होना बेहतर है। इस कदम पर, मैं संपादक और उनके एपीआई के मुख्य कार्यों को समझने की कोशिश करूंगा। जैसा कि गागरिन ने कहा, चलो!

हम सामग्री प्राप्त करते हैं और सेट करते हैं:

 editor.setValue("<source code>"); //  editor.getValue(); // -> String ()

हाइलाइटिंग के साथ थोड़ा सा काम:

 var selectionRange = editor.getSelectionRange(); // Range -      var selectionText = editor.getSession().getTextRange(selectionRange); // -> String ( )

और अब हम कर्सर के साथ थोड़ा खेलते हैं:

 var pos = editor.getCursorPosition(); // Object {row: N, column: M} editor.insert("I know how to insert text"); //   ,    editor.gotoLine(lineNumber); //    #lineNumber (  )

उन्नत कोडिंग प्रबंधन के बारे में क्या?

 var lines = editor.session.getLength(); //     editor.getSession().setUseSoftTabs(true); //  ""  Tab-. document.getElementById('editor').style.fontSize='12px'; //      #editor editor.getSession().setUseWrapMode(true); //  text wrapping editor.setShowPrintMargin(false); //  - (40, 80    ,  ) editor.setReadOnly(true); //  , false -

वैसे, यदि आप अचानक विंडो के आकार को बदले बिना div # एडिटर का आकार बदलना चाहते हैं, तो आपको करने की आवश्यकता है

 editor.resize()

चरण 4. खोज और घटनाओं

दुर्भाग्य से, मैं केवल खोज के बारे में कुछ शब्द कहूंगा, क्योंकि किसी कारण से अभी उनके काम का वर्णन करने की कोई इच्छा नहीं है। संक्षेप में, यह नियमित अभिव्यक्ति, केस संवेदनशीलता और कई अन्य मापदंडों का समर्थन करता है। एपीआई नीचे आता है

 editor.find('needle', { //   "needle" backwards: false, //    wrap: false, //    caseSensitive: false, //     wholeWord: false, //    regExp: false //   }); editor.findNext(); editor.findPrevious(); editor.replaceAll('pub');

हम विभिन्न घटनाओं को सुनते हैं:

 // -    editor.getSession().on('change', function(e) { // e.type, etc }); //   editor.getSession().selection.on('changeSelection', function(e) { // e.type, etc }); //    editor.getSession().selection.on('changeCursor', function(e) { // e.type, etc });

और अब यह बहुत अच्छा है - गर्म कुंजी और कीबोर्ड शॉर्टकट:

 editor.commands.addCommand({ name: 'myCommand', //   bindKey: {win: 'Ctrl-M', mac: 'Command-M'}, //   PC  Mac exec: function(editor) { //   // editor.* }, readOnly: true // false,       readOnly  });

सिद्धांत रूप में, इस ज्ञान (पूर्ण एपीआई संदर्भ से विशिष्ट) के साथ, आप Cloud9 IDE संपादक के समान एक संपादक लिख सकते हैं। बेशक आपको इसे बहुत विस्तारित करने की आवश्यकता है, लेकिन यह इसके लायक है।

क्यूटी के लिए नोवेल कंपोनेंट

अब हम नोवेल परियोजना के बारे में बात करेंगे, एक परियोजना जो मैं पिछले एक सप्ताह से काम कर रहा हूं। बोल्ड पढ़ना जारी रहेगा, और जो विशेष रूप से बह नहीं रहे हैं वे निष्कर्ष तक फ्लिप कर सकते हैं। और मैं जेडी को रुकने के लिए कहता हूं। मैं इस बारे में बात करने जा रहा हूं कि नोवेल का उपयोग कैसे करें, इसकी आवश्यकता क्यों है, और सबसे महत्वपूर्ण बात, मैं आपको बताता हूं

इसकी जरूरत किसे है?

जब मैंने नोवेल पर काम शुरू किया, तो मैंने सबसे पहले यह सोचा कि इसका उपयोग कैसे किया जा सकता है। परिचित प्रोग्रामर की समीक्षाओं के अनुसार, मैंने फैसला किया कि आप विभिन्न डेस्कटॉप (और न केवल) अनुप्रयोगों में नोवेल का उपयोग कर सकते हैं जहां आपको कोड या कम से कम कॉन्फ़िगरेशन फ़ाइलों को संपादित करने की आवश्यकता होती है। इस तरह के बहुत सारे अनुप्रयोग हैं, और नोवेल के साथ उनमें से अधिक होना चाहिए।

Novile, विशेष रूप से, Qt के साथ बनाया गया, Qt के लिए बनाया गया। कौन नहीं जानता, क्यूटी सी ++ में क्रॉस-प्लेटफॉर्म सॉफ्टवेयर विकसित करने के लिए एक रूपरेखा है (यह अभी भी पायथन, जावा में संभव है, लेकिन यह मामला नहीं है)। Googling, आप समझ सकते हैं कि Qt कुछ ऐसा है जो Qt लिनक्स मैक विंडो सिम्बियन Android iOS एंबेडेड है। Novile QtWebKit के माध्यम से निम्न-स्तरीय जावास्क्रिप्ट संपादक एपीआई और उच्च-स्तरीय C ++ कोड के बीच का पुल है।

विधानसभा प्रणाली

इस तथ्य के बावजूद कि क्यूटी बहुत सक्रिय रूप से क्यूकेक को बढ़ावा दे रहा है, और क्यूबीएस उन्माद जल्द ही शुरू होगा, मेरा मानना है कि पुस्तकालयों के लिए सबसे अच्छा विकल्प निश्चित रूप से सीएमके है। यह विधानसभा के अनुकूलन का स्तर देता है जो वास्तव में आवश्यक है।

अब प्रलेखन, डिबग आउटपुट और एक उदाहरण के साथ नोवेल को बनाने और स्थापित करने के लिए, आपको (लिनक्स) चलाने की आवश्यकता है:

 cd path/to/novile mkdir build && cd build cmake -DCMAKE_BUILD_TYPE=Debug -DCMAKE_INSTALL_PREFIX=path -DVERBOSE_OUTPUT=Yes -DBUILD_DOCS=Yes -DBUILD_EXAMPLE=Yes .. make #   make install

सुविधाजनक है, है ना? आज मैं आपको इस तरह के पुस्तकालयों (क्यूटी 5 के लिए इस मामले में) बनाने का तरीका सिखाने की कोशिश करूंगा। वैसे, मैं यह नहीं बताऊंगा कि सीएमके कैसे काम करता है, और इसके साथ कैसे काम करना है , क्योंकि हब पर पहले से ही इस तरह का एक लेख है यह आपको सिर्फ कुछ मिनट लगते हैं। और अब, यदि आप CMake में रुचि नहीं रखते हैं, तो आप अगले लेख के माध्यम से स्क्रॉल कर सकते हैं।

Qt 5 CMake में 2.8.8+

CMake Qt 5 परियोजनाओं का निर्माण कैसे करें? हाँ, बहुत सरल है। हम कोड और टिप्पणियों को पढ़ते हैं (वैसे, यह अच्छा है कि हब पर CMake के लिए एक हाइलाइटर है):

 # .h     -  set(CMAKE_AUTOMOC ON) #        # (     include_directories(.) set(CMAKE_INCLUDE_CURRENT_DIR ON) #  QtWebKitWidgets   ( ) # ,    , cmake- Qt    $PATH find_package(Qt5WebKitWidgets REQUIRED) #     .cpp     set(NOVILE_SOURCES # .cpp editor.cpp ) #  set(NOVILE_HEADERS # .h editor.h novile_export.h novile_debug.h editor_p.h ) # QRC -   Qt.  uic  .qrc   qrc_*.cpp ,  #    . NOVUILE_RCC_SRC -  qrc_*.cpp  qt5_add_resources(NOVILE_RCC_SRC ../data/shared.qrc) #      qrc_*.cpp  add_library(novile SHARED ${NOVILE_SOURCES} #  shared- ${NOVILE_HEADERS} ${NOVILE_RCC_SRC} ../data/shared.qrc #         IDE (.cbp ) ) qt5_use_modules(novile WebKitWidgets) # link    Qt 5 set_target_properties(novile PROPERTIES #   DEFINE_SYMBOL NOVILE_MAKEDLL # define   EXPORT/IMPORT PUBLIC_HEADER "${NOVILE_HEADERS}" #    ) install(TARGETS novile LIBRARY DESTINATION ${CMAKE_INSTALL_PREFIX}/lib PUBLIC_HEADER DESTINATION ${CMAKE_INSTALL_PREFIX}/include )

यदि आप अपना स्वयं का पुस्तकालय बनाते हैं, तो आप इससे बच नहीं सकते। आपको .ui उपयोगकर्ता इंटरफ़ेस फ़ाइलें एकत्र करने की भी आवश्यकता हो सकती है। इसके लिए एक विशेष मैक्रो है:

 # EXAMPLE_UIC_HDR -    ui_*.h qt5_wrap_ui(EXAMPLE_UIC_HDR mainwindow.ui)

आयात / निर्यात स्विचर

पुस्तकालय के साथ काम करते समय, कुछ पात्रों को निर्यात किया जाना चाहिए, और फिर, इसका उपयोग करने के चरण में, इसे आयात किया जाना चाहिए, इसलिए इस निर्माण का उपयोग करना सुविधाजनक है:

 #ifndef NOVILE_EXPORT # if defined(NOVILE_MAKEDLL) # define NOVILE_EXPORT Q_DECL_EXPORT //    # else # define NOVILE_EXPORT Q_DECL_IMPORT //  # endif #endif class NOVILE_EXPORT MyClass { Q_OBJECT // ...

तो, अब, बिल्ड के दौरान, आपको -DNOVILE_MAKEDLL घोषित करने की आवश्यकता है (याद रखें, हमने इसे ऊपर के सीमेक में स्थापित किया है)। पुस्तकालय का उपयोग करते समय, कोई मैक्रो नहीं होगा, और निर्यात को बुलाया जाएगा।

Novile का उपयोग कैसे करें?

Novile का उपयोग करने का एक उदाहरण उदाहरण फ़ोल्डर से प्रोजेक्ट में प्रसिद्ध रूप से वर्णित है, जो कॉन्फ़िगरेशन कुंजी -DBUILD_EXAMPLE = हाँ के साथ बनाया गया है, जो आपके लिए सब कुछ करेगा।

लेकिन यहां मैं एक छोटा सा उदाहरण देने के लिए तैयार हूं कि पेशेवरों से यह कितना सुविधाजनक है (C ++ 11 + Qt 5)

 #include <Novile/Editor> using namespace std; // somewhere in the code... Editor *editor = new Editor; editor->setHighlightMode(Editor::ModePython); editor->setTheme(Editor::ThemeMonokai); editor->setFontSize(13); editor->setPrintMarginShown(false); connect(editor, &Editor::textChanged, [=]() { //       const QString &text = editor->text(); doSmth(text); }); editor->show(); //

सी ++ 11, शक्तिशाली क्यूटी और पूरा नोवेल आपको सभी आवश्यक कार्यक्षमता के साथ एक तेज और क्रॉस-प्लेटफॉर्म आईडीई बनाने की अनुमति देता है।

निष्कर्ष

मुझे उम्मीद है कि इस लेख ने वास्तव में वेब डेवलपर्स और प्रोग्रामर दोनों की मदद की है। मैं कल्पना नहीं कर सकता कि मैंने Qt पर लोगों को कितना प्रचारित किया, लेकिन मैंने कोशिश की। ईमानदारी से। मैं नोवेल की दिशा में कुछ शब्द कहना चाहूंगा। सच कहूँ तो, अभी Novile एक अच्छा उत्पाद नहीं है, इसलिए मैं इसके बारे में बात नहीं करता। अब यह ऐस की कार्यक्षमता के 50% की ताकत को कवर करता है। अगर कोई दिलचस्पी रखता है, तो आप हमेशा GitHub पर प्रोजेक्ट की मदद कर सकते हैं। यहां तक कि सबसे छोटा पुल अनुरोध भी काम आएगा।

ssylochki

आपका ध्यान देने के लिए धन्यवाद
नाम स्थान

ऐस: द मोस्ट फंक्शनल कोड एडिटर