如何写一个代码编辑器

演示什么是代码编辑器 演示

当我们看到这个编辑器的时候，你有没有好奇这是这么做出来的？如果是让你来做，你会怎么做？

闲扯 学无止境，我们现在的技术都是基于前一代人之上做出来的，要想成为一个高级/资深的前端，重点不是你能创造多少东西，而是你知道多少东西。有没有解决问题的能力。遇到问题能不能找到最优解，为公司减少成本的同时提升效率。系统性的解决问题，提高代码的维护性、稳定性、可扩展行等等。所以现代社会是一个认知的社会，只有不断的突破自己的认知，才能够成为更优秀的人。

最近在搞公众号，虽然公众号已经写了快两年了，但是一直没有推广过。最近打算推广，加了好多大佬的微信，我感觉我之前做的事情就是小巫见大巫，根本不值一提，前方还有好长的路要走，我隐隐感觉有点兴奋，因为只有迎难而上、才能迎刃而解。关注我公众号，前路漫漫，一起修行！

正题 当我们想做一个事情的时候，往往最难的不是做，而是不知道从哪做起，怎么做？我的每篇文章都会讲我是如何去一点点解决问题的，希望能够尽我的绵薄之力帮助有心之人。

看到网站之后不要急着去百度，因为百度有太多无用的信息干扰你，而且这些无用的信息很可能会把你的注意力转移，最后忘了你为什么要百度！以 codepen 官网为例，我是如何去查他用了什么技术？思考，这种编辑器的功能一定是有开源库的，因为好多网站都使用过，那么顺着思路走，找到这个开源库的名字，我们就完成一半了。怎么找，首先右击打开检查，查看 Network 有没有有用的信息，比如加载了哪个js，在js源码中找到一些线索（一般都会被打包过了，找到的几率不大）。然后打开元素检查，查找 class 名称有没有一些蹊跷为什么找 class ，因为 class 最能直观的找到表达者的意图class

我们找到了一个很可疑的单词 CodeMirror

接下来去 github 上搜索一下 CodeMirror

class

果然被我们找到了，点进去查看他的用法。接下来你应该知道怎么做了～

动工 上面讲解的是我如何找工具的方法，我现在使用的不是 CodeMirror，但是我也是通过这种方法找到的。我接下来用 monacoEditor 来讲解我的做法。

加载 monaco 脚本 这是一段加载 monaco 的js。主要逻辑就是 load 一段 js，将 monaco 注册到 window 上

代码语言：javascript复制export default {

// https://as.alipayobjects.com/g/cicada/monaco-editor-mirror/0.6.1/min/vs/loader.js

load(srcPath = 'https://as.alipayobjects.com/g/cicada/monaco-editor-mirror/0.6.1/min', callback) {

if (window.monaco) {

callback();

return;

}

const config = {

paths: {

vs: srcPath + '/vs'

}

};

const loaderUrl = `${config.paths.vs}/loader.js`;

const onGotAmdLoader = () => {

if (window.LOADER_PENDING) {

window.require.config(config);

}

window.require(['vs/editor/editor.main'], () => {

callback();

});

// 当AMD加载器已被加载时调用延迟的回调

if (window.LOADER_PENDING) {

window.LOADER_PENDING = false;

const loaderCallbacks = window.LOADER_CALLBACKS;

if (loaderCallbacks && loaderCallbacks.length) {

let currentCallback = loaderCallbacks.shift();

while (currentCallback) {

currentCallback.fn.call(currentCallback.window);

currentCallback = loaderCallbacks.shift();

}

}

}

};

if (window.LOADER_PENDING) {

// 我们需要避免加载多个loader.js时

// 有多个编辑器同时加载延迟调用回调除了第一个

window.LOADER_CALLBACKS = window.LOADER_CALLBACKS || [];

window.LOADER_CALLBACKS.push({

window: this,

fn: onGotAmdLoader

});

} else {

if (typeof window.require === 'undefined') {

const loaderScript = window.document.createElement('script');

loaderScript.type = 'text/javascript';

loaderScript.src = loaderUrl;

loaderScript.addEventListener('load', onGotAmdLoader);

window.document.body.appendChild(loaderScript);

window.LOADER_PENDING = true;

} else {

onGotAmdLoader();

}

}

}

}封装组件 写一个组件将加载执行的逻辑封装在这个组件里，暴露出一些 api，提供给调用者使用

代码语言：javascript复制

完成演示 使用组件，将组件显示在页面上。并将 console.log 收集起来，执行完代码之后将其打印在屏幕上。

最后会有演示

代码语言：javascript复制

效果演示 小结 又到了小结时刻，当我们看见一个很厉害的东西的时候，不要害怕，其实你也可以，大部分的功能其实已经被别人封装好了，我们都是站在巨人的肩膀上。

我会经常分享一些自己工作经验、技术体会、做的小玩意等等。更大家一起学习。

看别人十遍，不如自己动手写一遍，我的这些源码和文章都在这里，可以自己下载下来运行一下试试。

https://github.com/luoxue-victor/source-code/tree/master/src/views/monacoEditor