Hướng dẫn how do i display html content in textarea? - làm cách nào để hiển thị nội dung html trong vùng văn bản?

Tôi cần có khả năng hiển thị một số thẻ HTML bên trong TextArea (cụ thể là ,,) nhưng TextAreas chỉ giải thích nội dung của chúng là văn bản. Có một cách dễ dàng để thực hiện nó mà không cần dựa vào các thư viện/plugin bên ngoài (tôi đang sử dụng jQuery)? Nếu không, bạn có biết bất kỳ plugin jQuery nào tôi có thể sử dụng để làm điều này không?

hỏi ngày 16 tháng 1 năm 2011 lúc 14:23Jan 16, 2011 at 14:23

Nhà sư mã hóa mã hóa MonkThe Coding Monk

7.48412 Huy hiệu vàng39 Huy hiệu bạc55 Huy hiệu Đồng12 gold badges39 silver badges55 bronze badges

3

Điều này là không thể làm với

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

strong {
  font-weight: bold;
}

JSfiddle

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

strong {
  font-weight: bold;
}

This is the first line.

See, how the text fits here, also if
there is a linebreak at the end?

It works nicely.



Great.

Đã trả lời ngày 16 tháng 1 năm 2011 lúc 14:28Jan 16, 2011 at 14:28

13

Với Div có thể chỉnh sửa, bạn có thể sử dụng phương thức

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

strong {
  font-weight: bold;
}

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

toggle bold
toggle italic
toggle underline

Đã trả lời ngày 23 tháng 11 năm 2014 lúc 18:28Nov 23, 2014 at 18:28

Sampath Liyanagesampath LiyanageSampath Liyanage

4.6882 Huy hiệu vàng25 Huy hiệu bạc40 Huy hiệu đồng2 gold badges25 silver badges40 bronze badges

4

Vì bạn chỉ nói kết xuất, vâng bạn có thể. Bạn có thể làm một cái gì đó dọc theo dòng này:

function render(){
	var inp     = document.getElementById("box");
	var data = `
`;
	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;
}

you can edit me!

Điều này làm cho nó để một

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

strong {
  font-weight: bold;
}

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

strong {
  font-weight: bold;
}

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

strong {
  font-weight: bold;
}

Đã trả lời ngày 14 tháng 4 năm 2018 lúc 4:01Apr 14, 2018 at 4:01

Merlinmerlinmerlin

5045 Huy hiệu bạc15 Huy hiệu Đồng5 silver badges15 bronze badges

4

Hãy thử ví dụ này:

function toggleRed() {
  var text = $('.editable').text();
  $('.editable').html('
' + text + '
');
}

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

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

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

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

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

strong {
  font-weight: bold;
}

Đã trả lời ngày 9 tháng 8 năm 2016 lúc 5:34Aug 9, 2016 at 5:34

2

Một phụ lục cho vấn đề này: bạn có thể sử dụng các thực thể ký tự (chẳng hạn như thay đổi

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

strong {
  font-weight: bold;
}

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

strong {
  font-weight: bold;
}

Nhưng khi nó được lưu, giá trị của textarea là văn bản được hiển thị. Vì vậy, bạn không cần phải mã hóa. Tôi chỉ đã kiểm tra điều này trên các trình duyệt (Internet & NBSP; Explorer trở lại phiên bản 11).

Đã trả lời ngày 5 tháng 11 năm 2015 lúc 22:13Nov 5, 2015 at 22:13

AXLOTLAXLOTLaxlotl

1.4021 Huy hiệu vàng12 Huy hiệu bạc20 Huy hiệu Đồng1 gold badge12 silver badges20 bronze badges

4

Tôi có cùng một vấn đề nhưng ngược lại, và giải pháp sau. Tôi muốn đặt HTML từ DIV trong Textarea (vì vậy tôi có thể chỉnh sửa một số phản ứng trên trang web của mình; Tôi muốn có TextArea ở cùng một vị trí.)

Để đặt nội dung của div này vào Textarea tôi sử dụng:

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

strong {
  font-weight: bold;
}

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

strong {
  font-weight: bold;
}

Ruslan López

4.3391 Huy hiệu vàng25 Huy hiệu bạc37 Huy hiệu đồng1 gold badge25 silver badges37 bronze badges

Đã trả lời ngày 17 tháng 3 năm 2015 lúc 0:52Mar 17, 2015 at 0:52

Điều này là có thể với

This is the first line.

See, how the text fits here, also if
there is a linebreak at the end?

It works nicely.



Great.

Nó diễn giải các thẻ HTML bên trong Textarea (cụ thể là

This is the first line.

See, how the text fits here, also if
there is a linebreak at the end?

It works nicely.



Great.

This is the first line.

See, how the text fits here, also if
there is a linebreak at the end?

It works nicely.



Great.

This is the first line.

See, how the text fits here, also if
there is a linebreak at the end?

It works nicely.



Great.

This is the first line.

See, how the text fits here, also if
there is a linebreak at the end?

It works nicely.



Great.

Đã trả lời ngày 1 tháng 7 năm 2017 lúc 15:39Jul 1, 2017 at 15:39

5

Bạn có thể đặt HTML vào Textarea không?