এইচটিএমএল টেক্সটরিয়ার ভিতরে রেন্ডারিং

Question

আমার একটি টেক্সারিয়ার মধ্যে কিছু HTML ট্যাগ রেন্ডার করতে সক্ষম হওয়া প্রয়োজন (যথা <strong>, <i>, <u>, <a>) তবে টেক্সারিরা কেবল তাদের লিখিত সামগ্রীকেই পাঠ্য হিসাবে ব্যাখ্যা করে। বাহ্যিক লাইব্রেরি / প্লাগইনগুলির উপর নির্ভর না করে এটি করার কোনও সহজ উপায় আছে (আমি jQuery ব্যবহার করছি)? যদি তা না হয় তবে আপনি কি কোনও jQuery প্লাগইন সম্পর্কে জানেন যে আমি এটি করতে পারি?

Comments

এটি করার একমাত্র উপায় হ'ল সিএসএস পজিশনিং ট্রিকগুলির মাধ্যমে টেক্সারিয়া ট্যাগের সামগ্রীতে আপনার এইচটিএমএল মার্কআপকে ওভারলে করা। কোনও কিছুই আপনাকে ব্রাউজারকে পাঠ্যক্রমের বিষয়বস্তু আলাদাভাবে রেন্ডার করতে রাজি করতে সহায়তা করবে না। (এটি করার জন্য আপনার ঠিক "দরকার" কেন?)

— পয়েন্টি

আমার কেবলমাত্র ব্যবহারকারীকে প্রবেশ করা পাঠ্যের সাথে কিছু ফর্ম্যাটিং শৈলী যুক্ত করতে সক্ষম হওয়া প্রয়োজন (যেমন আপনি যখন ওয়ার্ডপ্রেসে কোনও নিবন্ধ লেখেন) much আমার কেবল পাঠ্য সারিবদ্ধকরণ এবং অন্যান্য সমস্ত বৈশিষ্ট্যের প্রয়োজন নেই, তবে কেবলমাত্র সেই প্রাথমিক ট্যাগগুলি।

— কোডিং সন্ন্যাস

Answer 1

এটি দিয়ে করা সম্ভব নয় textarea। আপনি যা সন্ধান করছেন তা একটি সামগ্রী সম্পাদনাযোগ্য ডিভ, যা খুব সহজেই সম্পন্ন হয়:

<div contenteditable="true"></div>

jsFiddle

div.editable {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    padding: 5px;
}

strong {
  font-weight: bold;
}

<div contenteditable="true">This is the first line.<br>
See, how the text fits here, also if<br>there is a <strong>linebreak</strong> at the end?
<br>It works nicely.
<br>
<br><span style="color: lightgreen">Great</span>.
</div>

Comments

এটি সত্যিকারের লজ্জার বিষয় যে আপনি অ্যাজাক্স ব্যবহার করে নিজের পরিবর্তনগুলি জমা দিতে বা ফর্ম ইনপুটটিতে অনুলিপি করতে জাভাস্ক্রিপ্ট ব্যবহার না করে ব্যবহারিকভাবে এটি ব্যবহার করতে পারবেন না। কারও যদি এটির উপায় খুঁজে পাওয়া যায় তবে আমি আগ্রহী!

— বেন

@ ইয়াকার্ট: আচ্ছা, আমি মনে করি না যে এটি আসলে বৈধ, যদিও এটি চেষ্টা করে সমস্ত ব্রাউজারে কাজ করে। contenteditableবুলিয়ান অ্যাট্রিবিউটের পরিবর্তে একটি অঙ্কিত বৈশিষ্ট্য (এটি একটি inheritরাষ্ট্রের পাশাপাশি রয়েছে trueএবং false), এবং আমি মনে করি এর অর্থ একটি মান নির্দিষ্ট করা বাধ্যতামূলক, যদিও আমি এটি নিশ্চিত করার জন্য অনুমানের একটি নির্দিষ্ট বিট খুঁজে পাই না। এমডিএন যদিও একমত বলে মনে হচ্ছে ।

— টিম ডাউন

@ ইয়াকার্ট: আমি ধরে নিলাম যে ব্রাউজারটি contenteditableতেমন কোনও মূল্যহীন হিসাবে ব্যাখ্যা করে না contenteditable="", যার ফলস্বরূপ একই হয় contenteditable="true"।

— টিম ডাউন

এটি একটি এর চেয়ে ভাল কাজ করে না textarea। ফ্রিড <strong>someting</strong>લમાં টাইপ করা আপনাকে সেই সঠিক পাঠ্যের সাথে ছেড়ে দেয়। এইচটিএমএল প্রয়োগ করা হয়নি।

— ম্যাট এলেন

@ মার্কাসএকওয়াল কিন্তু এইচটিএমএল রেন্ডারিংয়ের জন্য প্রশ্ন করা হচ্ছে না?

— ফিলল 294

Answer 2

একটি সম্পাদনযোগ্য ডিভের সাহায্যে আপনি পদ্ধতিটি ব্যবহার করতে পারেন document.execCommand সাহায্যে আপনি নির্দিষ্ট করা ট্যাগগুলির জন্য সমর্থন সরবরাহ করতে এবং অন্য কোনও কার্যকারিতার জন্য সহজেই ( আরও বিশদ ) ..

#text {
    width : 500px;
	min-height : 100px;
	border : 2px solid;
}

<div id="text" contenteditable="true"></div>
<button onclick="document.execCommand('bold');">toggle bold</button>
<button onclick="document.execCommand('italic');">toggle italic</button>
<button onclick="document.execCommand('underline');">toggle underline</button>

Comments

কিছু ব্রাউজারে এটি কাজ করে না এটি কেবল '16

— জেফ্রি ক্রোডার

Answer 3

যেহেতু আপনি কেবল রেন্ডার বলেছেন, হ্যাঁ আপনি পারেন। আপনি এর লাইন বরাবর কিছু করতে পারেন:

function render(){
	var inp     = document.getElementById("box");
	var data = `
<svg xmlns="http://www.w3.org/2000/svg" width="${inp.offsetWidth}" height="${inp.offsetHeight}">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml" 
style="font-family:monospace;font-style: normal; font-variant: normal; font-size:13.3px;padding:2px;;">
${inp.value} <i style="color:red">cant touch this</i>
</div>
</foreignObject>
</svg>`;
	var blob = new Blob( [data], {type:'image/svg+xml'} );
	var url=URL.createObjectURL(blob);
	inp.style.backgroundImage="url("+URL.createObjectURL(blob)+")";
 }
 onload=function(){
  render();
  ro = new ResizeObserver(render);
	ro.observe(document.getElementById("box"));
 }

#box{
  color:transparent;
  caret-color: black;
  font-style: normal;/*must be same as in the svg for caret to align*/
  font-variant: normal; 
  font-size:13.3px;
  padding:2px;
  font-family:monospace;
}

<textarea id="box" oninput="render()">you can edit me!</textarea>

এটি এমন করে তোলে যাতে একটি textareaএইচটিএমএল রেন্ডার করে! পুনরায় আকার দেওয়ার সময় ঝলকানি ছাড়াও, সরাসরি ক্লাস ব্যবহার করতে অক্ষমতা এবং ডিয়ার্টের ডিভের ঠিক svgএকই রকম বিন্যাসের textareaজন্য ক্যারেট সঠিকভাবে সাজানোর জন্য তা নিশ্চিত করা, এটি কাজ করে!

Answer 4

এটিতে একটি সংযোজন। (যেমন পরিবর্তন চরিত্র সত্ত্বা ব্যবহার করতে পারেন <div>থেকে <div>) এবং পাঠ্য এলাকা মধ্যে প্রতিদান দেবেন। তবে এটি সংরক্ষণ করা হলে পাঠ্যমূল্যের মান হ'ল পাঠ্য হিসাবে রেন্ডার করা হয় । সুতরাং আপনার ডি-এনকোড করার দরকার নেই। আমি কেবল এটি ব্রাউজার জুড়ে পরীক্ষা করেছি (অর্থাত্ 11 এ)।

Comments

আমি সত্যিই এটির জন্য আমার পক্ষে কাজ করতে চাই তবে তা হয়নি। উদাহরণস্বরূপ <textarea> check for url &lt;B&gt;http://localhost/Dashboard.aspx&lt;/B&gt; &lt;BR&gt; Tool Started at &lt;B&gt;11/10/2015 3:56:58 AM&lt;/B&gt; &lt;BR&gt; .... </textarea>HTML হিসাবে প্রদর্শন করে না। আমি ক্রোমে। 46.

— sirank

হুঁ। আমি সেই স্ট্রিংটি সরাসরি এইচটিএমএল নথিতে অনুলিপি করেছি এবং এটি আমার জন্য ক্রোম সংস্করণ 48.0.2552.0 ডিভ (64-বিট) ওএস এক্স 10.11.1 এ সঠিকভাবে মার্কআপটি রেন্ডার করে। সুতরাং এটি একটি সংস্করণ সমস্যা।

— axlotl

: এই জন্য-ভোট নিচে তাই এখানে একটি কলম আমি পাওয়া চালিয়ে codepen.io/axlotl/pen/YGZOEq

— axlotl

Answer 5

আমার একই সমস্যা তবে বিপরীত এবং নিম্নলিখিত সমাধানে রয়েছে। আমি একটি টেক্সেরিয়ায় একটি ডিভ থেকে এইচটিএমএল রাখতে চাই (যাতে আমি আমার ওয়েবসাইটে কিছু প্রতিক্রিয়া সম্পাদনা করতে পারি; আমি একই জায়গায় টেক্সারিটি রাখতে চাই))

এই ডিভের বিষয়বস্তুটি আমি একটি টেক্সেরিয়ায় রেখে দিতে পারি:

var content = $('#msg500').text();
$('#msg500').wrapInner('<textarea>' + content + '</textarea>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="msg500">here some <strong>html</strong> <i>tags</i>.</div>

Answer 6

এই উদাহরণ চেষ্টা করুন

function toggleRed() {
  var text = $('.editable').text();
  $('.editable').html('<p style="color:red">' + text + '</p>');
}

function toggleItalic() {
  var text = $('.editable').text();
  $('.editable').html("<i>" + text + "</i>");
}

$('.bold').click(function() {
  toggleRed();
});

$('.italic').click(function() {
  toggleItalic();
});

.editable {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 5px;
  resize: both;
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="editable" contenteditable="true"></div>
<button class="bold">toggle red</button>
<button class="italic">toggle italic</button>

Answer 7

<textarea> আপনার কেবলমাত্র সামারনোট ডাব্লুওয়াইএসআইডাব্লুআইজি সম্পাদক ব্যবহার করা দরকার তা দিয়ে এটি সম্ভব

এটি একটি পাঠ্য এলাকা ভিতরে এইচটিএমএল ট্যাগ ব্যাখ্যা (যথা <strong>, <i>, <u>, <a>)

Comments

এটি টেক্সটরিয়া ব্যবহার করে না। এটি ডিভ ব্যবহার করে, যা কোনও ফর্মের সাথে জমা দেওয়া যায় না।

— উসমান আহমেদ

এটি টেক্সারিয়া দিয়ে কাজ করে, কেবল ডিভের পরিবর্তে টেক্সারিয়ায় আইডি দেওয়ার চেষ্টা করুন। আমি টেক্সারিয়া এবং সামারনোট ব্যবহার করে একটি সম্পূর্ণ প্রকল্প তৈরি করেছি। এটা ঠিক কাজ করে!

— ফেনিল শাহ 8'18

আলোচ্য বিষয়টি কি? টেক্সেরিয়া ব্যবহার করা হলে এটি ckeditor হিসাবে একই আচরণ করে। জিজ্ঞাসা করা হিসাবে HTML ট্যাগ রেন্ডার করতে পারবেন না।

— উসমান আহমেদ

আমার কেন একটি WYSIWYG সম্পাদক ব্যবহার করা উচিত? দুঃখিত, এটি আসলে কোনও উত্তর নয়।

— লুকা দে নারদী 24'19