javascript मैं एक एसीई संपादक एक textarea कैसे बना सकता हूँ?




ace-editor (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 कार्यों का जिक्र कर रहे हैं। मुझे यकीन नहीं है कि वे वास्तव में यह कैसे करते हैं, लेकिन यह डीओएम में होने वाली जगह को संशोधित नहीं कर सकता है। मैं छिपाने और दिखाने का उपयोग करता हूं:

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

यदि आप सीएसएस संपत्ति 'प्रदर्शन' का उपयोग करते हैं तो यह काम नहीं करेगा।

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

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

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

क्या किसी के पास कोई संकेतक है?

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

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

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

मैंने कई होने के विचार को स्क्रैप करने का फैसला किया, और इसके बजाय एक नई विंडो में खोल दिया। मेरी नई स्थिति यह है कि जब मैं textarea छुपाता हूं () और दिखाता हूं, तो प्रदर्शन बहुत खराब हो जाता है। कोई विचार?


Duncansmart के अपने github पेज पर एक बहुत ही बढ़िया समाधान है, gist.github.com/duncansmart/5267653 जो आपके पृष्ठ पर एक एसीई संपादक को हुक करने का एक आसान तरीका दिखाता है।

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


जहां तक ​​मैं ऐस के विचार को समझता हूं, आपको टेक्स्ट को एसे संपादक नहीं बनाना चाहिए। आपको इसके बजाय .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());

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


आपके पास एकाधिक ऐस संपादक हो सकते हैं। बस प्रत्येक 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>




ace-editor