用html+css+js写一个类似world编辑文本功能的网站
时间: 2024-05-14 18:17:25 浏览: 13
好的,下面是一个简单的示例:
首先,我们需要一个文本编辑器,可以使用 `<textarea>` 标签来实现:
```
<textarea id="editor"></textarea>
```
然后,我们需要一些按钮来控制文本的样式,比如加粗、斜体和下划线:
```
<button onclick="document.execCommand('bold', false, '')">加粗</button>
<button onclick="document.execCommand('italic', false, '')">斜体</button>
<button onclick="document.execCommand('underline', false, '')">下划线</button>
```
最后,我们需要一些样式来美化编辑器:
```
#editor {
width: 100%;
height: 500px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
```
完整的 HTML 代码如下:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本编辑器</title>
<style>
#editor {
width: 100%;
height: 500px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<textarea id="editor"></textarea>
<br>
<button onclick="document.execCommand('bold', false, '')">加粗</button>
<button onclick="document.execCommand('italic', false, '')">斜体</button>
<button onclick="document.execCommand('underline', false, '')">下划线</button>
<script>
var editor = document.getElementById('editor');
editor.focus();
</script>
</body>
</html>
```
这个示例只是一个简单的文本编辑器,你可以根据自己的需求进行扩展和修改。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)