我一直在我的 svelte 项目中实现 Quill。但是,当我按下工具栏上的按钮时,它会将光标放置在编辑器的开头,从而使其无法编辑编辑器中间某处的文本。例如,参见 gif:光标移至开始 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
editorPlaceholder
在哪里定义的?
为什么不将 editorPlaceholder
传递给 Quill 的构造函数?
这个最小的例子效果很好:
<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>
你解决了吗?我在应用react-quill时遇到同样的问题, 单击工具栏时光标跳到顶部