vue-quill-editor
vue-quill-editor copied to clipboard
surmon-china
有vue3适配计划吗？
此项目可能不会再支持 Vue3 了，因为通过 发布记录 来看 Quill 官方看起来也放弃维护了（已 3 年没有发布新的正式版本），此项目可能不具备长期的生命力了，建议关注其他替代品，如 lexical。
此项目可能不会再支持 Vue3 了，因为通过 发布记录 来看 Quill 官方看起来也放弃维护了（已 3 年没有发布新的正式版本），此项目可能不具备长期的生命力了，建议关注其他替代品，如 lexical。
Quill 还在持续开发中，未来会 release 2.0 版本。
可以查看 commit 记录：https://github.com/quilljs/quill/commits/develop
以及 develop 分支的 README（Note: This branch and README covers the upcoming 2.0 release.）。
另外，npm i -S quill@dev 可以安装 Quill 2.0 开发版。
I recommend https://github.com/vueup/vue-quill/ which supports vue 3
thanks bro. 😁
推荐下支持vue3的 @vueup/vue-quill，项目上用了 还可以
如何在指定位置插入啊？大佬，像之前那样有insertText的方法。
editorOption: {
// 富文本编辑器初始化数据
modules: {
toolbar: false, // 不显示富文本编辑器的工具栏
keyboard: {
bindings: {
// This will overwrite the default binding also named 'tab'
tab: {
key: 13,
handler: () => {
// this.saveOver
this.sendMSG()
// console.log('发送信息');
}
},
custom: {
key: 13, //enter键
ctrlKey: true, //ctrl键
handler: (range, ctx) => {
// this.setEnterCtrl
console.log('ctrl+enter 触发 ')
let _quill = this.$refs.mwQuillEditor.quill
// 插入换行符
_quill.insertText(range.index, '\n')
}
}
}
},
mention: {
// 重点： 提醒功能配置项 https://gitee.com/hj2761/quill-mention/
allowedChars: /^[A-Za-z\s]*$/, // 正则匹配
mentionDenotationChars: ['@'], // 匹配符号，匹配到@符号弹出提醒框
defaultMenuOrientation: 'top',
offsetLeft: 4, // 容器位置的额外左偏移量
// isolateCharacter: true, // 是否应隔离表示字符。例如，避免在电子邮件中提及
// fixMentionsToQuill: true,
source: (searchTerm, renderList, mentionChar) => {
// 数据源（遍历成{id, value}形式）
let values
if (mentionChar === '@') {
values = this.groupList
.map((item) => ({
id: item.id,
value: item.nickname,
headImage: item.headImage
}))
.filter((e) => e.id != this.userinfo.id && e.id != 1)
}
renderList(values, searchTerm) // 渲染函数（生成提醒框）
},
renderItem: (data) => {
return `<div class="member-item"><img style='width: 30px;height: 30px;border-radius: 5px;' src=${data.headImage} class="member-avator"/> <span class="member-name">${data.value}</span></div>`
},
onSelect: (data, insertItem) => {
// 注意：选中后的回调函数
console.log('data :>> ', data)
const item = {
text: `@${data.value}`,
name: data.value,
id: data.id
}
insertItem(data) // 注意：这个函数必须加上，有这个才会在文本框显示选中的值
// this.onSelectd(item) // 返回给后端的选中提醒的人
},
onClose: () => {
console.log('222222222222222', 111111111111)
}
}
},
placeholder: '请输入...'
},
