编辑器中的designMode和contentEditable属性都是控制浏览器中页面编辑功能的属性。
designMode属性
designMode属性设置或返回文档的设计模式。如果值设置为"on",那么文档就会变成可编辑模式,可以对文档进行编辑操作;如果值设置为"off",那么文档就会变成只读模式,不能进行编辑操作。
示例一:将页面设置为编辑模式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例一:将页面设置为编辑模式</title>
<script>
function setEditMode() {
var doc = document.getElementById("myiframe").contentDocument;
doc.designMode = "on";
}
</script>
</head>
<body>
<p>这是一个iframe框架。</p>
<button onclick="setEditMode()">设置编辑模式</button>
<br><br>
<iframe id="myiframe" src="http://www.example.com"></iframe>
</body>
</html>
示例二:将页面设置为只读模式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例二:将页面设置为只读模式</title>
<script>
function setEditMode() {
var doc = document.getElementById("myiframe").contentDocument;
doc.designMode = "off";
}
</script>
</head>
<body>
<p>这是一个iframe框架。</p>
<button onclick="setEditMode()">设置只读模式</button>
<br><br>
<iframe id="myiframe" src="http://www.example.com"></iframe>
</body>
</html>
contentEditable属性
contentEditable属性设置或返回元素的可编辑性。如果属性值为"true",表示元素可编辑;如果属性值为"false",表示元素不可编辑。
示例一:将div标签设置为可编辑模式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例一:将div标签设置为可编辑模式</title>
</head>
<body>
<div id="myDiv" contentEditable="true">
<h1>这是一个可编辑的div标签</h1>
<p>在这里输入内容……</p>
</div>
</body>
</html>
示例二:将div标签设置为只读模式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例二:将div标签设置为只读模式</title>
</head>
<body>
<div id="myDiv" contentEditable="false">
<h1>这是一个只读的div标签</h1>
<p>在这里输入内容……</p>
</div>
</body>
</html>
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:编辑器中designMode和contentEditable的属性的介绍 - Python技术站