mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 11:19:56 +00:00
feat:适配移动端也可以编辑文件(.md ,.text)
This commit is contained in:
parent
c35a177ac1
commit
984c68dc09
@ -366,14 +366,14 @@
|
|||||||
|
|
||||||
.codemirror {
|
.codemirror {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 0;
|
width: auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-preview {
|
.markdown-preview {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 0;
|
width: auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1035,3 +1035,14 @@ ul.shift {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 920px) {
|
||||||
|
.markdown {
|
||||||
|
.markdown-content {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.toc-anchor,.icon-svg{
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -118,11 +118,11 @@
|
|||||||
<li v-if="tools.save" :name="$L('保存')" @click="handleSave">
|
<li v-if="tools.save" :name="$L('保存')" @click="handleSave">
|
||||||
<span class="iconfont icon-save"></span>
|
<span class="iconfont icon-save"></span>
|
||||||
</li>
|
</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-on"></span>
|
||||||
<span @click="scrolling = !scrolling" v-show="!scrolling" class="iconfont icon-off"></span>
|
<span @click="scrolling = !scrolling" v-show="!scrolling" class="iconfont icon-off"></span>
|
||||||
</li>
|
</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>
|
<span style="width:auto;font-size:14px;padding:0 6px">HTML2MD</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="right">
|
<li class="right">
|
||||||
|
|||||||
@ -32,5 +32,7 @@ export default {
|
|||||||
exportmd: true,
|
exportmd: true,
|
||||||
importmd: true,
|
importmd: true,
|
||||||
save: false,
|
save: false,
|
||||||
clear: false
|
clear: false,
|
||||||
|
scrolling: true,
|
||||||
|
html_to_markdown: true,
|
||||||
}
|
}
|
||||||
|
|||||||
@ -96,7 +96,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import MarkdownPro from './pro';
|
import MarkdownPro from './pro';
|
||||||
import ImgUpload from "../ImgUpload";
|
import ImgUpload from "../ImgUpload";
|
||||||
import {mapState} from "vuex";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'MDEditor',
|
name: 'MDEditor',
|
||||||
@ -140,6 +139,8 @@
|
|||||||
importmd: false,
|
importmd: false,
|
||||||
save: false,
|
save: false,
|
||||||
clear: false,
|
clear: false,
|
||||||
|
scrolling: true,
|
||||||
|
html_to_markdown: true,
|
||||||
|
|
||||||
custom_image: true,
|
custom_image: true,
|
||||||
custom_uploadImage: true,
|
custom_uploadImage: true,
|
||||||
|
|||||||
@ -33,7 +33,7 @@
|
|||||||
<li v-if="editUser.length > 10" class="more" :title="editUser.length">{{editUser.length > 999 ? '...' : editUser.length}}</li>
|
<li v-if="editUser.length > 10" class="more" :title="editUser.length">{{editUser.length > 999 ? '...' : editUser.length}}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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">
|
<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('md')">{{$L('MD编辑器')}}</Button>
|
||||||
<Button :type="`${contentDetail.type!='md'?'primary':'default'}`" @click="setTextType('text')">{{$L('文本编辑器')}}</Button>
|
<Button :type="`${contentDetail.type!='md'?'primary':'default'}`" @click="setTextType('text')">{{$L('文本编辑器')}}</Button>
|
||||||
@ -67,14 +67,22 @@
|
|||||||
</ETooltip>
|
</ETooltip>
|
||||||
</EPopover>
|
</EPopover>
|
||||||
</div>
|
</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>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-body">
|
<div class="content-body">
|
||||||
<div v-if="historyShow" class="content-mask"></div>
|
<div v-if="historyShow" class="content-mask"></div>
|
||||||
<template v-if="file.type=='document'">
|
<template v-if="file.type=='document'">
|
||||||
<MDEditor v-if="contentDetail.type=='md'" v-model="contentDetail.content" height="100%"/>
|
<template v-if="contentDetail.type=='md'">
|
||||||
<TEditor v-else v-model="contentDetail.content" height="100%" @editorSave="handleClick('saveBefore')"/>
|
<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>
|
</template>
|
||||||
<Drawio v-else-if="file.type=='drawio'" ref="myFlow" v-model="contentDetail" :title="file.name" @saveData="handleClick('saveBefore')"/>
|
<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')"/>
|
<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";
|
import IFrame from "./IFrame";
|
||||||
|
|
||||||
const MDEditor = () => import('../../../components/MDEditor/index');
|
const MDEditor = () => import('../../../components/MDEditor/index');
|
||||||
|
const MDPreview = () => import('../../../components/MDEditor/preview');
|
||||||
const TEditor = () => import('../../../components/TEditor');
|
const TEditor = () => import('../../../components/TEditor');
|
||||||
const AceEditor = () => import('../../../components/AceEditor');
|
const AceEditor = () => import('../../../components/AceEditor');
|
||||||
const OnlyOffice = () => import('../../../components/OnlyOffice');
|
const OnlyOffice = () => import('../../../components/OnlyOffice');
|
||||||
@ -130,7 +139,7 @@ const Minder = () => import('../../../components/Minder');
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "FileContent",
|
name: "FileContent",
|
||||||
components: {IFrame, FileHistory, AceEditor, TEditor, MDEditor, OnlyOffice, Drawio, Minder},
|
components: {IFrame, FileHistory, AceEditor, TEditor, MDEditor, OnlyOffice, Drawio, Minder, MDPreview},
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@ -167,10 +176,13 @@ export default {
|
|||||||
|
|
||||||
historyShow: false,
|
historyShow: false,
|
||||||
officeReady: false,
|
officeReady: false,
|
||||||
|
|
||||||
|
edit: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.edit = !this.windowPortrait
|
||||||
document.addEventListener('keydown', this.keySave)
|
document.addEventListener('keydown', this.keySave)
|
||||||
window.addEventListener('message', this.handleOfficeMessage)
|
window.addEventListener('message', this.handleOfficeMessage)
|
||||||
//
|
//
|
||||||
@ -287,6 +299,81 @@ export default {
|
|||||||
}
|
}
|
||||||
return '';
|
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: {
|
methods: {
|
||||||
@ -405,6 +492,7 @@ export default {
|
|||||||
newData.ext = this.fileExt;
|
newData.ext = this.fileExt;
|
||||||
this.fileExt = null;
|
this.fileExt = null;
|
||||||
}
|
}
|
||||||
|
this.edit = this.windowPortrait ? false : true;
|
||||||
this.$store.dispatch("saveFile", newData);
|
this.$store.dispatch("saveFile", newData);
|
||||||
}).catch(({msg}) => {
|
}).catch(({msg}) => {
|
||||||
$A.modalError(msg);
|
$A.modalError(msg);
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="file-history">
|
<div class="file-history">
|
||||||
<Table
|
<Table
|
||||||
:width="480"
|
:width="(windowWidth - 40) > 480 ? 480 : (windowWidth - 40)"
|
||||||
:max-height="windowHeight - 180"
|
:max-height="windowHeight - 180"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:data="list"
|
:data="list"
|
||||||
|
|||||||
@ -810,7 +810,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
isPreview() {
|
isPreview() {
|
||||||
return this.windowPortrait || this.fileInfo.permission === 0
|
return (this.windowPortrait && this.fileInfo.type!='document') || this.fileInfo.permission === 0
|
||||||
},
|
},
|
||||||
|
|
||||||
isParentShare() {
|
isParentShare() {
|
||||||
|
|||||||
@ -319,7 +319,7 @@
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
.edit-header,
|
.edit-header,
|
||||||
.content-body {
|
.content-body {
|
||||||
min-width: 720px;
|
min-width: 375px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
.teditor-loadedstyle {
|
.teditor-loadedstyle {
|
||||||
.tox-menubar,
|
.tox-menubar,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user