当前位置：首页 > news >正文

html页面，一个控件，可以粘贴图片和样式，一直按enter键会将下面内容推下去

news 2025/7/11 12:23:02

html页面代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>可编辑文本和图片区域</title><style>body {font-family: "Microsoft YaHei", sans-serif;padding: 40px;background-color: #f9f9f9;}.editor {width: 80%;min-height: 200px;padding: 20px;margin: 0 auto;background: #fff;border: 1px solid #ccc;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);border-radius: 8px;outline: none;}.below-content {margin-top: 40px;padding: 20px;background-color: #e3e3e3;text-align: center;border-radius: 8px;}img {max-width: 100%;height: auto;}</style>
</head>
<body><h2 style="text-align:center;">HTML 在线文本和图片编辑器</h2><!-- 可编辑区域 -->
<div class="editor" contenteditable="true">在这里输入文字，可以复制粘贴图片，按回车换行，空格输入。
</div><!-- 下方内容，输入区域增高时它会自然被向下推 -->
<div class="below-content"><p>我是下面的内容，会被输入区推下来</p>
</div></body>
</html>

效果图：