QuillJs - 跳到顶部

Question

我在我的网站上使用 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。

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

如果您希望编辑器由网页的主滚动条滚动和维​​护，则需要在 Quill 对象的配置过程中将scrollingContainer属性设置为“body” 。

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