我需要在文本域内呈现一些HTML标签(即<strong>,<i>,<u>,<a>),但是文本域只将其内容解释为文本。是否有简单的方法可以在不依赖外部库/插件(我正在使用jQuery)的情况下完成? 如果没有,您知道我可以使用哪个jQuery插件来完成吗?
我需要在文本域内呈现一些HTML标签(即<strong>,<i>,<u>,<a>),但是文本域只将其内容解释为文本。是否有简单的方法可以在不依赖外部库/插件(我正在使用jQuery)的情况下完成? 如果没有,您知道我可以使用哪个jQuery插件来完成吗?
使用 textarea
是无法实现这个功能的。您需要使用 contentEditable 属性来替代, 实现起来非常简单:
<div contenteditable="true"></div>
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>
contenteditable
是一个枚举属性,而不是布尔属性(除了true
和false
状态外还有一个inherit
状态)。我认为这意味着指定一个值是必需的,尽管我无法找到明确的规范部分来确认这一点。然而,MDN似乎也持相同看法。 - Tim Downcontenteditable
解释为与contenteditable =""
相同,而后者又与contenteditable="true"
相同。 - Tim Down 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>
Since you only said render, yes you can. You could do something along the lines of this:
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
will render html!
Besides the flashing when resizing, inability to directly use classes and having to make sure that the div in the svg
has the same format as the textarea
for the caret to align correctly, it's works!
<
时就会出现问题。 - Avatar<b>hello</b>
来获得粗体文本。
添加自定义文本解析器,其可能性是无限的。例如,您可以使每个 a
字符变成红色。如果您愿意,我可以看看我以前做过的更详细的版本。 - merlin尝试这个示例:
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>
),它将在文本区域中呈现。<textarea>检查url <B>http://localhost/Dashboard.aspx</B><BR>工具启动于<B>2015年11月10日上午3:56:58</B><BR>....</textarea>
不会显示为HTML。我使用的是Chrome 46。 - sirdankvar 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>
使用<textarea>
可以实现这一点。您只需要使用Summernote所见即所得编辑器。
它可以在文本区域内解释HTML标记(即<strong>
,<i>
,<u>
和<a>
)。