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.
47 lines
1.5 KiB
47 lines
1.5 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();}}}, false)
|
|
document.onreadystatechange = (state)=> {
|
|
if(document.readyState === 'complete') {
|
|
const oWrap = window.parent.document.querySelector('#preview-wrap');
|
|
oWrap.style.height = document.body.clientHeight + 50 + 'px'
|
|
}
|
|
}
|
|
</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>
|