monaco实现简易html代码编辑器和iframe运行预览代码-html代码-BFW代码库

monaco实现简易html代码编辑器和iframe运行预览代码

代码语言：html

所属分类：其他

代码描述：monaco实现简易html代码编辑器和iframe运行预览代码

代码标签： monaco 简易 html 代码编辑器 iframe 运行预览代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

</head>
<body>
    
      <style>
        body {
      font-family: "Source Han Sans", "San Francisco", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
      transition: background-color .2s;
      display: flex;
    }
   #runbtn{
       position: absolute;
       right:340px;
       z-index: 111;
   }
 
    .container {

      width: calc(100vw - 350px);
   
    height: 100vh;
 
     
    
      transition: 0.2s;
      overflow: hidden;
      z-index: 0;
    }
    #outputFrame{
        width: 340px;
    }
    </style>
    <script src="//repo.bfw.wiki/bfwrepo/js/monaco-editor/loader.js"></script>
   


    <div id="root"></div>
     <script>
     var editor;
 require.config({ paths: { 'vs': '//repo.bfw.wiki/bfwrepo/js/monaco-editor' } });
require(['vs/editor/editor.main'], function () {

    // 初始化变量
    var fileCounter = 0;
    var editorArray = [];
    var defaultCode = [
        '<h1>',
        '   hello',
        '</h1>'
    ].join('\n');

  

    // 新建一个编辑器
    function newEditor(container_id, code, language) {
        
        
        var model = monaco.editor.createModel(cod.........完整代码请登录后点击上方下载按钮下载查看