quill 富文本编辑器 @提及

使用插件quill-mention，实现在quill 富文本编辑器使用@或#提及用户。

1. 安装

npm install quill-mention --save

2. 官方给的示例quill-mention

import "quill-mention";const atValues = [{ id: 1, value: "Fredrik Sundqvist" },{ id: 2, value: "Patrik Sjölin" }
];
const hashValues = [{ id: 3, value: "Fredrik Sundqvist 2" },{ id: 4, value: "Patrik Sjölin 2" }
];
const quill = new Quill("#editor", {modules: {mention: {allowedChars: /^[A-Za-z0-9_]*$/,mentionDenotationChars: ["@", "#"],source: function(searchTerm, renderList, mentionChar) {let values;if (mentionChar === "@") {values = atValues;} else {values = hashValues;}if (searchTerm.length === 0) {renderList(values, searchTerm);} else {const matches = [];for (let i = 0; i < values.length; i++)if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase()))matches.push(values[i]);renderList(matches, searchTerm);}}}}
});

3. 在vue2中使用的示例，已省去无关代码。(示例来自自行封装的Quill.vue通用组件)

<template><quill-editor>...</quill-editor>
</template><script>
import { quillEditor, Quill } from 'vue-quill-editor'
import "quill-mention"// 工具栏配置
const toolbarOptions = [...];export default {name: 'Quill',components: { quillEditor },props: {// 提及的用户数据atValues: {typ: Object,default: ()=>[]},hashValues: {typ: Object,default: ()=>[]}},data() {return {editorOption: {modules: {mention: {allowedChars: /^[a-zA-Z0-9_]*$/,mentionDenotationChars: ["@", "#"],source: (searchTerm, renderList, mentionChar) => {let valuesif (mentionChar === "@") {values = this.atValues} else {values = this.hashValues}if (searchTerm.length === 0) {renderList(values, searchTerm);} else {const matches = []for (let i = 0; i < values.length; i++)if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase()))matches.push(values[i])renderList(matches, searchTerm)}},// 选中后触发onSelect: (item, insertItem) => {this.$emit('atUser', item.id)insertItem(item)}}}}}}}
</script><style lang="less" scoped></style>

4. 无论哪个示例，记得引入css样式。在源码的 dist/quill.mention.css

.ql-mention-list-container {width: 270px;border: 1px solid #f0f0f0;border-radius: 4px;background-color: #ffffff;box-shadow: 0 2px 12px 0 rgba(30, 30, 30, 0.08);z-index: 9001;overflow: auto;
}.ql-mention-loading {line-height: 44px;padding: 0 20px;vertical-align: middle;font-size: 16px;
}.ql-mention-list {list-style: none;margin: 0;padding: 0;overflow: hidden;
}.ql-mention-list-item {cursor: pointer;line-height: 44px;font-size: 16px;padding: 0 20px;vertical-align: middle;
}.ql-mention-list-item.disabled {cursor: auto;
}.ql-mention-list-item.selected {background-color: #d3e1eb;text-decoration: none;
}.mention {height: 24px;width: 65px;border-radius: 6px;background-color: #d3e1eb;padding: 3px 0;margin-right: 2px;user-select: all;
}.mention > span {margin: 0 3px;
}

5. 效果