Rendering HTML bên trong textarea

Question

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

Answer 1

Điều này không thể thực hiện với một số textarea. Những gì bạn đang tìm kiếm là một content editable div, mà là rất dễ dàng 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>

Answer 2

Với một div có thể chỉnh sửa, bạn có thể sử dụng phương pháp document.execCommand (more details) để 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; 
 
\t min-height : 100px; 
 
\t 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>

Answer 3

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

<div id="msg500">here some <strong>html</strong> <i>tags</i>.</div> 

Để đưa nội dung của div này trong textarea Tôi sử dụng:

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

Answer 4

Phụ lục này. Bạn có thể sử dụng các thực thể ký tự (chẳng hạn như thay đổi <div> thành <div>) và nó sẽ hiển thị trong vùng văn bản. Nhưng khi được lưu, giá trị của vùng văn bản là văn bản như được hiển thị. Vì vậy, bạn không cần phải de-mã hóa. Tôi vừa thử nghiệm điều này trên các trình duyệt (tức là quay lại 11).

Answer 5

thử ví dụ này trên JSFiddle

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

<div class="editable" contenteditable="true"></div> 
<button class="bold">toggle red</button> 
<button class="italic">toggle italic</button> 

<script> 
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(); 
}); 
</script> 

Sửa bởi Jeffrey Crowder - Web Developer/Windows lập trình viên

Tôi đã thêm một fiddle JS của mã này.

Answer 6

này có thể với <textarea> điều duy nhất bạn cần làm là sử dụng Summernote WYSIWYG editor

nó diễn giải các thẻ HTML bên trong một textarea (cụ thể là <strong>, <i>, <u>, <a>)