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




ace-editor (3)

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>

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

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

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

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

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

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


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

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

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






ace-editor