QuillJs - 跳到顶部

Question

我在我的网站上使用 QuillJs 作为文本编辑器。在较长的 post 中，当粘贴文本或更改标题类型或对齐方式或颜色或插入 link 或视频时，屏幕视图会跳转到顶部。找不到原因。

QuillJs版本：1.2.6 浏览器：Chrome 58.0.3029.110 OS: Windows 10

初始化：

var toolbarOptions = [
    [{ 'header': [1, 2, 3, 4, 5, 6, false] },
       'bold', 'italic', 'underline', 'strike', { 'align': [] },
        { 'list': 'ordered' }, { 'list': 'bullet' },
        { 'color': [] }, { 'background': [] }], 

        ['image', 'blockquote', 'code-block', 'link', 'video'],

        ['clean']                                           
    ];
var quill = new Quill('#editor', {
    modules: {
      toolbar: toolbarOptions
    },
    theme: 'snow'
});

Answer 1

如果您希望编辑器由网页的主滚动条滚动和维护，您需要将 scrollingContainer 属性设置为 'body' 在配置 Quill 对象期间。

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

Answer 2

从 quill 工具栏中单击任何选项时会发生这种情况。我有类似的问题，我使用的是 react-quill 0.4.1。

尝试使用 quill 工具栏上的 event.preventDefault 和 event.stopPropagation 来解决这个问题。

以下解决了我的问题。

componentDidMount()
{
$('.quill-toolbar').on("mousedown", function(event){
            event.preventDefault();
            event.stopPropagation();
        });
}

Answer 3

这是因为这两行：

https://github.com/quilljs/quill/blob/5715499c57091db262c176985f6c5370d73db5dd/modules/toolbar.js#L86

和

https://github.com/quilljs/quill/blob/5b28603337f3a7a2b651f94cffc9754b61eaeec7/core/quill.js#L171

this.scrollingContainer => 可能不是真正的滚动元素。

解决方法可能是直接分配最近的滚动元素。

如果您不确定它是什么，可以使用此代码段找到它：

const regex = /(scroll)/;

const style = (node, prop) => window.getComputedStyle(node, null).getPropertyValue(prop);
const scroll = (node) => regex.test( style(node, "overflow") + style(node, "overflow-y") + style(node, "overflow-x"));
export const scrollparent = (node) => {
  return !node || node===document.body ? document.body : scroll(node) ? node : scrollparent(node.parentNode);
};

   editor.scrollingContainer = scrollparent(editor.container);

Answer 4

将 scrollingContainer 设置为 html 是唯一对我有用的解决方案：

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

QuillJs - 跳到顶部

QuillJs - jumps to top

javascript

rich-text-editor

quill