Question

我希望我的页面中的textarea在从其他网页复制时可以使用格式进行复制。当我使用TinyMCE或CkEditor时，它会显示附近的工具栏。我不想在textarea附近显示任何文本编辑器工具栏。它应该看起来像textarea但在粘贴时有格式。建议我一些想法。

Answer 1

您可以将div与contenteditable="true"一起使用。在下面的示例中，您会先找到div，然后找到textarea，button。如果您将某些内容粘贴到div并点击button，则会在textarea内看到粘贴内容的HTML。当然，您可以使用CSS（textarea）隐藏此display:none;，然后将其用作HTML表单的一部分。通常的做法是在提交表单时将div的内容复制到textarea - 例如应用于button点击的功能也可能包含document.myForm.submit();之类的行。

<html>
<head>
<style type="text/css">
#myDiv, #myTxt{
    width:300px;
    height:180px;
    border:1px solid black;
}
#myDiv{
    overflow:auto;
}
#myBtn{
    display:block;
    margin:6px 0px;
}
</style>
</head>
<body>
<div id="myDiv" contenteditable="true"></div>
<button type="button" id="myBtn">See HTML Below</button>
<textarea id="myTxt" readonly></textarea>
<script type="text/javascript">
document.getElementById("myBtn").onclick = function(){
    document.getElementById("myTxt").innerHTML = document.getElementById("myDiv").innerHTML;
}
</script>
</body>
</html>

Demo

Answer 2

我没有评论要点所以我会在这里发布：

您是否可以删除或隐藏您要使用的编辑器的工具栏（使用JavaScript），以便它看起来像textarea？

你可以使用类似jQuery的$（“TOOLBAR_ID”）。hide（）。

Textarea复制与格式

2 个答案: