-
-
Notifications
You must be signed in to change notification settings - Fork 867
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在渲染时,大纲点击不跳转 #1516
Comments
参照本地运行的 |
我也遇到了同样的问题。 |
我查看了一下源代码。 在文件 'src\ts\markdown\outlineRender.ts' 中,找到小标题元素 这个工作,按理说,用一行代码即可实现: 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 ,在编辑器的元素上,监听事件 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
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
编辑模式
wysiwyg
所见即所得模式描述问题
参考了render.js 里的代码
在vue3中 使用下面代码正常渲染成功。大纲也显示正确,但是始终点击大纲没反应,求助大佬看看, render的demo点击是好用的
渲染图片
截屏或录像
版本信息
其他信息
The text was updated successfully, but these errors were encountered: