You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
2.3 KiB
67 lines
2.3 KiB
<template>
|
|
<iframe
|
|
id="preview-wrap"
|
|
class="preview-wrap"
|
|
sandbox="allow-scripts allow-same-origin"
|
|
data-alloy-tabstop="true"
|
|
tabindex="-1"
|
|
:srcdoc="`<!DOCTYPE html>
|
|
<html lang='zh-CN'>
|
|
<head>
|
|
<title>Preview</title>
|
|
<style>${CssP1}</style>
|
|
<style>${CssP2}</style>
|
|
</head>
|
|
<body style='height:fit-content' id='tinymce' class='mce-content-body'>
|
|
${props.content}<script>
|
|
document.addEventListener && document.addEventListener('click', function(e) {
|
|
for (var elm = e.target; elm; elm = elm.parentNode) {
|
|
// 遇到链接点击自动下载
|
|
if (elm.nodeName === 'A' && !(e.metaKey)) {
|
|
e.preventDefault();
|
|
const oDown = window.parent.document.createElement('a')
|
|
oDown.href = elm.href;
|
|
// oDown.target = '_blank'
|
|
|
|
window.parent.document.body.appendChild(oDown);
|
|
oDown.click()
|
|
window.parent.document.body.removeChild(oDown);
|
|
|
|
}
|
|
}
|
|
}, false)
|
|
document.onreadystatechange = (state)=> {
|
|
if(document.readyState === 'complete') {
|
|
const oWrap = window.parent.document.querySelector('#preview-wrap');
|
|
oWrap.style.height = document.body.clientHeight + 50 + 'px';
|
|
// const oAs = [document.querySelectorAll('a')];
|
|
// for (const oA of oAs[0]) {
|
|
// oA.setAttribute('target', '_blank')
|
|
// }
|
|
// document.body.setAttribute()
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>`"
|
|
>
|
|
</iframe>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
//@ts-ignore
|
|
import CssP1 from '/assets/tinymce/skins/ui/oxide/content.min.css?inline';
|
|
//@ts-ignore
|
|
import CssP2 from '/assets/tinymce/skins/ui/oxide/content.min.css?inline';
|
|
const props = defineProps(['content']);
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.preview-wrap {
|
|
width: 100%;
|
|
height: fit-content;
|
|
//min-height: 600px;
|
|
}
|
|
</style>
|