quill 富文本编辑器 当粘贴的时候会滚动到顶部,怎么解决?

发布于 2022-09-11 23:40:21 字数 1046 浏览 18 评论 0

`<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>quill</title>
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

</head>

<body>

<!-- Create the editor container -->
<div id="editor">
    <p>Hello World!</p>
    <p>Some initial <strong>bold</strong> text</p>
    <p><br></p>
</div>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
    var quill = new Quill('#editor', {
        theme: 'snow'
    });
</script>

</body>

</html>`

以上是demo,粘贴第二次的时候会跳到顶部,有什么好的解决办法吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

初雪 2022-09-18 23:40:21

我也想知道怎么弄

旧夏天 2022-09-18 23:40:21

焦点丢失导致的 粘贴完以后将焦点设置到最后 具体事件忘了看看文档找找看看

巾帼英雄 2022-09-18 23:40:21

昨天搞了小半天,今天早上来到解了,给编辑器设置一个max-height:600px;样式即可,具体高度自己定,完美解决

遇到 2022-09-18 23:40:21

将下面代码复制到你用的Quill的页面

 .ql-clipboard {
    position: fixed;
    display: none;
    left: 50%;
    top: 50%;
  }
时常饿 2022-09-18 23:40:21

你好, 这个问题你有解决吗?
我测试使用

.ql-clipboard {
    position: fixed;
    display: none;
    left: 50%;
    top: 50%;
  }

光标会自动移到复制文本最前,这样不友好。请问还有其他办法吗

下雨或天晴 2022-09-18 23:40:21

我这边目前处理办法是在"selection-change"事件中把$(window).scrollTop()存储到localStorage,然后再.quill.root.addEventListener(

    "paste",
    粘贴事件后,setTimeout 0 ,读取之前存储的滚动条位置,再给设置滚动条位置到粘贴之前的位置
    $(window).scrollTop(localStorage.getItem(quillLskScrollTop) || 0);
    勉强可以接受
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文