在textarea内部渲染HTML

2020/11/12 06:21 · javascript ·  · 0评论

我需要能够在文本区域(即<strong>,<i>,<u>,<a>)中呈现一些HTML标记,但是textareas仅将其内容解释为文本。有没有一种简单的方法,而无需依赖外部库/插件(我正在使用jQuery)?如果没有,您知道我可以使用任何jQuery插件吗?

这与不可能textarea您正在寻找的是一个内容可编辑的div,这很容易做到:

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

通过可编辑的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!除了在调整大小时闪烁外,还无法直接使用类,并且必须确保div中的div与插入符号的svg格式相同,textarea以便正确对齐,这是可行的!

附录。您可以使用字符实体(例如更改<div>&lt;div&gt;),它将在文本区域中呈现。但是,保存后,textarea的值就是所渲染的文本因此,您无需解码。我只是在各种浏览器上进行了测试(即回到11)。

试试这个例子

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

这是可能的<textarea>
,你需要做的唯一事情是使用
Summernote所见即所得的编辑器

它解释一个textarea里的HTML标签(即<strong><i><u><a>

本文地址:http://javascript.askforanswer.com/zaitextareaneibuxuanranhtml.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!