Question

我使用iFrame作为文本编辑器，并希望确保正文的第一部分始终是p标记。因此，我设置了这样，当用户第一次点击它将插入

<p><br></p>

这是有效的，除非用户按下退格按钮。一旦用户用完了明文退格，它就会删除上面的标签。

我已经捕获了退格事件，但是如何阻止用户删除段落标记？

Answer 1

我有11个选项（我假设你使用的是jQuery）。

首先，捕获keydown事件，如果该值等于默认值，则阻止该操作。这可能是内部来源iframe的html。

$('#editor').unbind('keydown').bind('keydown', function (event) {
    var doPrevent = false;
    if (event.keyCode === 8 && $('#editor').html() === '<p><br></p>'){
      
      event.preventDefault();
    }
});

选项二：只需将可编辑的元素改为div。

我更愿意避免使用iframe。他们让事情变得不必要地复杂化（imo）。

<!DOCTYPE html>
<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
	<script type="text/javascript">
	
		function DoEdit(){
			
			var idContent = document.getElementById('idContent');
			idContent.contentEditable = "true";
			//var editor = (idContent.contentWindow || idContent.contentDocument).content.document;
			//editor.designMode = "on";
			//editor.body.contentEditable = "true";
			//editor.contentEditable = "true";
		}
		function ShowContent(){
			
			var contentValue = "<p><br></p>"+$('#idContent').html();
			alert(contentValue)
		}
		$(document).ready(function(){
		
			DoEdit();
			$('#showContentBtn').click(function(){
				ShowContent();
			});
		});
	</script>
</head>
<body>
<p><br></p>
<div style="text-align: center;margin:0 auto;width: 500px; height: 300px; border: solid; border-width: 2px;">
	<div id="idContent" style="text-align: left; width:100%; height: 100%">
	</div>
</div>
<div style="text-align: center;"><input id="showContentBtn" type="button" value="Show Content"></div>
</body>
</html>

添加了一个按钮，以防有必要获取内容的值并将这些元素保留在其中。

选项3：如果需要在iframe中，只需将上面的url设置为iframe的src。

<html>
<body>
<div style="text-align: center">Edit Frame</div>
<iframe src="/widgets/editor/rich-text" ></iframe>
</body>
</html>

我希望这会为您提供一些可以在项目中使用的想法。

防止在iFrame中退格HTML。

1 个答案: