Мне нужно что то по типу простого плейграунда,где будет несколько полей в которые можно вводить код и окно с результатом, и сделать это нужно через iframe src doc, но у меня проблема в строках 67-72, вообще код отсюда брал и адаптировал под vue js
https://www.youtube.com/watch?v=wcVxX7lu2d4 и там все работает
<template>
<div class="code">
<div class="html">
<textarea
v-model="html"
id="html"
></textarea></div>
<div class="css">
<textarea
v-model="css"
id="css"
></textarea></div>
<div class="js">
<textarea
v-model="js"
id="js"
></textarea></div>
</div>
<div>
<iframe
srcdoc="srcDoc"
></iframe>
</div>
</template>
<script>
import * as CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/material.css'
//import 'codemirror/mode/css/css'
import 'codemirror/mode/xml/xml'
import 'codemirror/mode/javascript/javascript.js'
// theme
import "codemirror/theme/darcula.css";
import 'codemirror/theme/juejin.css'
import { ref } from "vue";
export default {
data(){
return{
//content:'let = 0;\n #Hello world',
// language:[
// 'javascript','css','xml'
// ],
html:'',
css:'',
js:''
}
},
setup(){
//const cmOption = ref({
// tabSize:2,
// theme:'material'
// theme:'juejin',
// mode:'javascript'
// })
// const modeLang = ref({
// name:'javascript',
// json:true
// })
// return {modeLang, cmOption}
const srcDoc = ref(
`<html>
<body>${this.html}</body>
<style>${this.css}</style>
<script>${this.js}</script>
</html>`
)
return {srcDoc}
},
mounted() {
this.cm = CodeMirror.fromTextArea(document.getElementById('js'),{
lineNumbers:true,
theme:'darcula',
mode: 'javascript',
lineWrapping: true,
})
this.cm = CodeMirror.fromTextArea(document.getElementById('css'),{
lineNumbers:true,
theme:'darcula',
mode: 'css',
lineWrapping: true,
})
this.cm = CodeMirror.fromTextArea(document.getElementById('html'),{
lineNumbers:true,
theme:'juelin',
mode: 'xml',
lineWrapping: true,
})
//this.
},
methods:{
toggleCodeMirror(){
const ConstMirrorMode = this.cm.getOption('mode')
if (ConstMirrorMode === 'javascript'){
this.cm.setOption('mode', 'gfm')
}else{
this.cm.setOption('mode', 'javascript')
}
}
}
};
</script>
<style scoped>
.code{
padding-top: 15px;
}
.js{
padding-top: 15px;
}
.css{
padding-top: 15px;
}
.html{
padding-top: 15px;
}
</style>
Средний
