问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
可可西里
    2614
    新手上路，请多包涵

    `<!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，粘贴第二次的时候会跳到顶部，有什么好的解决办法吗？

    quill
    阅读 11k
    8 个回答
    得票最新
    头像
    海天酱油
      1
      新手上路，请多包涵

      我也想知道怎么弄

      头像
      Riki一二三
        6.1k1116

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

        头像
        张艺侬
          30417

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

          头像
          登神长阶
            2
            新手上路，请多包涵

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

             .ql-clipboard {
    position: fixed;
    display: none;
    left: 50%;
    top: 50%;
  }
            头像
            陈欢喜
              9822449

              你好， 这个问题你有解决吗？
              我测试使用

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

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

              头像
              元2014
                23
                新手上路，请多包涵

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

                    "paste",
    粘贴事件后，setTimeout 0 ，读取之前存储的滚动条位置，再给设置滚动条位置到粘贴之前的位置
    $(window).scrollTop(localStorage.getItem(quillLskScrollTop) || 0);
    勉强可以接受
                头像
                K007
                  2
                  新手上路，请多包涵
                  onEditorChange(e) {
      console.log(e.text)
      if (e.text) {
                          this.$refs.myLQuillEditor.quill.setSelection(e.text.length,e.text.length);
      }
}

                  粘贴后焦点聚焦之末尾

                  头像
                  old_bin
                    1763614

                    我也遇到同样的问题，但在 https://stackoverflow.com/questions/44445177/quilljs-jumps-to-top 这里找到解决办法：

                    var quill = new Quill('#editor', {
  modules: { toolbar: toolbarOptions },
    theme: 'snow',
    scrollingContainer: '.container'
});

                    然后看了一下官方文档里 scrollingContainer 这块，问题是出在我把 ql-editor 设置为高度自适应，然后滚动条加在了 .container 上，然后在配置里更新一下滚动容器为 .container 就解决了问题。
                    这个不仅解决了粘贴图片的问题，在.ql-toolbar 菜单里所有有下拉操作的动作产生的同样的问题（比如设置字体大小、背景颜色、链接更改等）也都解决了。

                    image.png

                    撰写回答
                    你尚未登录，登录后可以
                    • 和开发者交流问题的细节
                    • 关注并接收问题和回答的更新提醒
                    • 参与内容的编辑和改进，让解决方法与时俱进
                    推荐问题