使用
textarea
无法做到这一点。您正在寻找一个通过可编辑的 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>
既然你只说了渲染,是的,你可以。您可以按照以下方式做一些事情:
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>
textarea
将渲染 html!
除了调整大小时闪烁、无法直接使用类以及必须确保 svg
中的 div 与 textarea
具有相同格式以使插入符号正确对齐之外,它是有效的!
试试这个例子:
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>
对此的补充:您可以使用字符实体(例如将
<div>
更改为 <div>
),它将在文本区域中呈现。
但是当保存时,文本区域的值是呈现的文本。所以你不需要解码。我刚刚跨浏览器进行了测试(Internet Explorer 回到版本 11)。
我有同样的问题,但相反,以及以下解决方案。我想将 div 中的 html 放入文本区域(这样我可以在我的网站上编辑一些反应;我希望将文本区域放在同一位置。)
为了将此 div 的内容放入文本区域,我使用:
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>
$('.rendering_html').click(function() {
var text = $('#box').text();
$('#box').html('<p style="color:red;display: flex;flex-direction: column;width: min-content;">' + text + '</div>');
$('#box').find('input').attr("type","text");
});
#box {
width: 300px;
height: 200px;
border: 1px solid #ccc;
padding: 5px;
resize: both;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div contenteditable="true" id="box" class="well well-sm" style="min-height: 50px; resize: vertical; overflow: auto; margin-bottom: 5px;"></div>
<button type="button" class="rendering_html" style="background: red;color: #fff;padding: 5px 23px;">Применить / Удалить</button>