如何初始化<quill-editor />中的内容
时间: 2024-10-24 18:10:15 浏览: 8
Vue项目中quill-editor带样式编辑器的使用方法
Quill Editor是一个富文本编辑器,通常用于JavaScript应用中提供用户友好的文本输入体验。如果你想在初始化`<quill-editor>`时预加载内容,可以按照以下步骤操作:
1. 引入Quill库:首先确保已经引入了Quill编辑器的库,你可以从其官方网站获取最新的版本。
```html
<script src="path/to/quill.js"></script>
<link rel="stylesheet" href="path/to/quill.snow.css">
```
2. 定义编辑器并设置内容:在JavaScript中创建一个Quill实例,并指定初始内容。你可以通过`.setHTML()`方法设置HTML格式的内容,或者`.insertText()`方法插入纯文本。
```javascript
import Quill from 'quill';
const quillEditor = new Quill('#editor', {
modules: {
// 如果需要启用其他模块,如公式、图片等
toolbar: [...],
},
theme: 'snow', // 可选主题,如'snow' 或 'bubble'
});
// 初始化内容
let initialContent = '<h1>这是标题</h1><p>这是段落内容。</p>';
quillEditor.setHTML(initialContent);
```
3. (可选)监听内容改变:如果你希望跟踪或处理用户对内容的修改,可以在`ready`事件回调里添加相应功能。
```javascript
quillEditor.on('ready', () => {
console.log('编辑器已准备就绪,初始内容为:', quillEditor.getContents());
});
```
阅读全文