如何使可内容编辑的div只允许某些标签？
要使可内容编辑的div只允许某些标签，可以通过以下步骤实现：
- 使用contenteditable属性将div设置为可编辑：
<div contenteditable="true"></div> - 使用JavaScript监听div的输入事件，以便在用户输入内容时进行处理。
- 在输入事件的处理函数中，获取用户输入的内容，并使用DOM操作方法将不允许的标签进行过滤或移除。
- 可以使用DOM的createElement方法创建允许的标签，并使用appendChild方法将其添加到div中。
以下是一个示例代码，演示如何实现只允许某些标签的可编辑div：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可内容编辑的div</title>
</head>
<body>
<div id="editableDiv" contenteditable="true"></div>
<script>
var editableDiv = document.getElementById('editableDiv');
editableDiv.addEventListener('input', function() {
var allowedTags = ['p', 'strong', 'em']; // 允许的标签
var divContent = editableDiv.innerHTML;
var tempDiv = document.createElement('div');
tempDiv.innerHTML = divContent;
var childNodes = tempDiv.childNodes;
for (var i = childNodes.length - 1; i >= 0; i--) {
var node = childNodes[i];
if (node.nodeType === Node.ELEMENT_NODE && allowedTags.indexOf(node.tagName.toLowerCase()) === -1) {
tempDiv.removeChild(node);
}
}
editableDiv.innerHTML = tempDiv.innerHTML;
});
</script>
</body>
</html>在上述示例中，我们使用了一个允许的标签数组allowedTags，其中包含了p、strong和em标签。在输入事件处理函数中，我们首先获取div的内容，并创建一个临时的div元素tempDiv，将div的内容赋值给它。然后，我们遍历tempDiv的子节点，如果子节点是不允许的标签，则从tempDiv中移除该节点。最后，将过滤后的内容重新赋值给可编辑的div。
这样，用户在可编辑的div中输入内容时，只有允许的标签会被保留，其他标签会被过滤掉。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobdev
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云元宇宙：https://cloud.tencent.com/product/tencent-metaverse
相关·内容
1回答
如何使可内容编辑的div只允许某些标签？
javascript、jquery、html、contenteditable
我使用的是一个可满足的div。 });
$("div").append('<span>Span text
浏览 13提问于2017-03-06得票数 4
2回答
使用简单标记语言-应用它
php、formatting、markup
我希望允许我的用户添加内容。为了使它容易，我将使用纺织品或PHP标记。
所以我的问题是：
用纺织品还是减价好？
浏览 1提问于2012-08-06得票数 2
回答已采纳
1回答
如何在内容可编辑的div中突出显示语法？
javascript、syntax、syntax-highlighting、contenteditable
我有一个可满足的div：如果用户在可内容编辑的div中输入HTML、CSS或Javascript标签，我如何使其语法突出显示因此，当用户输入变量、标签等时，它们是用颜色编码的
浏览 0提问于2015-08-08得票数 1
1回答
当div不在焦点并且文本被添加到ngmodel时的可持续问题
javascript、html、angularjs、contenteditable
因此，我在我的angularjs应用程序中使用可内容编辑的div时遇到了问题。假设我有一个这样的标签因此，当我向ngmodel模型值添加文本时，例如$scope.something= $scope.something+ 'text';，文本将被添加到<
浏览 0提问于2018-11-10得票数 0
2回答
哪些web管理员wysiwyg预览选项可用？
html、css、asp.net-mvc-3、ckeditor、wysiwyg
我有一个网络管理员，当用户编辑信息时，有一个wysiwyg编辑器。当前，视图模板将为保存的字段值生成一行。我能想到的选择是：
就这样离开了。以某种方式避免了对MVC3的编码，并添加了实际的<br>来代替内容中的</p>或<br>。的内容实际上是以html<e
浏览 1提问于2011-10-26得票数 2
回答已采纳
4回答
在PHP中使用DOMDocument解析HTML
php、html、dom、html-parsing、domdocument
我想使用DOMDocument解析来自富文本编辑器的刺，确切地说，我需要的是：2)只允许这些风格：
3)删除类、id ...etc等允许标记中<
浏览 2提问于2011-07-30得票数 0
回答已采纳
2回答
角:如何使内容可编辑div的占位符保持到只在输入某物时
html、css、angular、typescript、contenteditable
我在中有一个内容可编辑的div，它有attr-placeholder。我试图以这样一种方式使占位符只在输入某些内容时消失。现在它消失时，div是在焦点。如何使内容可编辑div的占位符持续到只在输入某物时？
在访问页面时，如何使</e
浏览 2提问于2020-07-05得票数 0
1回答
只有特定单元格EditableNot按预期工作的受保护工作表
google-apps-script、google-sheets
我有一个受保护的工作表，但是有一个选项‘除了某些单元格’，例如单元格B2。为了使User1能够打开工作表，我将User1指定为查看器或编辑器。但是，如果指定为编辑器，那么User1可以更改工作表中我不想要的任何单元格。因此，由于我
浏览 1提问于2020-09-27得票数 0
回答已采纳
2回答
如何使每个多列表项在Sitecore中可编辑
asp.net、sitecore、sitecore8
MultiListField中的某些项必须显示在html中，但以2列显示，如下所示：
Item3 Item4
<p>Item2 Name</p> </div>
浏览 1提问于2016-04-06得票数 3
回答已采纳
3回答
问题是，我还希望表单能够适当地支持键盘输入，即让输入保持Tab键的可聚焦性，并且可以使用Spacebar进行选择。由于我隐藏了输入，它不能聚焦，所以我尝试使它的<label>焦点可用。和其他各种来源使我相信我可以使用tabindex属性(对应于HTMLElement.tabIndex属性)来完成这个任务。然而，当我试图将tabindex分配给我的标签时，它仍然像以往一样不受关注，无论我多么努力地对它进行Tab处理。
为什么tabindex 不使标签<
浏览 9提问于2014-12-18得票数 53
回答已采纳
1回答
可内容编辑的div -分割span标签-避免嵌套
javascript、jquery、html、nested、contenteditable
我正在开发一个使用contenteditable的打字工具。当用户键入一些文本时，我将其插入到span标记中，并将其添加到主div中；结果如下所示：如果用户将插入符号放在单词"hello“中，并以不同的颜色开始键入，结果将是：
<span style="color: black;">he<span style="color: red;"&
浏览 22提问于2018-02-24得票数 2
回答已采纳
4回答
使div中的内容不可编辑(可单击)
javascript、jquery、html
我有一个动态表单，其中的内容是动态创建的。每次单击按钮时，都会添加一个新的div元素。我想要做的是使前面的div不可编辑，即不能使用输入字段，不能单击按钮。谢谢。
浏览 1提问于2012-09-19得票数 0
回答已采纳
2回答
嵌套的span标记需要在外部div标记中强制使用水平滚动条
html、css
我使用div标签、嵌套的div标签和嵌套的span标签创建了一个表(没有实际的table元素)。当内部span标记的内容变得太宽时，外部div标记的水平滚动条将不会显示。例如。<div>Some text <&#
浏览 1提问于2014-04-04得票数 0
1回答
允许html标记吗？
nodes
完整的html设置只允许某些标记通过。我如何关闭这个，并允许所有标签？完全HTML 允许HTML标记：<a> <blockquote> <br> <cite> <code> <dd> <div> <dl> <dt> <em> <li> <ol> <p> <span> <strong
浏览 0提问于2012-02-20得票数 3
1回答
将Columnizer和JQuery的可排序性结合起来
jquery、jquery-ui-sortable
我有以下内容：<div>content</div><div>content</div>我使用的
浏览 4提问于2012-02-22得票数 0
回答已采纳
1回答
对于li标记内的div标记，Contenteditable不能正常工作
html、firefox、html-lists、contenteditable
我目前有一个需要有一个可满足的div标签内的安莉标签。请参阅以下示例： <div class="le-item-menu"><span class='le-item-close'>remove</span></div>
浏览 0提问于2012-02-07得票数 0
回答已采纳
1回答
在新创建的元素上设置游标不适用于空innerHtml
javascript、reactjs、contenteditable
这里的想法是，我有contentEditable div元素，在其中我输入了一些文本，我有按钮bold，您可以单击它，它将在我的div中创建新的strong元素，并将插入到这个元素中，从而给我输入这个元素的机会我怎样才能把迎合纳入新的创造元素。我也把它放在这个元素上，也许有办法用id来迎合元素？或者我的案子的任何其他可能的解决方案。sel.addRange(range); }
浏览 7提问于2022-01-17得票数 0
1回答
如何在contenteditable标签中更改按键操作
javascript、events、keyboard-events
当我在可内容编辑区域中按下'enter‘时，就会生成一个新的<div>，这是我想要添加的<br />标签。我如何才能操纵这种行为。它是如何在WYMeditor中实现的。
浏览 1提问于2010-05-05得票数 0
4回答
如何转义<code></code>标记中的所有代码以允许人们发布代码？
php、escaping
我想要做的是允许用户在需要的时候发布代码，这样代码就是可见的，并且不会渲染。例如：<div id="hkhsdfhu"></div><h1>Hello</h1><span>
<div id="hkhsdfhu"&现在，我使用下面的函数来只允许<
浏览 0提问于2012-03-01得票数 2
回答已采纳
2回答
如何获得一个div的pageYOffset？
javascript、vue.js、vuejs2
我不能得到div的pageYOffset。，这里有一个示例：
我隐藏了html溢出，只允许一个内容标记可滚动。
浏览 1提问于2018-02-17得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
