Textarea के अंदर HTML का प्रतिपादन

Question

मुझे एक textarea (अर्थात् <strong>, <i>, <u>, <a>) के अंदर कुछ HTML टैग्स को प्रस्तुत करने में सक्षम होना चाहिए, लेकिन textareas केवल पाठ के रूप में उनकी सामग्री की व्याख्या करते हैं। क्या बाहरी पुस्तकालयों / प्लगइन्स पर भरोसा किए बिना इसे करने का एक आसान तरीका है (मैं jQuery का उपयोग कर रहा हूं)? यदि नहीं, तो क्या आप ऐसा करने के लिए उपयोग किए जा सकने वाले किसी jQuery प्लगइन के बारे में जानते हैं?

Comments

ऐसा करने का एकमात्र तरीका यह होगा कि आप अपने HTML मार्कअप को textarea टैग की सामग्री पर CSS पोजिशनिंग ट्रिक्स के माध्यम से ओवरले करें। कुछ भी नहीं आप textarea सामग्री को अलग ढंग से प्रस्तुत करने के लिए ब्राउज़र को समझाने में मदद करेंगे। (ऐसा करने के लिए आपको वास्तव में "आवश्यकता" क्यों है?)

— पोंटी

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

— कोडिंग भिक्षु

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

यह एक वास्तविक शर्म की बात है कि आप जावास्क्रिप्ट के उपयोग के बिना व्यावहारिक रूप से इसका उपयोग नहीं कर सकते हैं या तो अजाक्स का उपयोग करके अपने परिवर्तनों को प्रस्तुत करें या उन्हें एक फॉर्म इनपुट में कॉपी करें। अगर किसी को यह करने का एक तरीका मिल गया है तो मुझे वास्तव में दिलचस्पी होगी!

— बेन

@yart: ठीक है, मुझे नहीं लगता कि यह वास्तव में वैध है, भले ही यह मेरे द्वारा आजमाए गए सभी ब्राउज़रों में काम करता हो। एक बूलियन विशेषता (बल्कि एक राज्य के रूप में अच्छी तरह से और ) के बजाय contenteditableएक enumerated विशेषता है , और मुझे लगता है कि इसका मतलब है कि एक मूल्य निर्दिष्ट करना अनिवार्य है, हालांकि मुझे इस बात की पुष्टि करने के लिए कल्पना का एक निश्चित बिट नहीं मिल सकता है। एमडीएन हालांकि सहमत प्रतीत होता है । inherittruefalse

— टिम डाउन

@yartart: मैंने मान लिया कि ब्राउज़र का contenteditableकोई मूल्य नहीं है contenteditable="", जो बदले में, जैसा है वैसा ही है contenteditable="true"।

— टिम डाउन

यह किसी भी एक से बेहतर काम नहीं करता है textarea। फिडेल <strong>someting</strong>में टाइप करना आपको उस सटीक पाठ के साथ छोड़ देता है। HTML लागू नहीं है।

— मैट एलेन

@MarcusEkwall, लेकिन html रेंडरिंग के लिए सवाल नहीं पूछ रहा था?

— दर्शन २

Answer 2

एक संपादन योग्य div के साथ आप आसानी से आपके द्वारा निर्दिष्ट टैग के लिए और कुछ अन्य कार्यक्षमता के लिए समर्थन प्रदान करने के लिए विधि 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>

यह ऐसा करता है ताकि एक textareaHTML रेंडर करेगा! आकार बदलने के दौरान, कक्षाओं का सीधे उपयोग करने में असमर्थता और यह सुनिश्चित करने के लिए कि डिव में svgएक ही प्रारूप है textarea, कैरेट के लिए सही ढंग से संरेखित करने के लिए, यह काम करता है!

Answer 4

इसका एक परिशिष्ट। आप वर्ण संस्थाओं का उपयोग कर सकते हैं (जैसे कि परिवर्तन <div>करना <div>) और यह टेक्स्टारिया में प्रस्तुत करेगा। लेकिन जब इसे सहेजा जाता है, तो textarea का मान पाठ के रूप में प्रदान किया जाता है । इसलिए आपको डी-एनकोड करने की आवश्यकता नहीं है। मैंने इसे केवल ब्राउज़रों में परीक्षण किया (यानी 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 पर हूं।

— श्रीडंक

हम्म। मैंने उस स्ट्रिंग को सीधे एक HTML दस्तावेज़ में कॉपी किया और यह क्रोम वर्जन 48.0.2552.0 देव (64-बिट) OS X 10.11.1 में मेरे लिए मार्कअप को ठीक से प्रस्तुत करता है। तो शायद यह एक संस्करण की समस्या है।

— axlotl

मैं नीचे इस लिए वोट देता रहता हूँ कि यहाँ एक पेन है: codepen.io/axlotl/pen/YGZOEq

— axlotl

Answer 5

मैं एक ही समस्या है, लेकिन रिवर्स में, और निम्नलिखित समाधान। मैं एक टेक्सारिया में div से html रखना चाहता हूं (इसलिए मैं अपनी वेबसाइट पर कुछ प्रतिक्रियाओं को संपादित कर सकता हूं; मैं एक ही स्थान पर textarea रखना चाहता हूं।)

इस div की सामग्री को textarea में उपयोग करने के लिए:

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> केवल उसी चीज़ के साथ संभव है जिसे आपको करने की आवश्यकता है समरनोट WYSIWYG संपादक का उपयोग करें

यह एक पाठ क्षेत्र के अंदर HTML टैग की व्याख्या (अर्थात् <strong>, <i>, <u>, <a>)

Comments

इसमें टेक्सारिया का उपयोग नहीं किया गया है। यह div का उपयोग करता है, जिसे एक फॉर्म के साथ प्रस्तुत नहीं किया जा सकता है।

— उस्मान अहमद

यह textarea के साथ काम करता है, बस div के बजाय textarea को आईडी देने की कोशिश करता है। मैंने टेक्सारिया और समरनोट का उपयोग करके एक पूरी परियोजना बनाई। यह बढ़िया काम करता है!

— फेनिल शाह

क्या बात है? यदि यह textarea का उपयोग किया जाता है तो यह ckeditor के समान है। HTML टैग्स को पूछे जाने पर रेंडर नहीं कर सकते।

— उस्मान अहमद

मुझे WYSIWYG संपादक का उपयोग क्यों करना चाहिए? यह वास्तव में जवाब नहीं है, क्षमा करें।

— लुका डी नारदी