diff --git a/CHANGELOG.md b/CHANGELOG.md index 2aa2e0515b6ba37f002688c14c6771a0ededb692..7610dba5f3c12b886e9c6975e344b492ff9b27c0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ ## [Unreleased] +### Added + +- 新增markdown编辑器全屏逻辑 + ## [0.7.38-alpha.64] - 2025-03-06 ### Added diff --git a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss index b597f21f61f1eb88fa3a11a782eb1113ab6833b4..c4d482664c89de8cd8c1c1fc5d754575f6d423da 100644 --- a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss +++ b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss @@ -18,6 +18,15 @@ $markdown: ( .cherry{ min-height: auto; } + + .#{bem('markdown__fullscreen')} { + position: absolute; + top: 8px; + right: 12px; + z-index: 99; + font-size: getCssVar('font-size', 'regular'); + line-height: 2.8; + } } .cherry-preview--full { diff --git a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx index cc0ebb2643ffc8d1787eb90810ece0754feb36dd..e6f1ea0be72ec788829c797783042b081a6f15be 100644 --- a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx +++ b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx @@ -147,6 +147,47 @@ const IBizMarkDown: any = defineComponent({ return { [e]: src }; }; + // 创建元素 + const createElement = ( + tagName: string, + className: string = '', + ): HTMLElement => { + const element = document.createElement(tagName); + element.className = className; + return element; + }; + + // 创建 cherry-markdown 图标 + const createCherryIcon = (tagName: string): HTMLElement => { + return createElement('i', `ch-icon ch-icon-${tagName}`); + }; + + // 全屏切换事件,参考 cherry-markdown 全屏逻辑实现 + const fullscreenClassName = ns.e('fullscreen'); + const onFullscreen = () => { + if (editor.value && markDownBox.value) { + const parentElement = + editor.value.editor.options.editorDom.parentElement; + const cherryClass = parentElement.classList; + const fullscreenNode = markDownBox.value.querySelector( + `.${fullscreenClassName}`, + ); + if (!fullscreenNode) return; + while (fullscreenNode.firstChild) { + // 循环删除父元素下的第一个子元素,直到父元素下没有子元素 + fullscreenNode.removeChild(fullscreenNode.firstChild); + } + if (cherryClass.contains('fullscreen')) { + fullscreenNode.appendChild(createCherryIcon('fullscreen')); + cherryClass.remove('fullscreen'); + } else { + fullscreenNode.appendChild(createCherryIcon('minscreen')); + cherryClass.add('fullscreen'); + } + editor.value.editor.editor.refresh(); + } + }; + const editorInit = () => { if (props.disabled) { defaultModel.value = 'previewOnly'; @@ -237,6 +278,22 @@ const IBizMarkDown: any = defineComponent({ if (customTheme) { editor.value.setTheme(customTheme); } + + // 初始化全屏按钮 + const span = createElement( + 'span', + `${fullscreenClassName} cherry-toolbar-button`, + ); + span.title = '全屏'; + span.onclick = onFullscreen; + span.appendChild(createCherryIcon('fullscreen')); + // 适配按钮样式 + const parentElement = props.disabled + ? editor.value.editor.options.editorDom.parentElement + : editor.value.editor.options.editorDom.parentElement.querySelector( + '.cherry-toolbar>.toolbar-right', + ); + parentElement?.appendChild(span); }); };