一段markdown编辑器代码研究
一段markdown编辑器代码研究
说明
代码在 https://github.com/dukeofharen/markdown-editor
之所以选择这个来分析是一方面是因为它的代码结构比较简单，易于扩展，可塑性强；另一方面，自己可以跟着教程边做边学，掌握js的相关知识。
以下内容整理自作者写的tutorial
源码文件结构
源代码有4个目录
- css用于存放样式
- html目录下的文件是index.html，是app的主页
- img是一些图片
- js里面放的是js的脚本
此外，还有一个package.json文件，这个文件里面放的是配置信息，在程序运行前nwjs会加载package.json。
先来看js目录
jquery目录保存压缩过的jquery源码。
taboverride.min.js这个不知道是什么，先空着。
editor.js，main.js，menu.js是我们要重点分析的文件。editor.js是编辑器的脚本，main.js是主程序，menu.js是菜单的脚本。
先来看index.html，我截取了最重要的几行代码
...
<script src="../js/jquery/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/main.js"></script>
<script type="text/javascript" src="../js/taboverride/taboverride.min.js"></script>
<script type="text/javascript">
global.window = window;
global.$ = $;
global.gui = require('nw.gui');
init();
</script>
...
前几行加载了需要的js文件，接着在页面里嵌入了几行js代码。
global.window = window;
global.$ = $;
global.gui = require('nw.gui');
第一行代码的意义是将DOM中的窗口对象window存放于global中。
第二行代码是把jquery对象存放在global变量中。
第三行是把nw.js中的gui对象存放在global中。
之所以这样做，是因为node.js的上下文中访问不到这三个对象，所以要把这三个对象存放在一个全局变量中。
最后，调用了main.js中的init()方法。
接下来让我们先来看main.js中的init()方法。
function init(){
var menu = require("./../js/menu.js");
menu.initMenu();
global.$(global.window.document).ready(function(){
var editor = require("./../js/editor.js");
if(global.gui.App.argv.length > 0){
editor.loadFile(global.gui.App.argv[0]);
}
var textEditor = global.$('#editor');
textEditor.bind('input propertychange', function() {
editor.reload();
});
tabOverride.set(global.window.document.getElementsByTagName('textarea'));
});
}
首先init函数加载了menu.js模块。require相当于import，不同的是因为js是动态脚本语言，所以可以用到时再加载。获取menu对象后，调用了menu对象的initMenu方法，初始化菜单栏。
接着，调用jquery选择了window.document用于获取页面，并给ready()函数传入一个回调函数，意义是当页面加载完毕时，执行回调函数里面的内容。所谓回调函数，js的api文档是这么解释的：
A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.
意思就是回调函数是 被作为参数传递给另一个父函数，且在父函数执行完毕后才开始执行的子函数。
那么回到正题来，回调函数里面干了什么事情呢？
1.
var editor = require("./../js/editor.js");
获取一个编辑器对象。
var textEditor = global.$('#editor');
用jquery的选择器选择index.html中id=editor的元素:
<textarea name="markdown" id="editor" class="md_editor"></textarea>
其实就是文本编辑区。
3.
textEditor.bind('input propertychange', function() {
editor.reload();
});
这段代码含义是给文本编辑区绑定一个事件，当检测到文本框内的内容改变时，就调用函数reload()重新渲染右边的预览区。
让我们看看reload函数
exports.reload = function(){
var marked = require("marked");
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false
});
var resultDiv = global.$('.md_result');
var textEditor = global.$('#editor');
var text = textEditor.val();
resultDiv.html(marked(text));
};
1.首先加载marked
2.接着配置markdown解析器。
- gfm:应该是github flavored markdown的缩写
- tables:应该是允许使用表格
剩下的都不知道什么意思。。。
var resultDiv = global.$('.md_result');
从css中选择类.md_result，这个类代表右边渲染出来的html网页。
4.获得文本编辑区的内容
.html是jquery的函数，是对innerHTML的封装，功能是设置或者获取DOM元素内的html内容。
这里我们用marked渲染文本，然后赋值给.md_result类里面的内容。
exports相当于导出功能，使得其他文件可以用到这里面定义的方法。
exports.loadText = function(text){
var textEditor = global.$('#editor');
textEditor.val(text);
exports.reload();
};
loadText完成的功能是，用text替换掉文本编辑区的内容，目前还不支持多文件。
