编辑器中designMode和contentEditable的属性的介绍

沃梦达教程前端开发

2024-02-09

编辑器中的designMode和contentEditable属性都是控制浏览器中页面编辑功能的属性。

编辑器中的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的属性的介绍