2024年最新没啥用的纯前端打造一个实时 markdown 编辑器，前端开发究竟该如何学习

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

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

/**

• 初始化编辑框

*/

function initEditor() {

// 初始化编辑器

var editor = ace.edit(‘md-editor’);

editor.setTheme(‘ace/theme/monokai’); // 设置主题样式

editor.getSession().setMode(‘ace/mode/markdown’); // 设置编辑器模式

editor.getSession().setTabSize(4); // 设置 Tab 为４个空格

editor.getSession().setUseWrapMode(true); // 自动换行

}

现在可以用浏览器打开 index.html ，可以看到编辑器了，而且可以输入内容。

4.解析markdown

---

下面我们来编写解析 markdown 的方法,输入如下代码:

/**

• 解析markdown

• @params {object} editor 编辑器

• @return {object} 预览框

*/

function parseMarkdown(editor) {

var viewer = $(‘#md-viewer’); // 文档预览框

var data = editor.getValue(); // 获取编辑器数据

// 保存数据到本地

localStorage.localData = data;

// 解析 markdown

data = marked(data);

viewer.html(data);

}

• 解析 markdown 使用的是 marked.js 库，看上面的代码就知道使用的方法很简单，调用 marked(data) 就可以了。

• 但是，我们要实现实时解析 markdown，也就是说要在编辑器中每输入一个字符，就会自动解析并在预览框中显示出来。

• 那么我们只需要给编辑器绑定一个 change 事件就可以了，当编辑器中的内容发生变化时就调用 parseMarkdown() 方法解析一次，这样就是实时的了。

main.js:

// 初始化编辑器

initEditor();

/**

• 初始化编辑框

*/

function initEditor() {

// 初始化编辑器

var editor = ace.edit(‘md-editor’);

editor.setTheme(‘ace/theme/monokai’); // 设置主题样式

editor.getSession().setMode(‘ace/mode/markdown’); // 设置编辑器模式

editor.getSession().setTabSize(4); // 设置 Tab 为４个空格

editor.getSession().setUseWrapMode(true); // 自动换行

// 加载本地缓存数据

editor.setValue(localStorage.localData || ‘’);

// 解析从本地加载的缓存数据

parseMarkdown(editor);

// 绑定 change 事件

// 即时解析 markdown

editor.getSession().on(‘change’, function (e) {

parseMarkdown(editor);

});

}

/**

• 解析markdown

• @params {object} editor 编辑器

• @return {object} 预览框

*/

function parseMarkdown(editor) {

var viewer = $(‘#md-viewer’); // 文档预览框

var data = editor.getValue(); // 获取编辑器数据

// 保存数据到本地

localStorage.localData = data;

// 解析 markdown

data = marked(data);

viewer.html(data);

}

我们用 localStorage 把每次修改后的数据都保存在了本地缓存中，这样即使刷新浏览器数据也不会丢失了。

现在已经可以实时解析 markdown 了，可以打开浏览器试试。

5.代码高亮

---

下面我们来美化一下 markdown 中的代码块， 这样预览框中的会更加好看。

我们使用 highlight.js 库来高亮代码，

highlight.js

主要有两个常用方法：hljs.initHighlightingOnLoad(); 和 hljs.highlightBlock();

• 第一个方法：用于页面加载完后，需要高亮的代码文档不会被改变的情况。

• 第二个方法：主要用于需要高亮的代码随时会被改变的情况。所以我们这里使用第二个方法。

修改 parseMarkdown() 方法代码：

/**

• 解析markdown

• @params {object} editor 编辑器

• @return {object} 预览框

*/

function parseMarkdown(editor) {

var viewer = $(‘#md-viewer’); // 文档预览框

var data = editor.getValue(); // 获取编辑器数据

// 保存数据到本地

localStorage.localData = data;

// 解析 markdown

data = marked(data);

viewer.html(data);

// 高亮 markdown 文档中的代码

$(‘pre > code’, viewer).each(function () {

hljs.highlightBlock(this);

});

}

到这里，一个简单的 markdown 编辑器已经成型了。

6.滚动条同步

---

为了让体验更好，我们再加一个功能，让两边的滚动条同步，也就是滚动左边或者右边的文档时，另一边的也会跟着滚动。

在 main.js 中添加如下函数：

/*

• 控制滚动条

• 使编辑器和预览框同时滚动

• @params {object} editor 编辑器

• @params {object} viewer 预览框

*/

function fixScrollBar(editor, viewer) {

var session = editor.getSession();

// 第一次加载页面时

// 默认滚动到第一行

session.setScrollTop(0);

// 编辑器绑定滚动事件

session.on(‘changeScrollTop’, function () {

var sTop = session.getScrollTop();

// 设置预览框的滚动条

viewer.scrollTop(sTop);

});

// 预览框定滚动事件

viewer.on(‘scroll’, function () {

var sTop = viewer.scrollTop();

// 设置编辑器的滚动条

session.setScrollTop(sTop);

});

}

• 在这个函数中，我们可以看到，给编辑器和预览框都绑定了 scroll 方法，滚动的时候，会改变另一边的 scrollTop 值，这样两边的滚动条就基本同步了。这个函数需要传入两个参数：编辑器对象和预览框对象。

• 调用的时候，按逻辑是在 initEditor() 中调用，但是这个函数里面没有预览框对象，为了不重复通过 jQuery 获取预览框，我们可以在 parseMarkdown() 函数中 return viewer，然后传给 fixScrollBar()。

7.最终main.js代码

---

// 初始化编辑器

initEditor();

/**

• 初始化编辑框

*/

function initEditor() {

// 初始化编辑器

var editor = ace.edit(‘md-editor’);

editor.setTheme(‘ace/theme/monokai’); // 设置主题样式

editor.getSession().setMode(‘ace/mode/markdown’); // 设置编辑器模式

editor.getSession().setTabSize(4); // 设置 Tab 为４个空格

editor.getSession().setUseWrapMode(true); // 自动换行

// 加载本地缓存数据

editor.setValue(localStorage.localData || ‘’);

// 解析从本地加载的缓存数据

// 并获取其返回的 viewer

var viewer = parseMarkdown(editor);

// 控制滚动条

fixScrollBar(editor, viewer);

// 即时解析 markdown

editor.getSession().on(‘change’, function (e) {

parseMarkdown(editor);

});

}

/**

• 解析markdown

• @params {object} editor 编辑器

• @return {object} 预览框

*/

function parseMarkdown(editor) {

var viewer = $(‘#md-viewer’); // 文档预览框

var data = editor.getValue(); // 获取编辑器数据

// 保存数据到本地

localStorage.localData = data;

// 解析 markdown

data = marked(data);

viewer.html(data);

// 高亮 markdown 文档中的代码

$(‘pre > code’, viewer).each(function () {

hljs.highlightBlock(this);

});

// 返回 viewer

return viewer;

}

/*

• 控制滚动条

• 使编辑器和预览框同时滚动

• @params {object} editor 编辑器

• @params {object} viewer 预览框

*/

function fixScrollBar(editor, viewer) {

var session = editor.getSession();

// 默认滚动到第一行

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

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