要使可内容编辑的div只允许某些标签,可以通过以下步骤实现:
<div contenteditable="true"></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中输入内容时,只有允许的标签会被保留,其他标签会被过滤掉。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云