quill-editor添加链接功能
时间: 2023-07-04 12:04:46 浏览: 305
要在 Quill 编辑器中添加链接功能,你需要使用 Quill 的 Link 模块。下面是一个基本的实现方法:
1. 在 Quill 的选项中引入 Link 模块。
```javascript
import Quill from 'quill';
import { Link } from 'quill/modules/link';
Quill.register(Link);
```
2. 在 Quill 的选项中设置 Link 模块的配置。
```javascript
const quillOptions = {
modules: {
toolbar: [
// 其他工具栏按钮...
{
// 添加链接按钮
handler: () => {
const range = this.quill.getSelection();
const url = prompt('请输入链接 URL');
if (url) {
this.quill.format('link', url, range.index, range.length);
}
},
icon: '<i class="fas fa-link"></i>',
},
],
// 其他模块配置...
link: {
target: '_blank',
},
},
};
```
3. 在 Quill 的 HTML 中添加一个容器元素。
```html
<div id="editor"></div>
```
4. 在 JavaScript 中初始化 Quill 编辑器,并将其附加到容器元素上。
```javascript
const editor = new Quill('#editor', quillOptions);
```
现在,当用户点击工具栏中的“添加链接”按钮时,将弹出一个提示框要求输入 URL。如果用户输入 URL 并单击“确定”,则 Quill 将在当前光标位置添加一个链接。要修改链接的目标,请在 Quill 的选项中设置 Link 模块的配置。
希望这可以帮助你添加链接功能到 Quill 编辑器中。