在 HTML 文档中创建可编辑内容

htmljavascriptprogramming scripts更新于 2025/3/13 11:56:17

在 Html 中，我们可以使用 contenteditable 属性编辑内容，该属性指定元素内容是否可由用户编辑。

如果元素的内容可编辑，则设置或返回 contentEditable 属性。

语法

HTML 中可编辑内容的用法/语法是 −


<element contenteditable = "true|false">

上述 contenteditable 属性有两个值 true/false。

True 表示元素可编辑。
False 表示元素不可编辑。

示例

以下是在 HTML 中创建可编辑内容的示例 −


<!DOCTYPE html>
<html>
<body>
   <p contenteditable="true">This content is editable. Try to edit it.</p>
   <p>This is a normal content. It won't edit.</p>
</body>
</html>

示例

下面是另一个示例，我们将 contenteditable 属性的值更改为 true −


<!DOCTYPE html>
<html>
<head>
   <title>contenteditable attribute</title>
   <style>
      body {
         width: 70%;
         text-align: center;
      }

      h1 {
         color: blue;
      }
   </style>
</head>
<body>
   <h1>TutorialsPoint</h1>
   <h2>Using contenteditable attribute</h2>
   <p contenteditable="true">Tutorials Point: Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</p>
</body>
</html>

执行上述示例后，我们可以看到矩形框中的一些文本。内容。我们还可以编辑矩形框中的内容，因为属性值 contenteditable 被赋值为 TRUE。

示例

如果将 contenteditable 属性的值更改为 false。则无法编辑文本 −


<!DOCTYPE html>
<html>
<head>
   <title>contenteditable attribute</title>
   <style>
      body {
         width: 70%;
         text-align: center;
      }

      h1 {
         color: blue;
      }
   </style>
</head>
<body>
   <h1>TutorialsPoint</h1>
   <h2>Using contenteditable attribute</h2>
   <p contenteditable="false">Tutorials Point: Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</p>
</body>
</html>

我们无法编辑内容，因为 contenteditable="false" 的属性值被赋予了 −

示例

现在让我们看一个将级联样式应用于可编辑内容的示例 −


<!DOCTYPE html>
<html>
<head>
   <style>
      .output {
         font: 1rem 'Fira Sans', sans-serif;
      }

      blockquote {
         background: orange;
         border-radius: 5px;
         margin: 16px 0;
      }

      blockquote p {
         padding: 15px;
      }

      cite {
         margin: 16px 32px;
      }

      blockquote p::before {
         content: '\201C';
      }

      blockquote p::after {
         content: '\201D';
      }

      [contenteditable='true'] {
         caret-color: red;
      }
   </style>
</head>
<body>
   <blockquote contenteditable="true">
      <p>Edit this content to add your own Text</p>
   </blockquote>
   <cite contenteditable="true">-- Write your Name Here</cite>
</body>
</html>