zero/blossom
1
0
Fork 0
mirror of https://github.com/blossom-editor/blossom synced 2024-11-17 14:39:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 同步滚动开关

Browse Source
This commit is contained in:
xiaozzzi 2024-01-19 04:05:28 +08:00
parent 2c39c67ae9
commit c39640abd0
1 changed files with 44 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
blossom-editor/src/renderer/src/views/article/scripts/editor-preview-scroll.ts
View File

@ -27,6 +27,10 @@ export class EPScroll {
* 保存编辑器滚动条的最后位置
*/
private _scrollTop: number = 0
/**
* 是否启用同步刷新
*/
private _open: boolean = true
constructor(editor: HTMLElement, previre: HTMLElement, cmw: CmWrapper | undefined) {
this._editor = editor
@ -35,26 +39,63 @@ export class EPScroll {
this._scrollTop = 0
}
/**
* 返回滚动条位置
*/
public get scrollTop() {
return this._scrollTop
}
/**
* 重置滚动条
*/
public scrollTopReset() {
this._scrollTop = 0
this._editor.scrollTo({ top: 0 })
this.toTop()
}
/**
* 滚动到最近一次
*/
public scrollTopLast() {
this._editor.scrollTo({ top: this._scrollTop })
}
public sycnScroll(_event: Event | string, _source?: string, _lineno?: number, _colno?: number, _error?: Error): any {
/**
* 编辑器滚动条置顶
*/
public toTop() {
this._editor.scrollTo({ top: 0 })
}
/**
* 编辑器滚动条置底
*/
public toBottom() {
this._editor.scrollTo({ top: 999999999 })
}
/**
* 切换同步滚动开启/关闭
* @returns 是否同步滚动
*/
public open(): boolean {
this._open = !this._open
return this._open
}
public sycnScroll(_event: Event | string, _source?: string, _lineno?: number, _colno?: number, _error?: Error): void {
if (this._editor == undefined) {
return
}
// console.log(this._editor?.scrollHeight, this._editor?.clientHeight, this._editor?.scrollTop)
this._scrollTop = this._editor.scrollTop
// 如果不开启同步滚动, 则返回
if (!this._open) {
return
}
// 如果在头部附近
if (this._editor.scrollTop < 5) {
this._preview.scrollTo({ top: 0 })
@ -84,7 +125,7 @@ export class EPScroll {
// 将不可见的的 html 转换为 dom 对象, 是一个从 <html> 标签开始的 dom 对象
const invisibleDomAll = new DOMParser().parseFromString(invisibleHtml, 'text/html')
// body 下的内容才是由 markdown 转换而来的, 不可见内容转换的 dom 集合
const editorDoms = invisibleDomAll.body.querySelectorAll(matchHtmlTags)
// 预览页面的 dom 集合