2024年Web前端最新厉害了，手把手教你搭建一个代码在线编辑预览工具，看完阿里P9大牛的“前端成长笔记”我悟了

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题

复制代码

实现效果如下：

2021-04-29-19-15-42.gif

为了能提供多种布局的随意切换，我们有必要把上述逻辑封装一下，封装成两个组件，一个容器组件Drag.vue，一个容器的子组件DragItem.vue，DragItem通过slot来显示其他内容，DragItem主要提供拖动条及绑定相关的鼠标事件，Drag组件里包含了上述提到的核心逻辑，维护对应的尺寸数组，提供相关处理方法给DragItem绑定的鼠标事件，然后只要根据所需的结构进行组合即可，下面的结构就是上述默认的布局：

复制代码

这部分代码较多，有兴趣的可以查看源码。

编辑器

===

目前涉及到代码编辑的场景基本使用的都是codemirror，因为它功能强大，使用简单，支持语法高亮、支持多种语言和主题等，但是为了能更方便的支持语法提示，本文选择的是微软的monaco-editor，功能和VSCode一样强大，VSCode有多强就不用我多说了，缺点是整体比较复杂，代码量大，内置主题较少。

monaco-editor支持多种加载方式，esm模块加载的方式需要使用webpack，但是vite底层打包工具用的是Rollup，所以本文使用直接引入js的方式。

在官网上下载压缩包后解压到项目的public文件夹下，然后参考示例的方式在index.html文件里添加：

复制代码

monaco-editor内置了10种语言，我们选择中文的，其他不用的可以直接删掉：

image-20210430163748892.png

接下来创建编辑器就可以了：

const editor = monaco.editor.create(

editorEl.value,// dom容器

{

value: props.content,// 要显示的代码

language: props.language,// 代码语言，css、javascript等

minimap: {

enabled: false,// 关闭小地图

},

wordWrap: ‘on’, // 代码超出换行

theme: ‘vs-dark’// 主题

}

)

复制代码

就这么简单，一个带高亮、语法提示、错误提示的编辑器就可以使用了，效果如下：

image-20210430154406199.png

其他几个常用的api如下：

// 设置文档内容

editor.setValue(props.content)

// 监听编辑事件

editor.onDidChangeModelContent((e) => {

console.log(editor.getValue())// 获取文档内容

})

// 监听失焦事件

editor.onDidBlurEditorText((e) => {

console.log(editor.getValue())

})

复制代码

预览

==

代码有了，接下来就可以渲染页面进行预览了，对于预览，显然是使用iframe，iframe除了src属性外，HTML5还新增了一个属性srcdoc，用来渲染一段HTML代码到iframe里，这个属性IE目前不支持，不过vue3都要不支持IE了，咱也不管了，如果硬要支持也简单，使用write方法就行了：

iframeRef.value.contentWindow.document.write(htmlStr)

复制代码

接下来的思路就很清晰了，把html、css和js代码组装起来扔给srcdoc不就完了吗：

复制代码

const assembleHtml = (head, body) => {

return `

${head}

${body}

`

}

const run = () => {

let head = `