github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-12 03:01:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat：适配移动端也可以编辑文件（.md ，.text）

Browse Source
This commit is contained in:
weifashi 2023-09-07 15:22:35 +08:00
parent c35a177ac1
commit 984c68dc09
8 changed files with 116 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
resources/assets/js/components/MDEditor/assets/css/index.less
View File

@ -366,14 +366,14 @@
.codemirror {
flex: 1;
width: 0;
width: auto;
height: 100%;
overflow: auto;
}
.markdown-preview {
flex: 1;
width: 0;
width: auto;
height: 100%;
}
}
@ -1035,3 +1035,14 @@ ul.shift {
opacity: 1;
}
}
@media (max-width: 920px) {
.markdown {
.markdown-content {
flex-direction: column;
}
.toc-anchor,.icon-svg{
display: none !important;
}
}
}

4
resources/assets/js/components/MDEditor/components/pro/index.vue
View File

@ -118,11 +118,11 @@
<li v-if="tools.save" :name="$L('保存')" @click="handleSave">
<span class="iconfont icon-save"></span>
</li>
<li :name="$L(scrolling ? '同步滚动:开' : '同步滚动:关')">
<li v-if="tools.scrolling" :name="$L(scrolling ? '同步滚动:开' : '同步滚动:关')">
<span @click="scrolling = !scrolling" v-show="scrolling" class="iconfont icon-on"></span>
<span @click="scrolling = !scrolling" v-show="!scrolling" class="iconfont icon-off"></span>
</li>
<li :name="$L('html转markdown')" @click="onCustom('html2md')">
<li v-if="tools.html_to_markdown" :name="$L('html转markdown')" @click="onCustom('html2md')">
<span style="width:auto;font-size:14px;padding:0 6px">HTML2MD</span>
</li>
<li class="right">

4
resources/assets/js/components/MDEditor/config/tools.js vendored
View File

@ -32,5 +32,7 @@ export default {
exportmd: true,
importmd: true,
save: false,
clear: false
clear: false,
scrolling: true,
html_to_markdown: true,
}

3
resources/assets/js/components/MDEditor/index.vue
View File

@ -96,7 +96,6 @@
<script>
import MarkdownPro from './pro';
import ImgUpload from "../ImgUpload";
import {mapState} from "vuex";
export default {
name: 'MDEditor',
@ -140,6 +139,8 @@
importmd: false,
save: false,
clear: false,
scrolling: true,
html_to_markdown: true,
custom_image: true,
custom_uploadImage: true,

98
resources/assets/js/pages/manage/components/FileContent.vue
View File

@ -33,7 +33,7 @@
<li v-if="editUser.length > 10" class="more" :title="editUser.length">{{editUser.length > 999 ? '...' : editUser.length}}</li>
</ul>
</div>
<div v-if="file.type=='document' && contentDetail" class="header-hint">
<div v-if="file.type=='document' && contentDetail && !windowPortrait" class="header-hint">
<ButtonGroup size="small" shape="circle">
<Button :type="`${contentDetail.type=='md'?'primary':'default'}`" @click="setTextType('md')">{{$L('MD编辑器')}}</Button>
<Button :type="`${contentDetail.type!='md'?'primary':'default'}`" @click="setTextType('text')">{{$L('文本编辑器')}}</Button>
@ -67,14 +67,22 @@
</ETooltip>
</EPopover>
</div>
<Button :disabled="equalContent" :loading="loadSave > 0" class="header-button" size="small" type="primary" @click="handleClick('save')">{{$L('保存')}}</Button>
<template v-if="windowPortrait && file.type=='document'">
<Button v-if="!edit" class="header-button" size="small" type="primary" @click="edit=true">{{$L('编辑')}}</Button>
<Button v-else-if="edit && equalContent" class="header-button" size="small" @click="edit=false">{{$L('取消')}}</Button>
<Button v-else :disabled="equalContent" :loading="loadSave > 0" class="header-button" size="small" type="primary" @click="handleClick('save')">{{$L('保存')}}</Button>
</template>
<Button v-else :disabled="equalContent" :loading="loadSave > 0" class="header-button" size="small" type="primary" @click="handleClick('save')">{{$L('保存')}}</Button>
</template>
</div>
<div class="content-body">
<div v-if="historyShow" class="content-mask"></div>
<template v-if="file.type=='document'">
<MDEditor v-if="contentDetail.type=='md'" v-model="contentDetail.content" height="100%"/>
<TEditor v-else v-model="contentDetail.content" height="100%" @editorSave="handleClick('saveBefore')"/>
<template v-if="contentDetail.type=='md'">
<MDEditor v-if="edit" v-model="contentDetail.content" height="100%" :toolbars="toolbars"/>
<MDPreview v-else :initialValue="contentDetail.content"/>
</template>
<TEditor v-else :readOnly="!edit" v-model="contentDetail.content" height="100%" @editorSave="handleClick('saveBefore')"/>
</template>
<Drawio v-else-if="file.type=='drawio'" ref="myFlow" v-model="contentDetail" :title="file.name" @saveData="handleClick('saveBefore')"/>
<Minder v-else-if="file.type=='mind'" ref="myMind" v-model="contentDetail" @saveData="handleClick('saveBefore')"/>
@ -122,6 +130,7 @@ import FileHistory from "./FileHistory";
import IFrame from "./IFrame";
const MDEditor = () => import('../../../components/MDEditor/index');
const MDPreview = () => import('../../../components/MDEditor/preview');
const TEditor = () => import('../../../components/TEditor');
const AceEditor = () => import('../../../components/AceEditor');
const OnlyOffice = () => import('../../../components/OnlyOffice');
@ -130,7 +139,7 @@ const Minder = () => import('../../../components/Minder');
export default {
name: "FileContent",
components: {IFrame, FileHistory, AceEditor, TEditor, MDEditor, OnlyOffice, Drawio, Minder},
components: {IFrame, FileHistory, AceEditor, TEditor, MDEditor, OnlyOffice, Drawio, Minder, MDPreview},
props: {
value: {
type: Boolean,
@ -167,10 +176,13 @@ export default {
historyShow: false,
officeReady: false,
edit: false,
}
},
mounted() {
this.edit = !this.windowPortrait
document.addEventListener('keydown', this.keySave)
window.addEventListener('message', this.handleOfficeMessage)
//
@ -287,6 +299,81 @@ export default {
}
return '';
},
toolbars() {
return this.windowPortrait ? {
strong: true,
italic: true,
overline: true,
h1: true,
h2: true,
h3: true,
h4: false,
h5: false,
h6: false,
hr: true,
quote: false,
ul: true,
ol: true,
code: true,
link: true,
image: false,
uploadImage: false,
table: true,
checked: false,
notChecked: false,
split: true,
preview: false,
fullscreen: false,
theme: false,
exportmd: false,
importmd: false,
save: false,
clear: false,
scrolling: false,
html_to_markdown: false,
custom_image: false,
custom_uploadImage: false,
custom_uploadFile: false,
custom_fullscreen: false,
} : {
strong: true,
italic: true,
overline: true,
h1: true,
h2: true,
h3: true,
h4: false,
h5: false,
h6: false,
hr: true,
quote: true,
ul: true,
ol: true,
code: true,
link: true,
image: false,
uploadImage: false,
table: true,
checked: true,
notChecked: true,
split: true,
preview: true,
fullscreen: false,
theme: false,
exportmd: false,
importmd: false,
save: false,
clear: false,
scrolling: true,
html_to_markdown: true,
custom_image: true,
custom_uploadImage: true,
custom_uploadFile: true,
custom_fullscreen: true,
}
}
},
methods: {
@ -405,6 +492,7 @@ export default {
newData.ext = this.fileExt;
this.fileExt = null;
}
this.edit = this.windowPortrait ? false : true;
this.$store.dispatch("saveFile", newData);
}).catch(({msg}) => {
$A.modalError(msg);

2
resources/assets/js/pages/manage/components/FileHistory.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="file-history">
<Table
:width="480"
:width="(windowWidth - 40) > 480 ? 480 : (windowWidth - 40)"
:max-height="windowHeight - 180"
:columns="columns"
:data="list"

2
resources/assets/js/pages/manage/file.vue
View File

@ -810,7 +810,7 @@ export default {
},
isPreview() {
return this.windowPortrait || this.fileInfo.permission === 0
return (this.windowPortrait && this.fileInfo.type!='document') || this.fileInfo.permission === 0
},
isParentShare() {

2
resources/assets/sass/pages/components/file-content.scss vendored
View File

@ -319,7 +319,7 @@
overflow: auto;
.edit-header,
.content-body {
min-width: 720px;
min-width: 375px;
overflow-x: auto;
.teditor-loadedstyle {
.tox-menubar,