Hướng dẫn render html in textarea - hiển thị html trong vùng văn bản

Question

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

3. Bạn đang tìm kiếm một Div có thể chỉnh sửa nội dung, rất dễ thực hiện:

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

Đã 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;
}

4 (chi tiết hơn) để dễ dàng cung cấp hỗ trợ cho các thẻ bạn đã chỉ định và cho một số chức năng khác ...

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

Đã 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 = `
<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>

Đ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;
}

3 sẽ hiển thị HTML! Bên cạnh việc nhấp nháy khi thay đổi kích thước, không có khả năng sử dụng trực tiếp các lớp và phải đảm bảo rằng div trong

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

strong {
  font-weight: bold;
}

6 có định dạng giống như

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

strong {
  font-weight: bold;
}

3 để CARET căn chỉnh chính xác, nó hoạt động!

Đã 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('<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;
}

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

strong {
  font-weight: bold;
}

0

Đã 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;
}

8 thành

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

strong {
  font-weight: bold;
}

9) và nó sẽ kết xuất trong textarea.

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

1

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

strong {
  font-weight: bold;
}

2

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

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

0. Bạn chỉ cần sử dụng trình soạn thảo Summernote Wysiwyg.

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

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

1,

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

2,

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

3 và

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

4).

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

5

programming html Bold in textarea V-html textarea Textarea autofocus Input type textarea