slab / quill

Quill is a modern WYSIWYG editor built for compatibility and extensibility
https://quilljs.com
BSD 3-Clause "New" or "Revised" License
43.89k stars 3.41k forks source link

Not work in uniapp h5 iOS safari #4235

Open guyskk opened 5 months ago

guyskk commented 5 months ago

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 commented 5 months ago

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.