在 HTML 文档中创建可编辑内容
htmljavascriptprogramming scripts
在 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>
