html页面加入富文本框的完整示例
时间: 2023-08-11 14:12:28 浏览: 48
以下是一个简单的 HTML 页面,其中包含一个富文本编辑器。这里使用的是开源编辑器 Quill。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>富文本编辑器示例</title>
<!-- 引入 Quill 的 CSS 文件 -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body>
<!-- 创建一个 div 元素作为编辑器容器 -->
<div id="editor"></div>
<!-- 引入 Quill 的 JS 文件 -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- 初始化编辑器 -->
<script>
var editor = new Quill('#editor', {
theme: 'snow'
});
</script>
</body>
</html>
```
在以上代码中,我们首先引入了 Quill 的 CSS 文件。然后在 body 标签内创建了一个 div 元素作为编辑器容器,并给它一个唯一的 ID(这里取名为 "editor")。接着我们再引入 Quill 的 JS 文件,并在页面底部初始化了编辑器。
在初始化编辑器时,我们传入了一个配置对象,其中 theme 属性指定了编辑器的主题(这里使用了 "snow" 主题)。其他的配置项可以参考 Quill 的官方文档。
需要注意的是,Quill 是一个基于 JavaScript 的富文本编辑器,如果需要在后端保存编辑器内容,需要将编辑器内容转换为纯文本或 HTML 格式,具体方法可以参考 Quill 的官方文档。