254 lines
7.6 KiB
Vue
254 lines
7.6 KiB
Vue
<template>
|
||
<template v-for="(item,index) in htmls" :key="index">
|
||
<view v-if="item.type == 'image'" style="text-align:center;">
|
||
<image :src="file_stor(item.content)" mode="heightFix" style="max-width:100%;"></image>
|
||
</view>
|
||
<view v-else-if="item.type == 'video'" style="text-align:center;">
|
||
<video :src="file_stor(item.content)" style="width:100%;"></video>
|
||
</view>
|
||
<view v-else-if="item.type == 'audio'" style="padding:1em;">
|
||
<ciy-audio :src="file_stor(item.content)"></ciy-audio>
|
||
</view>
|
||
<view v-else v-html="item.content" style="width:100%;position: relative;" :style="{padding:padding}"></view>
|
||
</template>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
md: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
padding: {
|
||
type: String,
|
||
default: '0 0.5em'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
htmls: []
|
||
};
|
||
},
|
||
watch: {
|
||
md: {
|
||
handler(newD, oldD) {
|
||
this.htmls = this.convert(newD);
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
fillmdlines() {
|
||
|
||
},
|
||
convert(markdown) {
|
||
// #,!,`,@lcr,|表格
|
||
markdown = markdown || '';
|
||
if (markdown.substring(0, 4) == '[MD]')
|
||
markdown = markdown.substring(4).trim();
|
||
var mds = markdown.split('\n');
|
||
var htmls = [];
|
||
var html = '';
|
||
var isol = false;
|
||
var titnum = [0, 0, 0, 0, 0];
|
||
for (var m in mds) {
|
||
if (mds[m].length == 0) {
|
||
continue;
|
||
}
|
||
if (mds[m].length > 0 && mds[m].trim() == '') {
|
||
if (isol) {
|
||
isol = false;
|
||
html += '</ol>';
|
||
}
|
||
html += '<br/>';
|
||
continue;
|
||
}
|
||
if (mds[m][0] == '#') { //标题1/2/3
|
||
if (isol) {
|
||
isol = false;
|
||
html += '</ol>';
|
||
}
|
||
var cr = mds[m].substring(1, 2).toLowerCase();
|
||
if (mds[m].substring(0, 5) == '#####') {
|
||
oladd(4, titnum);
|
||
if (mds[m].substring(5, 6) == '.')
|
||
html += '<h5 class="md-h5">' + olnum(4, titnum, '、') + convertcode(mds[m].substring(6)) + '</h5>';
|
||
else if (mds[m].substring(5, 6) == ':')
|
||
html += '<div class="md-content">' + olnum(4, titnum, ' ') + convertcode(mds[m].substring(6)) + '</div>';
|
||
else
|
||
html += '<h5 class="md-h5">' + convertcode(mds[m].substring(5)) + '</h5>';
|
||
} else if (mds[m].substring(0, 4) == '####') {
|
||
oladd(3, titnum);
|
||
if (mds[m].substring(4, 5) == '.')
|
||
html += '<h4 class="md-h4">' + olnum(3, titnum, '、') + convertcode(mds[m].substring(5)) + '</h4>';
|
||
else if (mds[m].substring(4, 5) == ':')
|
||
html += '<div class="md-content">' + olnum(3, titnum, ' ') + convertcode(mds[m].substring(5)) + '</div>';
|
||
else
|
||
html += '<h4 class="md-h4">' + convertcode(mds[m].substring(4)) + '</h4>';
|
||
} else if (mds[m].substring(0, 3) == '###') {
|
||
oladd(2, titnum);
|
||
if (mds[m].substring(3, 4) == '.')
|
||
html += '<h3 class="md-h3">' + olnum(2, titnum, '、') + convertcode(mds[m].substring(4)) + '</h3>';
|
||
else if (mds[m].substring(3, 4) == ':')
|
||
html += '<div class="md-content">' + olnum(2, titnum, ' ') + convertcode(mds[m].substring(4)) + '</div>';
|
||
else
|
||
html += '<h3 class="md-h3">' + convertcode(mds[m].substring(3)) + '</h3>';
|
||
} else if (mds[m].substring(0, 2) == '##') {
|
||
oladd(1, titnum);
|
||
if (mds[m].substring(2, 3) == '.')
|
||
html += '<h2 class="md-h2">' + olnum(1, titnum, '、') + convertcode(mds[m].substring(3)) + '</h2>';
|
||
else if (mds[m].substring(2, 3) == ':')
|
||
html += '<div class="md-content">' + olnum(1, titnum, ' ') + convertcode(mds[m].substring(3)) + '</div>';
|
||
else
|
||
html += '<h2 class="md-h2">' + convertcode(mds[m].substring(2)) + '</h2>';
|
||
} else {
|
||
oladd(0, titnum);
|
||
if (cr == 'c')
|
||
html += '<h1 class="md-h1" style="text-align:center;">' + convertcode(mds[m].substring(2)) +
|
||
'</h1>';
|
||
else if (cr == 'r')
|
||
html += '<h1 class="md-h1" style="text-align:right;">' + convertcode(mds[m].substring(2)) +
|
||
'</h1>';
|
||
else if (cr == '.')
|
||
html += '<h1 class="md-h1">' + olnum(0, titnum, '、') + convertcode(mds[m].substring(2)) + '</h1>';
|
||
else if (cr == ':')
|
||
html += '<div class="md-content">' + olnum(0, titnum, ' ') + convertcode(mds[m].substring(2)) + '</div>';
|
||
else
|
||
html += '<h1 class="md-h1">' + convertcode(mds[m].substring(1)) + '</h1>';
|
||
}
|
||
} else if (mds[m][0] == '@') { //c居中，r靠右
|
||
var cr = mds[m].substring(1, 2).toLowerCase();
|
||
if (cr == 'c')
|
||
html += '<div class="md-content" style="text-align:center;">' + convertcode(mds[m].substring(2)) + '</div>';
|
||
else if (cr == 'r')
|
||
html += '<div class="md-content" style="text-align:right;margin-right:1em;">' + convertcode(mds[m].substring(2)) + '</div>';
|
||
else if (mds[m][1] == '.') {
|
||
if (!isol) {
|
||
isol = true;
|
||
html += '<ol>';
|
||
}
|
||
html += '<li style="line-height: 1.5em;padding: 0.5em 0;">' + convertcode(mds[m].substring(2)) + '</li>';
|
||
} else
|
||
html += '<div class="md-content">' + mds[m].substring(1) + '</div>';
|
||
|
||
} else if (mds[m][0] == '!') { //图片、视频、音频
|
||
var mis = mds[m].split('|');
|
||
var url = mis[0];
|
||
url = this.file_stor(url.substring(1));
|
||
var ind = url.indexOf('?');
|
||
var match;
|
||
if (ind > -1) {
|
||
match = url.substring(0, ind).match(/\.([^./]+)$/);
|
||
} else
|
||
match = url.match(/\.([^./]+)$/);
|
||
var exurl = match ? match[1] : '';
|
||
htmls.push({
|
||
type: 'text',
|
||
content: html
|
||
});
|
||
html = '';
|
||
if (exurl == 'mp4' || exurl == 'm3u8') {
|
||
var alt = '';
|
||
if (mis[1])
|
||
alt = ' alt="' + mis[1].replace('"', "") + '"';
|
||
htmls.push({
|
||
type: 'video',
|
||
content: url
|
||
});
|
||
} else if (exurl == 'mp3') {
|
||
var alt = '';
|
||
if (mis[1])
|
||
alt = ' alt="' + mis[1].replace('"', "") + '"';
|
||
htmls.push({
|
||
type: 'audio',
|
||
content: url
|
||
});
|
||
} else {
|
||
var alt = '';
|
||
if (mis[1])
|
||
alt = ' alt="' + mis[1].replace('"', "") + '"';
|
||
htmls.push({
|
||
type: 'image',
|
||
content: url
|
||
});
|
||
}
|
||
} else if (mds[m][0] == '<') { //原始HTML
|
||
html += mds[m];
|
||
} else {
|
||
if (isol) {
|
||
isol = false;
|
||
html += '</ol>';
|
||
}
|
||
html += '<div class="md-content">' + convertcode(mds[m]) + '</div>';
|
||
}
|
||
}
|
||
if (html) {
|
||
if (isol) {
|
||
isol = false;
|
||
html += '</ol>';
|
||
}
|
||
htmls.push({
|
||
type: 'text',
|
||
content: html
|
||
});
|
||
}
|
||
return htmls;
|
||
|
||
function oladd(idx, olnum) {
|
||
olnum[idx]++;
|
||
for (var i = idx + 1; i < olnum.length; i++)
|
||
olnum[i] = 0;
|
||
}
|
||
|
||
function olnum(idx, olnum, end) {
|
||
for (var i = 0; i <= idx; i++) {
|
||
if (olnum[i] == 0)
|
||
continue;
|
||
var ols = [];
|
||
for (var j = i; j <= idx; j++) {
|
||
ols.push(olnum[j]);
|
||
}
|
||
return ols.join('.') + end;
|
||
}
|
||
}
|
||
|
||
function convertcode(md) {
|
||
var bcode = false;
|
||
md = md.replace(/ /g, ' ');
|
||
while (true) {
|
||
var ind = md.indexOf('`');
|
||
if (ind == -1)
|
||
break;
|
||
var el = '<span class="md-code">';
|
||
if (bcode) {
|
||
bcode = false;
|
||
el = '</span>';
|
||
} else
|
||
bcode = true;
|
||
md = md.substring(0, ind) + el + md.substring(ind + 1);
|
||
}
|
||
while (true) {
|
||
var ind = md.indexOf('**');
|
||
if (ind == -1)
|
||
break;
|
||
var el = '<span style="font-weight:bold;">';
|
||
if (bcode) {
|
||
bcode = false;
|
||
el = '</span>';
|
||
} else
|
||
bcode = true;
|
||
md = md.substring(0, ind) + el + md.substring(ind + 2);
|
||
}
|
||
if (bcode)
|
||
md += '</span>';
|
||
return md;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
</style> |