没啥用的纯前端打造一个实时 markdown 编辑器(1)

下面我们来编写解析 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();

// 默认滚动到第一行

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);

});

}

---

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

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