HTML'yi textarea içinde oluşturma

146

Bazı HTML etiketlerini bir textarea (yani <strong>, <i>, <u>, <a>) içinde işleyebilmem gerekiyor, ancak textareas yalnızca içeriklerini metin olarak yorumluyor. Harici kütüphanelere / eklentilere güvenmeden yapmanın kolay bir yolu var mı (jQuery kullanıyorum)? Değilse, bunu yapmak için kullanabileceğim herhangi bir jQuery eklentisi biliyor musunuz?

— Kodlama Keşişi
kaynak

Bunu yapmanın tek yolu HTML işaretlemenizi CSS konumlandırma hileleriyle textarea etiketinin içeriği üzerine yerleştirmektir. Hiçbir şey, tarayıcıyı metin alanı içeriğini farklı şekilde oluşturmaya ikna etmenize yardımcı olmaz. (Neden tam olarak bunu yapmak için "ihtiyacın var?"

— Sivri

Sadece girdiği metne bazı biçimlendirme stilleri eklemek için kullanıcıya ihtiyacım var (Wordpress hakkında bir makale yazdığınızda olduğu gibi). Sadece metin hizalama ve benzeri gibi tüm özelliklere ihtiyacım yok, sadece bu temel etiketler.

— Kodlama Keşişi

234

Bu a ile yapmak mümkün değildir textarea. Aradığın , kolayca yapılabilen bir içerik düzenlenebilir div:

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

Snippet'i genişlet

— mekwall
kaynak

8

ajax kullanarak değişikliklerinizi göndermek veya bir form girişine kopyalamak için javascript kullanmadan pratik olarak kullanamayacağınız gerçek bir utanç. Herkes bunu yapmak için bir yol bulmuş olsaydı ben gerçekten ilgi olurdu!

— Ben

3

@yckart: Denediğim tüm tarayıcılarda çalışmasına rağmen bunun aslında geçerli olduğunu düşünmüyorum. bir Boolean contenteditableözniteliği yerine numaralandırılmış bir özniteliktir ( ve inheritbunun yanı sıra bir durum da vardır ) ve bunu onaylamak için spesifikasyonun kesin bir bitini bulamamam da bunun bir değer belirtmenin zorunlu olduğunu düşünüyorum . MDN de aynı fikirde . truefalse

— Tim Down

2

@yckart: Tarayıcının contenteditablehiçbir değerle aynı değere sahip olmadığını düşündüğünü varsaydım contenteditable="", ki bu da aynı contenteditable="true".

— Tim Down

7

Bu, a'dan daha iyi çalışmaz textarea. Kemanın <strong>someting</strong>içine yazmak , tam olarak o metni bırakır. HTML uygulanmaz.

— Matt Ellen

2

@MarcusEkwall ama html oluşturmayı isteyen soru değil miydi?

— phil294

31

Düzenlenebilir bir div ile belirttiğiniz etiketlere ve diğer bazı işlevlere kolayca destek sağlamak için yöntemi document.execCommand( daha fazla ayrıntı ) kullanabilirsiniz.

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

Snippet'i genişlet

— Sampath Liyanage
kaynak

Bu, bazı tarayıcılarda bunu yalnızca '16

— jeffrey crowder

5

Sadece render dediğin için evet yapabilirsin. Bunun çizgileri boyunca bir şeyler yapabilirsiniz:

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>

Snippet'i genişlet

Bu bir textareahtml render olacak şekilde yapar ! Yeniden boyutlandırırken yanıp sönmenin yanı sıra, sınıfları doğrudan kullanamama ve bölmedeki div öğesinin, düzeltme çizgisinin doğru hizalanmasıyla svgaynı formata sahip olduğundan emin olmak zorunda kalması textarea, işe yarıyor!

— bozdoğan
kaynak

2

Buna bir zeyilname. Sen (örneğin değiştirme gibi karakter varlıkları kullanabilirsiniz <div>için <div>) ve textarea hale getirecek. Kaydedildikten zaman, textarea değeri metindir işlenen . Bu yüzden kod çözme yapmanız gerekmez. Bunu tarayıcılarda test ettim (11'e kadar).

— axlotl
kaynak

Bunun benim için çalışmasını gerçekten istiyorum ama olmadı. Örneğin

<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 olarak görüntülenmez. Chrome

— 46'dayım

Hm. Bu dizeyi doğrudan bir html belgesine yapıştırdım ve Chrome Sürüm 48.0.2552.0 dev (64 bit) OS X 10.11.1'de biçimlendirmeyi benim için düzgün bir şekilde oluşturuyor. Belki de bu bir sürüm problemi.

— axlotl

Bunun için aşağı oy alıyorum, bu yüzden burada bir kalem var: codepen.io/axlotl/pen/YGZOEq

— axlotl

0

Aynı problemim var ama tersi ve aşağıdaki çözüm. Ben bir textarea bir div html koymak istiyorum (böylece web sitemde bazı reaksiyonlar düzenleyebilir; Ben aynı yerde textarea istiyorum.)

Bu div'in içeriğini bir metin alanına koymak için:

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>

Snippet'i genişlet

— Houdini
kaynak

0

bu örneği dene

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>

Snippet'i genişlet

— david grinstein
kaynak

-2

Bu, <textarea> yapmanız gereken tek şey Summernote WYSIWYG editörünü kullanmaktır.

Bir textarea içine HTML etiketlerini yorumladığı (yani <strong>, <i>, <u>, <a>)

— Fenil Şah
kaynak

Metin alanı kullanmaz. Bir form ile gönderilemeyen div kullanır.

— Usman Ahmed

Textarea ile çalışır, div yerine textarea için kimlik vermeyi deneyin. Textarea ve summernote kullanarak bir proje hazırladım. İyi çalışıyor!

— Fenil Shah

Amaç ne? Metin alanı kullanılıyorsa ckeditor ile aynı şekilde davranır. HTML etiketleri istendiği gibi oluşturulamaz.

— Usman Ahmed

Neden bir WYSIWYG editörü kullanmalıyım? Bu gerçekten bir cevap değil, üzgünüm.

— Luca De Nardi