Closed dlpuzcl closed 10 months ago
参照本地运行的 http://127.0.0.1:9000/render.html
界面,是可以点击滚动的。
我也遇到了同样的问题。 我是参照 demo 的代码,调用了一个选项参数最简单的实例。 其它功能都很正常,只有大纲点击无效。
我查看了一下源代码。
在文件 'src\ts\markdown\outlineRender.ts' 中,找到小标题元素 idElement
后,要滚动到它。
这个工作,按理说,用一行代码即可实现:
idElement.scrollIntoView()
不知为何(也许是为了兼容古老的浏览器?),源代码中的实现非常复杂。
可能就是在其中发生了错误。
相关部分如下。
if (target.classList.contains("vditor-outline__action")) {
...
} else if (target.getAttribute("data-target-id")) {
event.preventDefault();
event.stopPropagation();
const idElement = document.getElementById(target.getAttribute("data-target-id"));
if (!idElement) {
return;
}
if (vditor) {
if (vditor.options.height === "auto") {
let windowScrollY = idElement.offsetTop + vditor.element.offsetTop;
if (!vditor.options.toolbarConfig.pin) {
windowScrollY += vditor.toolbar.element.offsetHeight;
}
window.scrollTo(window.scrollX, windowScrollY);
} else {
if (vditor.element.offsetTop < window.scrollY) {
window.scrollTo(window.scrollX, vditor.element.offsetTop);
}
if (vditor.preview.element.contains(contentElement)) {
contentElement.parentElement.scrollTop = idElement.offsetTop;
} else {
contentElement.scrollTop = idElement.offsetTop;
}
}
} else {
window.scrollTo(window.scrollX, idElement.offsetTop);
}
break;
}
我打了一个外部的补丁,成功实现了预期的功能。
我采用了 vue ,在编辑器的元素上,监听事件 @pointerdown="clickEditor"
clickEditor(ev: PointerEvent) {
const el = ev.target as HTMLElement
const el_outline_item = findThisOrAncestor(el, '[data-target-id]')
// warn('el_outline_item', el_outline_item)
if (el_outline_item) {
const outline_item_target_id = el_outline_item.getAttribute('data-target-id')!
const el_target = document.getElementById(outline_item_target_id)!
el_target.scrollIntoView()
}
},
/**
* 从`el`开始向上(祖先元素)遍历,返回匹配`selector`的第一个元素
*/
export function findThisOrAncestor(el: HTMLElement | null, selector: string) {
while (el) {
if (el.matches(selector)) {
return el
}
else {
el = el.parentElement
}
}
return null
}
编辑模式
wysiwyg
所见即所得模式描述问题
参考了render.js 里的代码 在vue3中 使用下面代码正常渲染成功。大纲也显示正确,但是始终点击大纲没反应,求助大佬看看, render的demo点击是好用的
渲染图片
截屏或录像
版本信息
其他信息