bootstrap富文本编辑器
时间: 2023-09-09 09:10:31 浏览: 64
推荐使用开源的富文本编辑器Quill,它具有以下特点:
1. 轻量级,只有20KB的JS文件大小;
2. 易于集成,支持Bootstrap和jQuery等前端框架;
3. 提供丰富的API和插件,支持图片上传、表格、代码高亮等功能;
4. 支持多浏览器,包括Chrome、Firefox、IE等。
使用方法如下:
1. 在HTML文件中引入Quill的CSS和JS文件:
```html
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
```
2. 在页面中添加富文本编辑器的容器:
```html
<div id="editor"></div>
```
3. 初始化Quill编辑器:
```javascript
var quill = new Quill('#editor', {
theme: 'snow'
});
```
现在,您就可以在页面中使用Quill富文本编辑器了。例如,您可以在页面中添加一个保存按钮,以便将编辑器中的内容保存到服务器:
```javascript
var saveButton = document.querySelector('#save-button');
saveButton.addEventListener('click', function() {
var content = quill.container.firstChild.innerHTML;
// 将content发送到服务器保存
});
```