在JS里面实现富文本编辑并在页面展示富文本内容
warning:
这篇文章距离上次修改已过283天，其中的内容可能已经有所变动。
在JavaScript中实现富文本编辑并在页面上显示富文本内容，可以使用contenteditable属性和innerHTML属性。以下是一个简单的例子：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rich Text Editor</title>
</head>
<body>
<div id="editor" contenteditable="true" style="border: 1px solid #ccc; padding: 10px;">
这里可以编辑富文本内容。
</div>
<button onclick="displayContent()">显示内容</button>
<div id="content-display" style="border: 1px solid #ccc; padding: 10px; margin-top: 10px;"></div>
<script src="editor.js"></script>
</body>
</html>JavaScript (editor.js):
function displayContent() {
var editorContent = document.getElementById('editor').innerHTML;
document.getElementById('content-display').innerHTML = editorContent;
}这段代码创建了一个可编辑的div元素，用户可以在其中输入富文本内容。有一个按钮用于将编辑后的内容显示在另一个div中。当用户点击按钮时，displayContent函数会被调用，该函数将编辑区域的HTML内容赋值给用于显示内容的div，从而实现富文本的展示。
评论已关闭