如何在内容可编辑的元素中粘贴多行文本，使每一行始终位于其自己的div中？
在内容可编辑的元素中粘贴多行文本，使每一行始终位于其自己的div中，可以通过以下步骤实现：
- 创建一个包含多个div的父容器，用于容纳每一行文本的div。
- 将内容可编辑的元素设置为只接受纯文本粘贴，以避免复制格式。
- 监听粘贴事件，获取粘贴的文本内容。
- 将获取到的文本内容按行分割成数组。
- 遍历文本行数组，为每一行创建一个div，并将文本内容插入到div中。
- 将每个div添加到父容器中。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.line {
border: 1px solid #ccc;
padding: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var container = document.getElementById('container');
var editableElement = document.createElement('div');
editableElement.contentEditable = true;
container.appendChild(editableElement);
editableElement.addEventListener('paste', function(e) {
e.preventDefault();
var text = e.clipboardData.getData('text/plain');
var lines = text.split('\n');
lines.forEach(function(line) {
var div = document.createElement('div');
div.className = 'line';
div.textContent = line;
container.appendChild(div);
});
});
</script>
</body>
</html>这段代码创建了一个父容器div，并在其中创建了一个内容可编辑的div。当在内容可编辑的div中粘贴多行文本时，会触发粘贴事件，将每一行文本分割成数组，并为每一行创建一个div，最后将这些div添加到父容器中。每个div都有一个类名为"line"，并且具有一些基本的样式，如边框、内边距和外边距。
这种方法可以确保每一行始终位于其自己的div中，方便对每一行文本进行样式和操作。
相关·内容
运行代码并将任意两行纯文本复制并粘贴到框中。它将按照我想要的方式粘贴，每一行都在自己的div中。 现在删除所有内容并按enter键创建一个空的div，然后将文本粘贴到该div中。不想要的行为将会被看到。 还有更多不一致行为的例子。例如，删除
浏览 73提问于2021-04-24得票数 1
回答已采纳
我希望flexbox容器中的div出现在下一行。 我有一个抽屉div，里面有详细的div。在details div中，我希望SVG和span元素在一行中。如果span元素包含多行文本，则应放入下一行，span元素之后的div</em
浏览 20提问于2019-04-11得票数 0
鉴于以下数据由一组元素组成，每个元素都有一个标题和一个文本： { text: 'text1' {而每个项都使用内容可编辑，以便使这些字段可编辑。 }); };这是使用内容可
浏览 1提问于2015-08-31得票数 0
回答已采纳
1回答
我在yank buffer中有一些前缀，我想粘贴到视觉块选择区域之前的多行中。 当我按I时，我可以在每一行的选定内容之前输入文本，但是当我尝试粘贴(使用p或P)时，它会用粘贴的文本更改选定内容。如何避免删除选中的文本？
浏览 18提问于2019-03-18得票数 4
回答已采纳
2回答
</div> </div> <div>X</div>
<div class="middle">Var Content</div<
浏览 0提问于2018-07-16得票数 1
回答已采纳
正如您所看到的，我正在尝试实现在中显示的视觉外观，应用于元素的颜色应该仅应用于文本，而不是其整个容器。元素是内联的，但由于它们有多行，因此背景将应用于具有与最长行相同宽度的可视块。文本是动态的，所以我不能将它分解成单独的内联元素，所以最后一行是一个单行内联元素。我正在寻找一个JavaScrip
浏览 1提问于2012-10-07得票数 0
我的Excel表有700多行，在第二列中，我使用html代码进行产品描述。我需要提取特定的值，它总是在.中。<div class="something"> <h1>Content to remove</h1></
浏览 0提问于2017-06-12得票数 0
回答已采纳
我有一个简单的HTML表，如下所示。这两个列都包含动态内容，但左边有一个可滚动的div。我希望该可滚动div的显示高度根据表的大小进行调整，并使表大小仅由column2的动态高度设置。</div> </tr>我希望该表仅根据column2<
浏览 0提问于2012-06-01得票数 1
回答已采纳
因此，我在我的angularjs应用程序中使用可内容编辑的div时遇到了问题。假设我有一个这样的标签因此，当我向ngmodel模型值添加文本时，例如$scope.something= $scope.something+ 'text';
浏览 0提问于2018-11-10得票数 0
我正试图在<span>元素中垂直地居中一些文本，相对于一个更大的<span>，它是第一个元素的同级。两者都是包含父<div>元素的子元素。中描述的line-height技巧(定义了line-height)，但它似乎不起作用。在实际代码中，页面上有更改字体属性的控件，JavaS
浏览 3提问于2014-02-19得票数 4
回答已采纳
有些单元格在DataGridView中显示得有点长，所以我截断文本并添加“.”到课文。我不想把文字包装成多行。
我想让用户编辑列中的文本。在EditingControlShowing中，我当前将编辑TextBox的文本设置为文本的完整值(否则只显示截断的值)。目前一切都很好。如何使</
浏览 2提问于2018-03-23得票数 2
回答已采纳
我试图在页面上定位一个元素，以便它总是与页面上的其他控件元素分开。我希望这个元素被放置在页面的任何位置，这取决于页面上的其他控制元素，用户所采取的操作等等。到目前为止，我有三个组件元素: 1) DIV容器，2)应该始终位于DIV容器顶部的图像，3)应该始终位于DIV容器底部<
浏览 2提问于2020-03-01得票数 1
回答已采纳
1回答
我有一个元素(例如<p>或<h1>)，其line-height属性小于font-size属性。这迫使元素中的文本位于元素的外部。不幸的是，我不能改变这一点，因为它会改变页面的设计。这本身是可以的，但是我必须在这个元素周围添加一个border(或outline)。现在，正如预期的那样，边框将环绕元素，而不是文本</e
浏览 1提问于2021-01-08得票数 0
我正在制作一个富文本编辑器，它就像是Google Docs的克隆。由于某些原因，文本编辑器中的每一行都被包装到它自己的div容器中。例如，如果有3行文本，则在文本编辑器中将有3个子“行节点”(呈现为未设置样式的div)。并且在每个行节点内有行内跨度元
浏览 12提问于2019-10-31得票数 0
我有一个可满足的div。它从一些孩子开始。还有一个文本区域。当按下"enter“时，div的内容被复制到文本框中。我的问题是，通过编辑div生成的任何新元素都不会以与原始子元素相同的格式复制；文本会被挤在一起。他们的html看起来是一样的，所以这很
浏览 2提问于2013-05-17得票数 0
2回答
我有一个文本视图，您可以在这里编写多行文本。如何将文本保存在一个或多个文件中？
我使用了多行文本字段，但它不允许我转到下一行，除非我按下控制enter。我所想的就像一个文本编辑器，在您输入所有保存在文件中的内容之后。或者，我可以将文本视图中的每一行<
浏览 1提问于2016-05-16得票数 0
回答已采纳
3回答
我在一个固定宽度的块容器中有一个input[type="radio"]元素。<input/>元素的支持文本不能放在一行中，而是翻到两行或更多行。例如：div.leftBlock { float: left;}
<div class="leftBlock&q
浏览 0提问于2009-01-29得票数 3
回答已采纳
1回答
在Wordpress中，我试图仅使用CSS来修改给定主题的一些标准布局。下面的标记产生一个div，所有子元素都从顶部流动(如预期的那样)。问题是，我有3个这样的divs并排，并且希望按钮( anchor格式为一个按钮)始终位于每个div的底部，而不管锚/按钮前面有多少行文本(下面示例中的“我们的团队.更多文本<
浏览 0提问于2014-03-30得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
