मैं एक textarea एक ऐस संपादक कैसे बनाऊँ?

Question

मैं एक पृष्ठ पर विशिष्ट textareas को ACE संपादकों के रूप में परिवर्तित करने में सक्षम होना चाहता हूं।

किसी को भी किसी भी संकेत कृपया है?

संपादित करें:

मेरे पास एक टेक्सटेरिया के साथ Editor.html फ़ाइल काम कर रही है, लेकिन जैसे ही मैं दूसरा जोड़ता हूं, दूसरा संपादक में परिवर्तित नहीं होता है।

संपादित करें 2:

मैंने कई होने के विचार को स्क्रैप करने का फैसला किया, और इसके बजाय एक नई विंडो में खोल दिया। मेरी नई भविष्यवाणी यह ​​है कि जब मैं छिपता हूं () और पाठ () दिखाता हूं, तो प्रदर्शन गड़बड़ा जाता है। कोई विचार?

Comments

इस आदमी के पास एक बहुत बढ़िया समाधान है: gist.github.com/duncansmart/5267653

— billynoah

Answer 1

जहाँ तक मुझे ऐस का विचार समझ में आया है, आपको टेक्स्टएरिया को ऐस एडिटर नहीं बनाना चाहिए । आपको इसके बजाय .getSession () फ़ंक्शन का उपयोग करके एक अतिरिक्त div और अद्यतन textarea बनाना चाहिए ।

एचटीएमएल

<textarea name="description"/>
<div id="description"/>

js

var editor = ace.edit("description");
var textarea = $('textarea[name="description"]').hide();
editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function(){
  textarea.val(editor.getSession().getValue());
});

या सिर्फ कॉल करें

textarea.val(editor.getSession().getValue());

केवल तभी जब आप दिए गए टेक्स्टारिया के साथ फॉर्म जमा करते हैं। मुझे यकीन नहीं है कि यह ऐस का उपयोग करने का सही तरीका है, लेकिन यह GitHub पर इसका उपयोग करने का तरीका है ।

Comments

Textarea मूल्य केवल form.submit इवेंट नंबर पर अद्यतन किया जाना चाहिए? इसके अनुसार, इसके अनुसार: group.google.com/group/ace-discuss/browse_thread/thread/… textarea प्रतिस्थापन के लिए कोई समर्थन नहीं है। आपका जवाब तो अच्छा है। धन्यवाद।

— डेमियन

कभी-कभी आपको चलते-फिरते एक टेक्स्टरी वैल्यू को अपडेट करने की आवश्यकता होती है, उदाहरण के लिए ड्राफ्ट ऑटो सेव या तो लागू करना।

— इंस्टॉल

मुझे इस पद्धति से परेशानी है: '1 या 2 का चयन करें;' ace.editor पर 'SELECT 1OR&nbps;2;'textarea डालेंगे । क्या कोई मुझे बता सकता है कि मैं क्या गलत कर रहा हूं?

— एलेगेल 7

एलेक्सग्यू, क्या आपने व्हाइट-स्पेस सेट किया है: अपने टेक्स्टारिया पर Nowrap? github.com/ajaxorg/ace/issues/900

— installero

Installero, मैं अपने textarea पर इस सीएसएस संपत्ति नहीं है। तो, नहीं, मैंने नहीं किया।

— एलेगेल

Answer 2

डनकस्मार्ट का अपने गिथब पृष्ठ पर एक बहुत बढ़िया समाधान है, प्रगतिशील-ऐस जो आपके पृष्ठ पर एक ऐस संपादक को हुक करने के लिए एक सरल तरीका प्रदर्शित करता है।

मूल रूप से हम सभी <textarea>तत्वों को data-editorविशेषता के साथ प्राप्त करते हैं और प्रत्येक को एक एसीई संपादक में परिवर्तित करते हैं। उदाहरण कुछ गुण भी सेट करता है जिसे आपको अपनी पसंद के अनुसार अनुकूलित करना चाहिए, और यह प्रदर्शित करता है कि आप dataगुण को प्रति तत्व को सेट करने के लिए कैसे उपयोग कर सकते हैं जैसे गटर को दिखाना और छिपाना data-gutter।

// Hook up ACE editor to all textareas with data-editor attribute
$(function() {
  $('textarea[data-editor]').each(function() {
    var textarea = $(this);
    var mode = textarea.data('editor');
    var editDiv = $('<div>', {
      position: 'absolute',
      width: textarea.width(),
      height: textarea.height(),
      'class': textarea.attr('class')
    }).insertBefore(textarea);
    textarea.css('display', 'none');
    var editor = ace.edit(editDiv[0]);
    editor.renderer.setShowGutter(textarea.data('gutter'));
    editor.getSession().setValue(textarea.val());
    editor.getSession().setMode("ace/mode/" + mode);
    editor.setTheme("ace/theme/idle_fingers");

    // copy back to textarea on form submit...
    textarea.closest('form').submit(function() {
      textarea.val(editor.getSession().getValue());
    })
  });
});

textarea {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
<textarea name="my-xml-editor" data-editor="xml" data-gutter="1" rows="15"></textarea>
<br>
<textarea name="my-markdown-editor" data-editor="markdown" data-gutter="0" rows="15"></textarea>

Comments

अत्यधिक सिफारिशित। बहुत लचीला और साफ!

— आइंड्रे

एकमात्र संशोधन जो मैंने उपरोक्त कोड में किया है, वह textarea.css ('दृश्यता', 'छिपा हुआ') बदला गया है; to textarea.css ('प्रदर्शन', 'कोई नहीं'); अन्यथा मुझे स्क्रीन पर अतिरिक्त खाली जगह मिल रही थी

— निक गोलोबोरोडको

@NickGoloborodko - एक दो साल देर से यहाँ लेकिन मैं सहमत हूँ और मैंने तदनुसार उत्तर अपडेट किया है। इसके अलावा, इक्का लिंक को ठीक किया ताकि स्निपेट फिर से काम करे।

— बिलानोह

@billynoah मैंने इस कोड का उपयोग किया है लेकिन मुझे जो मिला है वह एक रिक्त स्थान है जिसे संपादित नहीं किया जा सकता है मैं इसे कैसे ठीक कर सकता हूं? धन्यवाद

— bleyk

कोई विचार नहीं है, स्पष्ट रूप से आपने इस कोड का ठीक उसी तरह उपयोग नहीं किया है जैसा वह है या यह काम किया होगा - ठीक उसी तरह जैसे स्निपेट करता है। यदि आपको डिबगिंग में मदद की आवश्यकता है तो आपको एक नया प्रश्न शुरू करना चाहिए।

— बिलिन्नो

Answer 3

आपके पास एकाधिक ऐस संपादक हो सकते हैं। बस प्रत्येक textarea को एक आईडी दें और दोनों आईडी के लिए ऐस संपादक बनाएं जैसे:

<style>
#editor, #editor2 {
    position: absolute;
    width: 600px;
    height: 400px;
}
</style>
<div style="position:relative; height: 450px; " >
&nbsp;
<div id="editor">some text</div>
</div>
<div style="position:relative; height: 450px; " >
&nbsp;
<div id="editor2">some text</div>
</div>
<script src="ace.js" type="text/javascript" charset="utf-8"></script>
<script src="theme-twilight.js" type="text/javascript" charset="utf-8"></script>
<script src="mode-xml.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() {
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/twilight");
    var XmlMode = require("ace/mode/xml").Mode;
    editor.getSession().setMode(new XmlMode());

    var editor2 = ace.edit("editor2");
    editor2.setTheme("ace/theme/twilight");
    editor2.getSession().setMode(new XmlMode());

};
</script>

Answer 4

बस एक संपादक बनाने के लिए:

HTML:

<textarea id="code1"></textarea>
<textarea id="code2"></textarea>

जे एस:

var editor1 = ace.edit('code1');
var editor2 = ace.edit('code2');
editor1.getSession().setValue("this text will be in the first editor");
editor2.getSession().setValue("and this in the second");

सीएसएस:

#code1, code2 { 
  position: absolute;
  width: 400px;
  height: 50px;
}

उन्हें स्पष्ट रूप से तैनात और आकार देना चाहिए। शो () और छिपाने के द्वारा () मुझे विश्वास है कि आप jQuery फ़ंक्शन का उल्लेख कर रहे हैं। मुझे यकीन नहीं है कि वे इसे कैसे करते हैं, लेकिन यह DOM में लगने वाले स्थान को संशोधित नहीं कर सकता है। मैं छिपाता हूं और प्रयोग करके दिखाता हूं:

$('#code1').css('visibility', 'visible');
$('#code2').css('visibility', 'hidden');

यदि आप css प्रॉपर्टी 'डिस्प्ले' का उपयोग करते हैं तो यह काम नहीं करेगा।

थीम, मोड आदि को जोड़ने के लिए यहां विकी देखें ... https://github.com/ajaxorg/ace/wiki/Embedding---API

ध्यान दें: उन्हें टेक्स्टारियस होने की ज़रूरत नहीं है, वे जो भी तत्व चाहते हैं वह हो सकते हैं।

Comments

को छोड़कर, नहीं। यदि आप आह्वान करते हैं ace.edit('code1')तो आपको कचरा मिलता है जैसे: <textarea class="ace_editor ace-twilight ace_focus"><div class="ace_gutter">...</textarea>दूसरे पासवर्ड में ace.edit टेक्सटेरिया के अंदर ही सामान रखने की कोशिश करता है और यह बहुत अच्छा नहीं है।

— 1944 में Ciantic

Answer 5

मेरे जैसे किसी के लिए जो सिर्फ CDN से ऐस का उपयोग करने का एक न्यूनतम, कार्यशील उदाहरण चाहता है:

<!DOCTYPE html>
<html lang="en">

<body style="margin:0">
  <div id="editor">function () { 
  console.log('this is a demo, try typing!')
}
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js" type="text/javascript" charset="utf-8"></script>
  <script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
    document.getElementById("editor").style.height = "120px";
  </script>
</body>

</html>

Comments

मैं किसी को नीचा देख रहा हूं ... क्या यह आपके काम नहीं आया?

— निक स्कोज़ज़ारो