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 属性设置为＆＃39; body＆＃39; < / em>在配置Quill对象时。

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

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

发生这种情况的原因有两行：

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

QuillJs - 跳到顶部

3 个答案: