QuillJS：点击工具栏时光标跳到顶部

Question

我一直在我的 svelte 项目中实现 Quill。但是，当我按下工具栏上的按钮时，它会将光标放置在编辑器的开头，从而使其无法编辑编辑器中间某处的文本。例如，参见 gif：

我尝试通过添加以下内容来阻止该事件：

quill.getModule("toolbar").container.addEventListener("mousedown", (e) => {
        e.preventDefault();
        e.stopPropagation()
    });

或者尝试通过选择更改来确定会发生什么：

quill.on("selection-change", function (range, oldrange, source) {
        var range = quill.getSelection();
        if (range) {
            if (range.length == 0) {
                console.log("old range:" + oldrange)
                console.log('User cursor is at index', range.index);
            } else {
                var text = quill.getText(range.index, range.length);
                console.log('User has highlighted: ', text);
            }      
        } else {
            console.log('User cursor is not in editor');
        }
    });

我注意到上面代码中oldrange返回null，当我点击工具栏上的某个东西时，它似乎忘记了光标之前放在哪里？此外，即使我单击了应保持蓝色的粗体按钮，我在工具栏上按下的按钮也会再次变黑。

套筒配置：

let container = editorPlaceholder;
    quill = new Quill(container, {
        modules: {
            toolbar: [
                [{ header: [1, 2, 3, false] }],
                ["bold", "italic", "underline", "strike"],
                ["link", "code-block"],
            ],
        },
        theme: "snow", 
        scrollingContainer: "html",
        
    });

editorplaceholder 绑定到 DOM 中的 div。这发生在 Quill 初始化的 onMount() 之前。

鹅毛笔版本：1.3.6

Answer 1

editorPlaceholder

在哪里定义的？ 为什么不将

editorPlaceholder

传递给 Quill 的构造函数？

这个最小的例子效果很好：

• 鹅毛笔：“1.3.7”
• 纤细：“4.0.5”

<script>
  import { onMount } from "svelte";

  let editor;

  onMount(async () => {
    const { default: Quill } = await import("quill");

    new Quill(editor, {
      modules: {
        toolbar: [
          [{ header: [1, 2, 3, false] }],
          ["bold", "italic", "underline", "strike"],
          ["link", "code-block"],
        ],
      },
      theme: "snow",
    });
  });
</script>

<main>
  <div bind:this={editor} />
</main>

<style>
  @import "quill/dist/quill.snow.css";
</style>