From c39640abd09e629e2e7d3774236939af1fec9774 Mon Sep 17 00:00:00 2001 From: xiaozzzi <42293085+xiaozzzi@users.noreply.github.com> Date: Fri, 19 Jan 2024 04:05:28 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=90=8C=E6=AD=A5=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E5=BC=80=E5=85=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../article/scripts/editor-preview-scroll.ts | 47 +++++++++++++++++-- 1 file changed, 44 insertions(+), 3 deletions(-) diff --git a/blossom-editor/src/renderer/src/views/article/scripts/editor-preview-scroll.ts b/blossom-editor/src/renderer/src/views/article/scripts/editor-preview-scroll.ts index 645bde2..a8cd9c4 100644 --- a/blossom-editor/src/renderer/src/views/article/scripts/editor-preview-scroll.ts +++ b/blossom-editor/src/renderer/src/views/article/scripts/editor-preview-scroll.ts @@ -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 对象, 是一个从 标签开始的 dom 对象 const invisibleDomAll = new DOMParser().parseFromString(invisibleHtml, 'text/html') - + // body 下的内容才是由 markdown 转换而来的, 不可见内容转换的 dom 集合 const editorDoms = invisibleDomAll.body.querySelectorAll(matchHtmlTags) // 预览页面的 dom 集合