amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2025-01-23 04:14:42 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge 67ef9dc21c into 03b0e73acb

Browse Source
This commit is contained in:
YangFong 2024-12-24 09:17:34 +08:00 committed by GitHub
commit f27549acac
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/CodemirrorEditor.vue
View File

@ -170,12 +170,15 @@ watch(isDark, () => {
toRaw(editor.value)?.setOption?.(`theme`, theme) toRaw(editor.value)?.setOption?.(`theme`, theme)
}) })
const charCount = ref(0)
// 初始化编辑器 // 初始化编辑器
function initEditor() { function initEditor() {
const editorDom = document.querySelector<HTMLTextAreaElement>(`#editor`)! const editorDom = document.querySelector<HTMLTextAreaElement>(`#editor`)!
if (!editorDom.value) { if (!editorDom.value) {
editorDom.value = store.posts[store.currentPostIndex].content editorDom.value = store.posts[store.currentPostIndex].content
charCount.value = store.posts[store.currentPostIndex].content.replace(/\s/g, ``).length
} }
editor.value = CodeMirror.fromTextArea(editorDom, { editor.value = CodeMirror.fromTextArea(editorDom, {
mode: `text/x-markdown`, mode: `text/x-markdown`,
@ -222,7 +225,9 @@ function initEditor() {
clearTimeout(changeTimer.value) clearTimeout(changeTimer.value)
changeTimer.value = setTimeout(() => { changeTimer.value = setTimeout(() => {
onEditorRefresh() onEditorRefresh()
store.posts[store.currentPostIndex].content = e.getValue() const value = e.getValue()
store.posts[store.currentPostIndex].content = value
charCount.value = value.replace(/\s/g, ``).length
}, 300) }, 300)
}) })
@ -414,23 +419,28 @@ onMounted(() => {
</ContextMenuContent> </ContextMenuContent>
</ContextMenu> </ContextMenu>
</div> </div>
<div <div class="relative flex-1">
id="preview" <div
ref="preview" id="preview"
:span="isShowCssEditor ? 8 : 12" ref="preview"
class="preview-wrapper flex-1 p-5" :span="isShowCssEditor ? 8 : 12"
> class="preview-wrapper flex-1 p-5"
<div id="output-wrapper" :class="{ output_night: !backLight }"> >
<div class="preview border shadow-xl"> <div id="output-wrapper" :class="{ output_night: !backLight }">
<section id="output" v-html="output" /> <div class="preview border shadow-xl">
<div v-if="isCoping" class="loading-mask"> <section id="output" v-html="output" />
<div class="loading-mask-box"> <div v-if="isCoping" class="loading-mask">
<div class="loading__img" /> <div class="loading-mask-box">
<span>正在生成</span> <div class="loading__img" />
<span>正在生成</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="bg-muted absolute bottom-0 left-0 p-2 text-xs shadow">
{{ charCount }} 个字符
</div>
</div> </div>
<CssEditor class="flex-1" /> <CssEditor class="flex-1" />
</div> </div>