Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

有vue3适配计划吗? #436

Open
mingtianyihou33 opened this issue Dec 15, 2020 · 13 comments
Open

有vue3适配计划吗? #436

mingtianyihou33 opened this issue Dec 15, 2020 · 13 comments

Comments

@mingtianyihou33
Copy link

No description provided.

@zjsxfly
Copy link

zjsxfly commented Jan 3, 2021

同问,出现Cannot read property '_c' of undefined的错误

@KFCVme50-CrazyThursday
Copy link

2021年了。同问

@weishengmin
Copy link

2022年了。同问

@zeroven0205
Copy link

同问,2022年4月中旬了!

@muyur
Copy link

muyur commented May 4, 2022

同问,2022年5月份了

@surmon-china
Copy link
Owner

此项目可能不会再支持 Vue3 了,因为通过 发布记录 来看 Quill 官方看起来也放弃维护了(已 3 年没有发布新的正式版本),此项目可能不具备长期的生命力了,建议关注其他替代品,如 lexical

@surmon-china surmon-china pinned this issue May 4, 2022
@mrtoorich
Copy link

mrtoorich commented Jun 20, 2022

此项目可能不会再支持 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 开发版。

@lk101
Copy link

lk101 commented Jan 25, 2023

根据readme中的描述,很显然,这个项目已经放弃维护了,而且作者建议改用tiptap,我打算去学习一下

@Tofandel
Copy link

I recommend https://github.com/vueup/vue-quill/ which supports vue 3

@Dreamsky1
Copy link

推荐下支持vue3的 @vueup/vue-quill,项目上用了 还可以

@LouisLiu00
Copy link

2023年5月了。同问

@weiqiangChow
Copy link

I recommend https://github.com/vueup/vue-quill/ which supports vue 3

thanks bro. 😁

@11003
Copy link

11003 commented Aug 21, 2023

推荐下支持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: '请输入...'
            },

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

15 participants