Skip to content

Awesome-Markdown-Editor
Awesome-Markdown-Editor

qq_38536878 / Awesome-Markdown-Editor
与 Fork 源项目一致

Fork自 gitcode_dev / Awesome-Markdown-Editor

通知 1
Star 0
Fork 0
Awesome-Markdown-Editor
Awesome-Markdown-Editor

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 1e5edef1 编写于 作者: 璃白.'s avatar 璃白. 🌻
浏览文件
操作

feat:完善上传视频逻辑

上级 2b997e0a
展开全部 隐藏空白更改
内联 并排
Showing with 196 addition and 63 deletion
dist/index.html
浏览文件 @ 1e5edef1
......@@ -146,7 +146,22 @@
},
onUpload: function(file, type, callback) {
if (type === "video") {
callback("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4");
let time = 0;
const timeObj = setInterval(() => {
time++;
if (time >= 100) {
callback("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4");
clearInterval(timeObj);
return;
}
// if (time === 30) {
// callback(0);
// clearInterval(timeObj);
// return;
// }
callback(time);
}, 10);
return;
}
new Promise((res, rej) => {
......
dist/markdown-editor.js
浏览文件 @ 1e5edef1
此差异已折叠。
src/App.vue
浏览文件 @ 1e5edef1
......@@ -17,6 +17,7 @@
:disabled="disabled"
:fullScreen.sync="fullScreen"
:themeOptions="themeOptions"
:uploadPercent="uploadPercent"
@upload="handleUpload"
@getFormatType="formatType = $event"
@updateShowHelp="showHelp = $event"
......@@ -240,16 +241,25 @@ export default {
uploadVideoCallBack() {
const _this = this;
return function({ url, file: { name } }) {
const originalText = _this.text;
const selectionInfo = _this.selectionInfo;
const newText = formatText(
originalText,
selectionInfo,
"![video](",
`${url} '${name}')\n`
if (isNaN(parseInt(url))) {
const originalText = _this.text;
const selectionInfo = _this.selectionInfo;
const newText = formatText(
originalText,
selectionInfo,
"![video](",
`${url})\n`
);
_this.text = newText;
_this.$refs.mdUploadFile.value = "";
_this.uploadPercent = 100;
} else {
_this.uploadPercent = parseInt(url);
}
_this.$refs["md_header" + _this.id].loading(
"video",
_this.uploadPercent
);
_this.text = newText;
_this.$refs.mdUploadFile.value = "";
};
}
},
......@@ -267,6 +277,7 @@ export default {
formatType: "",
htmlMinHeight: 150,
showHelp: false,
uploadPercent: 0,
textLength: "",
userList: false,
callUserList: [],
......
src/assets/img/icon-format.svg 已删除 100644 → 0
浏览文件 @ 2b997e0a
<svg t="1626417405941" class="icon" viewBox="0 0 1143 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2471" width="48" height="48"><path d="M387.907832 290.329177a2337.050694 2337.050694 0 0 1-283.603386 107.19739L550.653905 934.120512a38.109783 38.109783 0 0 0 53.659694 5.060971 37.378787 37.378787 0 0 0 6.096966-6.584963L784.986571 698.201855z m71.097595-34.817802l371.957882 380.859832 80.183544-107.501388a38.109783 38.109783 0 0 0-2.316987-48.415724l-75.183572-83.599524-28.719837-31.70682 233.783669-167.015049a67.074618 67.074618 0 1 0-93.537467-93.843466l-165.979055 232.077679-31.768819-35.366799q-66.219623-73.72058-131.892249-147.746159c7.133959 7.987955 5.670968 7.682956 4.939971 7.804956-4.573974 0-8.902949 0.975994-6.097965-1.036994a1211.361103 1211.361103 0 0 1-155.491115 95.489456zM883.037013 59.959489a143.478183 143.478183 0 1 1 200.18586 200.18686l-164.331065 117.379332q22.86587 25.183857 46.768734 51.891704a114.269349 114.269349 0 0 1 6.889961 145.002175L671.631216 978.023262a114.453348 114.453348 0 0 1-160.064089 23.293867 116.587336 116.587336 0 0 1-19.511888-18.293896L8.875989 402.038541a38.049783 38.049783 0 0 1 18.597895-60.976653q350.128007-102.074419 541.899914-242.564619c25.182857-18.293896 81.952533-19.817887 103.233413 4.145977q46.097738 51.890705 99.879431 112.075362l110.550371-154.759119z" p-id="2472"></path></svg>
\ No newline at end of file
src/assets/img/play.svg 0 → 100644
浏览文件 @ 1e5edef1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><path transform="translate(15,15) scale(0.04,0.04)" d="M576,363L810,512L576,661zM342,214L576,363L576,661L342,810z"></path></svg>
\ No newline at end of file
src/assets/style/global.less
浏览文件 @ 1e5edef1
......@@ -56,6 +56,27 @@ textarea {
opacity: 0;
}
.loading-enter-active {
transition: all 0.2s ease;
}
.loading-leave-active {
transition: all 0.2s ease;
}
.loading-enter
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translate3d(0, 4px, 0);
opacity: 0;
}
.loading-leave-to {
transform: translate3d(0, -4px, 0);
opacity: 0;
}
.md_img_container {
text-align: center;
}
.md_flex_card {
display: flex;
justify-content: space-between;
......
src/assets/style/markdown.less
浏览文件 @ 1e5edef1
......@@ -10,8 +10,28 @@
.md_preview {
font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei, SimSun;
video {
display: block;
.md_video {
position: relative;
width: 300px;
height: 200px;
video {
display: block;
width: 100%;
height: 100%;
}
&::after {
cursor: not-allowed;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: "";
width: 54px;
height: 54px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6) url("@/assets/img/play.svg")
center/cover no-repeat;
}
}
img {
max-width: 100%;
......
src/components/content/md-preview.vue
浏览文件 @ 1e5edef1
......@@ -41,9 +41,11 @@ export default {
},
mounted() {
this.addClass();
this.addControls();
},
updated() {
this.addClass();
this.addControls();
},
methods: {
addClass() {
......@@ -54,6 +56,15 @@ export default {
item.className += " md_hljs";
});
}, 0);
},
addControls() {
setTimeout(() => {
const videoDomList = document.querySelectorAll(".md_preview video");
if (!videoDomList.length) return;
videoDomList.forEach(item => {
item.setAttribute("preload", "auto");
});
}, 0);
}
}
};
......
src/components/content/mixins/render-mixins.js
浏览文件 @ 1e5edef1
......@@ -73,14 +73,14 @@ export default {
</div>`;
}
if (text === "video") {
return `<video
return `<p class="md_video"><video
class="video-js"
controls
preload="none"
src="${href}"
></video>`;
></video></p>`;
}
// ![img](...)渲染图片
let out = '<img src="' + href + '" alt="' + text + '"';
let out = '<p class="md_img_container"><img src="' + href + '" alt="' + text + '"';
if (title) {
const reg_title = /(\%([\u4E00-\u9FA5\w.]+)\s??)/;
const reg_align = /(\#([a-zA-Z]+)\s??)/;
......@@ -95,7 +95,7 @@ export default {
if (reg_align.exec(title)) {
var a = reg_align.exec(title)[2];
if (a === "center") {
out += 'style="display:block;margin: 0 auto;"';
out += 'style="display:inline-block;"';
}
out += ' align="' + a + '"';
}
......@@ -108,7 +108,7 @@ export default {
out += ' height="' + h + 'px"';
}
}
out += "/>";
out += "/></p>";
return out;
},
link(href, title, text) {
......
src/components/header/components/tool-button.vue
浏览文件 @ 1e5edef1
......@@ -2,10 +2,19 @@
<div v-if="isMobile" @click="mobileClick" class="tool_button">
<span :class="['icon iconfont', `icon-${info.icon}`]"></span>
</div>
<div v-else-if="info.name === 'loading'" class="tool_button">
<span :class="['icon loading iconfont', `icon-${info.icon}`]"> </span>
<span class="percent">{{ percent }}</span>
</div>
<transition-group
style="position:relative"
name="loading"
v-else-if="info.icon === 'loading'"
>
<div key="loading" class="tool_button loading_button">
<span class="circle">
<span class="loading"></span>
<span class="percent">{{ uploadPercent + "%" }}</span>
</span>
<!-- <span :class="['icon loading iconfont', `icon-${info.icon}`]"> </span> -->
</div>
</transition-group>
<div
v-else-if="info.name === 'code'"
@click="handleTool(info.name, info.startStr, info.endStr)"
......@@ -29,14 +38,16 @@
>
<span :class="['icon iconfont', `icon-${info.icon}`]"></span>
</div>
<div
v-else-if="info.name === 'video'"
@click="handleTool(info.name, info.startStr, info.endStr)"
v-tip.bottom="videoOptions"
class="tool_button"
>
<span :class="['icon iconfont', `icon-${info.icon}`]"></span>
</div>
<transition-group name="loading" v-else-if="info.name === 'video'">
<div
key="video"
@click="handleTool(info.name, info.startStr, info.endStr)"
v-tip.bottom="videoOptions"
class="tool_button"
>
<span :class="['icon iconfont', `icon-${info.icon}`]"></span>
</div>
</transition-group>
<div
v-else
v-tip.bottom="options"
......@@ -84,21 +95,16 @@ export default {
ulNum: {
type: Number,
default: 1
},
uploadPercent: {
type: Number,
default: 0
}
},
data() {
return {
percent: 0
};
},
created() {
setInterval(() => {
this.percent++;
if (this.percent >= 100) {
this.percent = 0;
}
}, 100);
return {};
},
computed: {
darkMode() {
return this.themeOptions && this.themeOptions.dark;
......@@ -263,10 +269,10 @@ export default {
<style lang="less" scoped>
@keyframes rotate {
from {
transform: rotate(0deg);
transform: translateY(-50%) rotate(0deg);
}
to {
transform: rotate(359deg);
transform: translateY(-50%) rotate(359deg);
}
}
.tool_button {
......@@ -274,18 +280,49 @@ export default {
box-sizing: border-box;
cursor: pointer;
position: relative;
line-height: 1;
overflow: hidden;
&.active {
.icon {
color: var(--md-editor-border-color-active);
}
}
.percent {
font-size: 12px;
position: absolute;
top: 2px;
left: 50%;
transform: translateX(-50%) scale(0.8);
&.loading_button {
padding: 0 2px 8px;
}
.circle {
display: inline-block;
width: 30px;
height: 16px;
border: 1px solid var(--md-editor-border-color-active);
border-radius: 10px;
vertical-align: text-bottom;
position: relative;
box-sizing: border-box;
.loading {
position: absolute;
left: 50%;
top: 50%;
width: 18px;
height: 6px;
background: #fff;
animation: rotate 3s linear infinite;
transform-origin: 0 50%;
border-radius: 10px;
}
.percent {
font-size: 12px;
line-height: 15px;
position: absolute;
z-index: 99;
top: 50%;
left: 50%;
color: var(--md-editor-border-color-active);
transform: translate(-50%, -50%) scale(0.8);
white-space: nowrap;
}
}
.icon {
font-size: 18px;
color: var(--md-editor-text-color);
......@@ -299,10 +336,10 @@ export default {
color: var(--md-editor-border-color-active);
}
}
&.loading {
animation: rotate 3s linear infinite;
}
// &.loading {
// animation: rotate 3s linear infinite;
// color: var(--md-editor-border-color-active);
// }
&.icon-quxiaoquanping_o {
font-size: 24px;
margin: 0 -4px;
......
src/components/header/md-header.vue
浏览文件 @ 1e5edef1
......@@ -36,6 +36,7 @@
:zIndex="zIndex"
:themeOptions="themeOptions"
:selectionInfo="selectionInfo"
:uploadPercent="uploadPercent"
/>
</div>
</div>
......@@ -100,6 +101,10 @@ export default {
selectionInfo: {
type: Object,
default: () => {}
},
uploadPercent: {
type: Number,
default: 0
}
},
computed: {
......@@ -251,13 +256,13 @@ export default {
startStr: "",
endStr: ""
},
{
name: "loading",
icon: "loading",
tip: "上传视频",
startStr: "",
endStr: ""
},
// {
// name: "loading",
// icon: "loading",
// tip: "上传中",
// startStr: "",
// endStr: ""
// },
{
name: "task",
icon: "renwu",
......@@ -289,6 +294,19 @@ export default {
},
created() {},
methods: {
loading(type, percent) {
const list = this.toolButtonList;
switch (type) {
case "video":
list.find(item => item.name === type).icon =
parseInt(percent) === 100 || parseInt(percent) === 0
? "shipin"
: "loading";
break;
default:
break;
}
},
resetUlNum() {
this.ulNum = 1;
},
......
webpack.config.js
浏览文件 @ 1e5edef1
......@@ -29,7 +29,7 @@ module.exports = {
},
{
test: /\.(ttf|woff|png)$/,
test: /\.(ttf|woff|png|svg)$/,
loader: "url-loader"
}
]
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或