QuillJs - 跳到顶部答案

【问题标题】：QuillJs - jumps to topQuillJs - 跳到顶部
【发布时间】：2017-06-08 20:41:16
【问题描述】：

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

QuillJs 版本：1.2.6 浏览器：Chrome 58.0.3029.110 操作系统：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'
});

或者，也许您可以为网站推荐一个更好的简单且免费的 html 编辑器？我不喜欢 CKE 或 Tinymce。

【问题讨论】：

您添加了自定义 CSS 吗？如果是这样你可能需要设置滚动容器配置quilljs.com/docs/configuration/#scrollingcontainer
是的，有自定义 css。但我不知道如何正确设置 scrollingContainer 配置。 quilljs网站上只提到过，没有详细说明。
我明白了。如果希望编辑器通过网页主滚动条滚动和维护，则需要在配置 Quill 对象时将 scrollingContainer 属性设置为 'body'。
scrollingContainer 用于指定哪个元素有滚动条。在你的情况下，它听起来像身体，但对于其他人来说，它可能是其他一些元素。一些网站通常有一个滚动的#sidebar #header 和#main 容器，在这种情况下，您希望#main 容器作为滚动容器。同样，它是具有滚动条的任何元素。
感谢您的帮助，@jhchen

标签： javascript rich-text-editor quill

【解决方案1】：

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

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

以下内容为我解决了这个问题。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

请注意，如果您使用类名或 id 作为滚动容器，则它必须是选择器。即：“.container-name”或“#container-name”
请注意，scrollingContainer 应该没有任何“height:” CSS 配置，因为我有“html {heigth: 100% }”将不起作用。
scrollingContainer: 'html' 是我唯一的解决方案。
@DarkScrolls，这对我也有用，谢谢！您可能应该将其添加为答案

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

这是因为这两行：

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

和

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

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

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

如果你不确定它是什么，你可以使用这个 sn-p 找到它：

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);

【讨论】：