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.

Sign up for GitHub

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

Jump to bottom

Not work in uniapp h5 iOS safari #4235

Open
guyskk opened this issue Jun 4, 2024 · 1 comment
Open

Not work in uniapp h5 iOS safari #4235

guyskk opened this issue Jun 4, 2024 · 1 comment

Comments

@guyskk
Copy link

guyskk commented Jun 4, 2024

I use quill 2.0.2 in uniapp, but it not work in iOS safari, it will popup the keyboard but can not input text in quill editor.

I check and find the reason is uniapp add global user-select: none; css to html and body element, it cause text editor not work in iOS safari. Workaround to the issue is add user-select: text; to .ql-editor.

.ql-container,
.ql-editor {
  user-select: text;
}

Add the css rules to quill can fix the issue.

Steps for Reproduction

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editor</title>
    <style>
        html,
        body {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
</head>

<body>
    <link href="/quill.snow.css" rel="stylesheet" />
    <div id="editor">
        <p>Hello World!</p>
        <p>Some initial <strong>bold</strong> text</p>
        <p><br /></p>
    </div>
    <script src="/quill.js"></script>
    <script>
        const quill = new Quill('#editor', {
            theme: 'snow'
        });
    </script>
</body>

</html>

Serve the index.html and quill dist files, and visit in iOS safari (My version iOS 15.4.1) .

Expected behavior:

Editor works.

Actual behavior:

Click the editor, it will popup the keyboard but can not input text in quill editor.

Platforms:

iOS 15.4.1

Version:

Quill 2.0.2
@lefex
Copy link

lefex commented Jun 7, 2024

Because quill use browser contenteditable，you must use valid css. such as user-select, position: relative will broken editor not work. You must change css.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@guyskk @lefex