আমি কীভাবে কোনও পাঠ্যকে একটি এসি সম্পাদক করব?

Question 1

আমি কোনও পৃষ্ঠায় সুনির্দিষ্ট পাঠ্যকে ACE সম্পাদক হতে রূপান্তর করতে সক্ষম হতে চাই।

কারও কি কোন পয়েন্টার আছে দয়া করে?

সম্পাদনা:

আমার কাছে এডিটর.এইচটিএমএল ফাইলটি একটি টেক্সারিয়ার সাথে কাজ করছে, তবে আমি একটি দ্বিতীয় যুক্ত করার সাথে সাথে দ্বিতীয়টি সম্পাদকে রূপান্তরিত হয় না।

সম্পাদনা 2:

আমি বেশ কয়েকটি থাকার ধারণাটি স্ক্র্যাপ করার সিদ্ধান্ত নিয়েছি এবং এর পরিবর্তে একটি নতুন উইন্ডোতে একটি খুলতে চাই। আমার নতুন দুর্দশাটি হ'ল আমি যখন টেক্সারিটি লুকিয়ে () এবং দেখাই () করি, তখন প্রদর্শনটি খারাপ হয়ে যায়। কোন ধারনা?

Question 2

যতদূর আমি এসের ধারণাটি বুঝতে পেরেছি, আপনার কোনও পাঠ্যকেই এসের সম্পাদক বানানো উচিত নয় । আপনার অতিরিক্ত ডিভি তৈরি করা উচিত এবং পরিবর্তে .getSession () ফাংশনটি ব্যবহার করে টেক্সারিয়া আপডেট করা উচিত ।

এইচটিএমএল

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

জেএস

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());

আপনি যখন প্রদত্ত টেক্সারিয়ার সাথে ফর্মটি জমা দেন কেবল তখনই। আমি এটি ব্যবহারের সঠিক উপায় কিনা তা নিশ্চিত নই, তবে গিটহাবের ক্ষেত্রে এটিই ব্যবহার করা হয় ।

Question 3

ডানকান্সমার্টের গিথুব পৃষ্ঠায় একটি দুর্দান্ত ভয়ঙ্কর সমাধান রয়েছে, প্রগতিশীল-এস যা আপনার পৃষ্ঠায় একটি এসি সম্পাদক সম্পাদনা করার এক সহজ উপায় প্রদর্শন করে।

মূলত আমরা বৈশিষ্ট্য <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>

স্নিপেট প্রসারিত করুন

Question 4

আপনার একাধিক এস এডিটর থাকতে পারে। প্রতিটি টেক্সারিয়াকে কেবল একটি আইডি দিন এবং উভয় আইডি-র জন্য এ্যাস এডিটর তৈরি করুন:

<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>

Question 5

একটি সম্পাদক তৈরি করতে কেবল করুন:

এইচটিএমএল:

<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/E এমবেডিং--- API

দ্রষ্টব্য: সেগুলি টেক্সারিয়াস হতে হবে না, আপনি যে উপাদানটি চান তা হতে পারে।

Question 6

আমার মতো যে কারও জন্য সিডিএন থেকে এস ব্যবহারের একটি ন্যূনতম, কার্যকারী উদাহরণ চাই:

<!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>

স্নিপেট প্রসারিত করুন