电脑教程子分类好用的Markdown编辑器一览
Markdown 是一种简单的、轻量级的标记语法。用户可以使用诸如 * # 等简单的标记符号以最小的输入代价生成极富表现力的文档。 Markdown具有很多优点： 写作中添加简单符号即完成排版，所见即所得。让你专注于文字而不是排版。 格式转换方便，Markdown 的文本你可以轻松转换为 html、pdf等。 可以保存称纯文本 支持Markdown的编辑器太多，功能也不完全一致，有的是用来进行基本的写作，有的是用来写代码的，有的甚至只是博客平台配套的编辑器。本文按照编辑器的平台进行简单的介绍。 在线的Markdown编辑器 &漂亮强大，支持md, html, pdf 文件导出。支持dropbox, onedrive，google drive, github. 来自国外，可能不够稳定。
&小众软件推荐，界面有些简陋
&一个很不错的博客平台，每几秒钟便会自动存入一个备份。可以直接从本地拖入照片生成链接，一直在不断优化。作为一个博客平台，需要注册账号后方能进行写作。
&和&&也有web版，下文有介绍。 Chrome 插件 &中文名，因为印象笔记不支持Markdown，而这款可以直接把文本存到印象笔记的编辑器对于重度印象笔记用户是个不错的选择。付费软件，可以免费试用。 支持多平台 &一个支持Markdown写作语法的博客平台，让用户通过Dropbox（现在默认是自己的同步服务器）直接建立个人网站。FarBox编辑器免费，支持多平台（无web版，Linux版停止维护），个人认为是Windows平台最优雅的编辑器。多说一句，Farbox服务可以免费试用，在本地编辑器内写作自动同步发布在个人博客，对像笔者这样希望有个人博客但却不愿折腾的小白来说，是个不错的选择。
&作业部落出品，也是一款不错的工具和博客平台兼顾的产品。全平台且提供web版
&全平台覆盖并且有web版
&界面简约大方，定位专业。可以免费试用，价格稍贵，70美元
&github出的编辑器；功能十分强大，支持各种编程语言；安装后会在添加右键菜单，图标丑；全平台，程序猿专用
Windows平台编辑器 &一款全功能的编辑器，被很多人称赞为windows 平台最好用的markdown编辑器
&功能完备；长相一般，隐藏菜单栏后也算简约。有Windows 和Linux版本。目前已开源，不再更新。
&一款模仿mou 的windows平台markdown编辑器，小众推荐，必属精品，官网无法打开，好在小众提供了百度云下载。界面美观，功能不够成熟
OS X平台 没有Mac 没有试用，也就不做太多评价，下面整理了最受好评的几个。 &似乎提到 Mac 和 MD ,接下来的词一定是Mou，因为他们是一个姓么
&有出Windows 和Linux版本的计划
&支持OS X, iOS 售价78元
&支持OS X , iOS 及Android，未优化中文显示，知乎此中很多人认为 Byword比 iA 好 。售价68，pro版本128元
&支持OS X , iPad, 少数派有一篇专门的介绍，售价 283元
&少数有关于派测评：&，售价128元。
关于优劣，&在知乎上的一个中有简单介绍，有兴趣的可以去看看。 价格因素也是值得考虑的 少数派推荐了&（和上面介绍的七款不完全重合），也有不少介绍Mac上这些软件的，能让大家有个简单了解，需要注意饱含溢美之词是少数派的一贯风格，还是自己亲自试试几款的好。& Linux平台 用Linux的程序员根本就不屑于看这种文章。 还有开源软件&,&&等 One More 因为每个软件定位不同，关于能否具有导出多种格式，导出效果，界面是否优雅，功能是否够多等，没有进行很细致的说明，大家可以选择有兴趣的几款进行试用。 如果你是MD狂魔，可以去关注知乎上的。（好像MD本身就很小众了....） 来源：马辉 Bates.Ma投稿。原文发表在个人知乎专栏，若采用请注明作者。
除非注明，文章均为原创，转载请以链接形式标明本文地址
本文地址：
除了苹果系的软件没用过，其他软件都试用过一段时间，感觉里面的小书匠编辑器真是神器啊，还支持evernote，github等的绑定操作。
没提及iOS平台的day one啊，30元呢～没见大锤买过，估计等不来限免?界面比简书强很多！
.linux内核学习
atom很支持这个！
截图好像是某博客后台编辑器
印象笔记原生的不支持markdown，最大的缺点。 于
14:37:19 回复[/REVERT][REVERT= 于
14:37:33 回复][REVERT= 于
14:49:12 回复][/REVERT]
遇到插入表格比较痛苦。
.光阴冢里的伯劳
win上的cutemarked免费，用起来也不错
.Tokyo樱桃大丸子
CSDN using？！
EverEdit也支持markdown
为知笔记也支持
Windows平台编辑器:Haroopad.韩国人?的产品,很不错.虽然目前没更新,不过还是在收集意见的
文中提到的 Windows 和 Web 平台的 Markdown 编辑器差不多都有体验过，国内的 MD 编辑器缺省的样式美观程度还有待提高。目前在 Windows 平台使用 MarkdownPad 并设置 GitHub 样式，能够得到和推送至 GitHub 后一样的视觉效果。在 Web 平台推荐马克飞象，马克飞象支持自定义样式，每年79元的价格也可以接受，其开发者在 Chrome 扩展中心活跃，修复 bug 及时。另外，Web 平台还推荐 https://stackedit.io 样式简约，支持同步、导出导入、分享链接等功能，付费软件。此外，为知笔记支持 Markdown 文档和 Windows / Linux / Web 等多个平台。carbon 于
7:58:27 回复stackedit 是开源的呀。
有的 #标题 会自动加横线 有的不加 怎么不统一呢？
.你这个叛徒你才是叛徒
月光哪家大厂商泄漏密码了？？？？赶紧爆料啊！！！！！
Typed 少数有关于派测评：情怀与功能不可兼得，极简 Markdown 写作软件： Typed ，售价128元。 码字有问题~~~ PS，既然Evennote 和 Onenote 都有不错的编辑功能，为什么还要用到 Markdown，这是我一直没想明白的。 PS1，Onenote 挺好用的。
.你见过一碗幺吗
FarBox免费了？UneeWang 于
10:30:21 回复他说的是farbox editor这个软件免费，不是说farbox这个服务免费
作业部落的mk是我用过的最好的在线+客户端mk编辑器，没有之一。
赞助商广告
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享. 转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议.atom编辑器的使用和markdown基本语法 - 简书
下载简书移动应用
写了9761字，被14人关注，获得了22个喜欢
atom编辑器的使用和markdown基本语法
atom编辑器的使用和markdown基本语法
atom是什么
Atom是github内部的编辑软件，据说已经使用了6年之久。按照atom的博客：
Our goal is a zero-compromise combination of hackability and usability: an editor that will be welcoming to an elementary school student on their first day learning to code, but also a tool they won't outgrow as they develop into seasoned hackers.
atom的优势
textmate/sublime text提供了受限的扩展性；而vim/emacs扩展性很好，但编写扩展需要特定的scripting language。atom想做成一款初学者和Hacker都会喜欢，随着他们能力增长而增长的编辑器。
atom常用功能
按下Ctrl + Shift + P可以呼出Panel对话框
在这里可以进行查找帮助信息及安装Packages或者Themes等
在Sublime Text很多配置只能靠手工输入和调整。而在Atom，好像所有的设置都可以通过设置面板来更改配置，下面是设置面板的基本界面：
在这里，你可以很方便地配置如下配置项
字体和大小
你可以在设置界面中修改 Atom 的主题，Atom 内建了 4 个不同的 UI 主题，分别是亮色和暗色版本的名为 Atom 和 One 的主题。以及 8 个不同的语法着色主题。你可以通过点击左边栏的 Themes 选项卡来改变当前主题，或安装新的主题。
UI 主题会修改标签栏、左侧目录树（tree view）等 UI 元素的颜色；而语法着色主题修改编辑器中文字的语法高亮方案。你只需要简单地在下拉框中选择另一项，即可修改主题。
在 Atom.io 上有数十种主题供你选择，如果你想要一个独一无二的主题，我们也在 Basic Customization8 中介绍了如何自定义主题，还在 Creating a Theme4 中介绍了如何创建一个主题。
Atom与Sublime Text的很多快捷键都是相同的,你可以在Settings查看具体的快捷键：
对于Atom的Package管理来说，提供了一个内置的包管理工具，允许你扩展编辑器的功能。
这类似于Sublime的Package Control，但与之不同的时这个包管理工具以及内置在编辑器里面了，不需要另外执行一段代码来安装。
安装一个包非常简单，只需要点击Install按钮即可。编辑器还提供了搜索功能，还有一些推荐安装的包。
以上是atom编辑器的基本介绍和一些常用功能，更多资料详见后面的参考文档。
Markdown 的目标是实现「易读易写」。
Markdown 的语法全由一些符号所组成，这些符号经过精挑细选，其作用一目了然。比如：在文字两旁加上星号，看起来就像强调。Markdown 的列表看起来，嗯，就是列表。Markdown 的区块引用看起来就真的像是引用一段文字，就像你曾在电子邮件中见过的那样。
Markdown 支持两种标题的语法，类
类 Setext 形式是用底线的形式，利用 = （最高阶标题）和 - （第二阶标题），例如：
This is an H1
=============
This is an H2
-------------
任何数量的 = 和 - 都可以有效果。
类 Atx 形式则是在行首插入 1 到 6 个 # ，对应到标题 1 到 6 阶，例如：
## 这是 H2
###### 这是 H6
区块引用 Blockquotes
Markdown 标记区块引用是使用类似 email 中用 & 的引用方式。如果你还熟悉在 email 信件中的引言部分，你就知道怎么在 Markdown 文件中建立一个区块引用，那会看起来像是你自己先断好行，然后在每行的最前面加上 & ：
& This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
& consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
& Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
& Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
& id sem consectetuer libero luctus adipiscing.
Markdown 也允许你偷懒只在整个段落的第一行最前面加上 & ：
& This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
& Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
Suspendisse id sem consectetuer libero luctus adipiscing.
区块引用可以嵌套（例如：引用内的引用），只要根据层次加上不同数量的 & ：
& This is the first level of quoting.
& This is nested blockquote.
& Back to the first level.
引用的区块内也可以使用其他的 Markdown 语法，包括标题、列表、代码区块等：
& ## 这是一个标题。
这是第一行列表项。
这是第二行列表项。
& 给出一些例子代码：
return shell_exec("echo $input | $markdown_script");
任何像样的文本编辑器都能轻松地建立 email 型的引用。例如在 BBEdit 中，你可以选取文字后然后从选单中选择增加引用阶层。
Markdown 支持有序列表和无序列表。
无序列表使用星号、加号或是减号作为列表标记：
也等同于：
有序列表则使用数字接着一个英文句点：
如果要在列表项目内放进引用，那 `&`` 就需要缩进：
A list item with a blockquote:
& This is a blockquote
& inside a list item.
和程序相关的写作或是标签语言原始码通常会有已经排版好的代码区块，通常这些区块我们并不希望它以一般段落文件的方式去排版，而是照原来的样子显示，Markdown 会用 &pre& 和 &code& 标签来把代码区块包起来。
要在 Markdown 中建立代码区块很简单，只要简单地缩进 4 个空格或是 1 个制表符就可以，例如，下面的输入：
这是一个普通段落：
这是一个代码区块。
一个代码区块会一直持续到没有缩进的那一行（或是文件结尾）。
你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：
---------------------------------------
Markdown 支持两种形式的链接语法： 行内式和参考式两种形式。
不管是哪一种，链接文字都是用 [方括号] 来标记。
要建立一个行内式的链接，只要在方块括号后面紧接着圆括号并插入网址链接即可，如果你还想要加上链接的 title 文字，只要在网址后面，用双引号把 title 文字包起来即可，例如：
This is [an example](/ "Title") inline link.
[This link](http://example.net/) has no title attribute.
如果你是要链接到同样主机的资源，你可以使用相对路径：
See my [About](/about/) page for details.
参考式的链接是在链接文字的括号后面再接上另一个方括号，而在第二个方括号里面要填入用以辨识链接的标记：
This is [an example][id] reference-style link.
你也可以选择性地在两个方括号中间加上一个空格：
This is [an example] [id] reference-style link.
接着，在文件的任意处，你可以把这个标记的链接内容定义出来：
"Optional Title Here"
下面是一个参考式链接的范例：
I get 10 times more traffic from [Google] [1] than from
[Yahoo] [2] or [MSN] [3].
"Yahoo Search"
"MSN Search"
如果改成用链接名称的方式写：
I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].
[google]: /
"Yahoo Search"
"MSN Search"
Markdown 使用星号（*）和底线（_）作为标记强调字词的符号，被
或 _ 包围的字词会被转成用
标签包围，用两个
或 _ 包起来的话，则会被转成 &strong&，例如：
*single asterisks*
_single underscores_
**double asterisks**
__double underscores__
如果要标记一小段行内代码，你可以用反引号把它包起来（`），例如：
Use the `printf()` function.
如果要在代码区段内插入反引号，你可以用多个反引号来开启和结束代码区段：
``There is a literal backtick (`) here.``
代码区段的起始和结束端都可以放入一个空白，起始端后面一个，结束端前面一个，这样你就可以在区段的一开始就插入反引号：
A single backtick in a code span: `` ` ``
A backtick-delimited string in a code span: `` `foo` ``
在代码区段内，& 和尖括号都会被自动地转成 HTML 实体，这使得插入 HTML 原始码变得很容易，Markdown 会把下面这段：
Please don't use any `&blink&` tags.
你也可以这样写：
`—` is the decimal-encoded equivalent of `&`.
很明显地，要在纯文字应用中设计一个「自然」的语法来插入图片是有一定难度的。
Markdown 使用一种和链接很相似的语法来标记图片，同样也允许两种样式： 行内式和参考式。
行内式的图片语法看起来像是：
详细叙述如下：
一个惊叹号 !
接着一个方括号，里面放上图片的替代文字
接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上 选择性的 'title' 文字。
参考式的图片语法则长得像这样：
![Alt text][id]
「id」是图片参考的名称，图片参考的定义方式则和连结参考一样：
[id]: url/to/image
"Optional title attribute"
到目前为止， Markdown 还没有办法指定图片的宽高，如果你需要的话，你可以使用普通的&img&标签。
本地图片上传
上传图片，点击markdown，粘贴到markdown文档即可
GitHub用"GitHub Flavored Markdown"，简称GFM。它广泛应用在site--in issues, comments, 以及pull requests.它和标准的Markdown有一些区别，并添加了一些额外的功能。
与标准Markdown的区别
标准Markdown将含有下划线的单词转成斜体字，而GFM忽略单词中的下划线。
GFM增加了删除线
~~Mistaken text.~~
显示为：Mistaken text.
如果有一整块代码需要包围， 可以使用```例如：
代码块可以使用语法高亮了！！在你的代码块中添加一个可选的语言标识符,我们会通过语法高亮显示运行它。例如，为了语法高亮ruby代码：
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
Github使用来实现语言检测和语法高亮。你可以通过阅读来获取有效的语法高亮关键字。
你可以创建表格，通过符号-分开第一行和其他行，通过|分开各个列
First Header
| Second Header
------------- | -------------
Content Cell
| Content Cell
Content Cell
| Content Cell
在标题行包含:，你可以使得表格向左对齐，向右对齐，居中
| Left-Aligned
| Center Aligned
| Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is
| some wordy text | $1600 |
| col 2 is
| centered
| zebra stripes | are neat
A colon on the left-most side indicates a left- a colon on the right-most side indicates a right- a colon on both sides indicates a center-aligned column.:在最左边表示左对齐，:在最右边表示右对齐，左右两边都有:表示居中。
GFM增加了一些很好的特性， 使得功能更加强大。
使用atom编辑markdown文本
atom编辑器支持markdown文本的预览(需要安装markdown preview插件，默认已安装),编辑文本的时候，快捷键ctrl-shift-M
即可打开markdown preview功能；markdown preview插件信息可通过File-&Settings-&Filter packages输入框输入markdown preview-&keybindings
atom使用参考资料
markdown 语法说明
一些markdown工具
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
· 2人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：Node-webkit写的桌面markdown编辑器 - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
前段时间写的一个东西，目前只支持windows平台，偷个懒 ，，直接从github把介绍贴上来 :D
欢迎试用啊~~
###Rock! MarkDown是什么
实现，快速的markdown文档编辑器
###Rock! MarkDown有哪些功能
编辑和预览，所见即所得，Ctrl+F12快速浏览器预览
N多的快捷键，快速写文档，让时间飞一会儿
多标签功能，N多文档不用愁
便利地工具栏，忘记markdown格式也不怕
支持webstorm风格的部分常用快捷键
方便的导入导出功能
将.markdown .md .txt格式的文件拖到编辑器即可
将当前内容导出为一个HTML文件
邮件发送功能，直接将HTML内容发送到指定邮箱
自动记忆记住上次退出时的状态
完整的历史记录功能
无任何依赖环境，直接安装即可运行
更多功能开发中 …
最新版本：Beta V0.1.2
Windows 32bit: (推荐)
PS：以上32位版本，在64位系统上测试通过是可以使用的，不过不排除某些情况下失效，原因未知。
另外，如果你使用的时候，正好又在逛淘宝，正好又安装了360等安全软件，可能会报提示说程序有风险，建议关闭之类的，请忽略之
这个赞的～
不过木有Linux版QAQ
话说这个应该是可以跨平台的额…
我勒个擦，碉堡了，学习下，mark
嗯 node-webkit本身是跨平台的， 后续可能会出一个linux版本~~
推荐一个基于node-webkit 的markdown编辑器…
=。= 谢谢~
看了下，不错的，有很多的东西可以借鉴~
不过，貌似没有开源啊
很早以前的版本开源过…不过,现在貌似不开了…
找到它的仓库了
最新版本不放到仓库了…仓库那个貌似是 0.3的时候…
0.0 果真是， 这帮魂淡~
Excellent!
可以用在网站里面写博客的吗
只有桌面版的吗
你是想用markdown写文章么
或者 等markdown解释库，如果你用wordpress写博客，也有插件的
很好的参考价值，最近也在搞node-webkit，希望楼主提供一个简单的项目，把整体框架给搭建出来，对于我们这边的新手学习起来就更加快啦
官方提供了几个有参考价值的demo，可以看看
64位的win8下，一直在转圈，进不去
请问只用了html+css+js吗？ 如何打包exe呢？
提取码是什么呢
提取码是：8b68，360云盘近期貌似对所有分享默认都加上了提取码
阿里的同学？
一直觉得MarkDown最纠结的就是图片的链接和表格。对了，如果支持css挺不错的
Node还能做桌面程序？
上面下载URL已失效 … 新的下载地址是
提取码8b68
node本身不能，node-webkit可以，几乎node的方法都能用上，以及你所了解的几乎所有web技术，坛子已经有不少介绍帖了 …
嗯，再过段时间就是了 …
涨姿势了，目前还在学习Node阶段，以后有空了研究研究node-webkit
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的自己动手开发更好用的markdown编辑器-01 - 推酷
自己动手开发更好用的markdown编辑器-01
前段时间用hexo重新搭了个人博客，顺便写了个简单的博客搭建教程.
写起博客流畅很多，但是用了几个markdown编辑器，都没有一个适合自己使用的。于是就想自己动手做一个，当然不是完全从0开始做，语法高亮和markdown解析都用的是开源的项目.
从这篇开始，我会把整个开发过程记录成系列随笔,因此开发进度较为缓慢.
博客写得少,像这样写长一点的随笔就有点混乱,看不懂的请用力喷,我会努力改进.
先介绍下开发过程中用到的一些比较重要的开源项目：
,原名node-webkit，用webkit和node来做基于web技术的跨平台客户端软件.
CodeMirror,基于web技术实现的文本编辑器，实现了大部分的IDE功能以及几乎全部你会用到的语言的支持.目前我日常开发都是用这个IDE,甚至在做hexomd这个项目时用的IDE也是CodeMirror做的.
angularjs,google的mvvm开发框架,这个相信不用我多做介绍.我用的不熟,觉得好用就拿来即用,没有深入的了解过.
关于这些开源项目的使用，我在这系列文章里不会详细解释，如果有疑问，可以去看官网的入门教程和wiki，当然也欢迎讨论.
图片里的是我目前的项目结构，大概讲解一下一些目录和文件的用途。
icudtl.dat , nw.exe , nw.pak
这3个是nw.js在windows运行所必须的文件.
package.json
nw.js的配置文件
&name&: &HexoMD&,
&description&: &Markdown for hexo&,
&main&: &app/index.html&,//程序入口页面
&author&: &&,
&license&: &MIT&,
&directories&: {
&test&: &no&
&devDependencies&: {},
//窗口配置
&window&: {
&title&: &HexoMD&,
&icon&: &app/img/logo.png&, //logo
&toolbar&: true, //是否显示地址栏工具条(调试的时候启用)
&frame&: false, //是否显示程序边框
&width&: 1000, //默认宽度
&height&: 700, //默认高度
&position&: ¢er&, //启动时在屏幕中的位置
&min_width&: 600, //最小宽度
&min_height&: 400 //最小高度
程序的所有源代码的根目录.
存放angular,jquery,codemirror等开源库/框架的源代码
app/helpers
存放一些node的工具函数
app/modules
程序代码在这个目录,按功能模块分成不同的子目录.
modules/app.js 是整个程序的入口点
app/package.json
node模块配置,注意与上层的package.json意义不同
app/index.html
程序的主界面窗口
程序主界面
&!DOCTYPE html&&html lang=&en&&&head&
&meta charset=&utf-8&&
&title&Hexo Markdown&/title&
&link href=&css/bootstrap.css& rel=&stylesheet&&
&link href=&lib/codemirror/lib/codemirror.css& rel=&stylesheet& /&
&link href=&css/index.css& rel=&stylesheet&&&/head&&body&
&!--导航栏--&
&nav class=&navbar navbar-inverse navbar-fixed-top&&
&!--模块视图区域--&
&article class=&container app& ui-view ng-animate=&'view'&&&/article&
&!--工具栏--&
&footer class=&tool&&&/footer&
&!--end codemirror--&
&script src=&lib/jquery-2.1.3.js&&&/script&
&script src=&lib/angular.js&&&/script&
&script src=&lib/angular-ui-router.js&&&/script&
&!--程序入口函数--&
&script src=&modules/app.js&&&/script&
//初始化angular,hmd为自定义的根模块名
angular.bootstrap($('body'), ['hmd']);
&/script&&/body&&/html&
只贴出部分代码.以后的所有代码也类似,都只会把重要的贴出来,并给出完整的链接.
界面采用比较简洁的三栏布局,分别为 导航栏 、 内容区 、 状态栏/工具条 .
最顶部的地址栏只有在开发的时候为了方便调试才开启,发布时会关闭掉.
为了美观,我们在配置里去掉了系统自带的边框.因此要实现自定义的拖动窗口功能还需要增加一些设置.所谓的设置,其实只要加上对应的样式即可,功能都由nw.js实现了.
-webkit-app-region: drag;}
带有此样式的元素可以作为窗口的拖拽区域,并且双击时最大化/还原窗口.
.navbar .navbar-collapse a {
-webkit-app-region: no-drag;}
被标志为可 drag 的容器里的链接将不可点击,因此要特别为链接加上 no-drag
另外为了让程序看起来更像客户端一点,我默认禁用掉了文本选择,防止一些被作为按钮的a标签的文本被选中
height: 100%;
-webkit-user-select: none;}
作为程序的入口点,定义了整个项目代码的结构,需要特别拿出来说明一下.
angular.module('hmd', ['ui.router','hmd.studio'])
定义angular模块, modules 所有的业务模块都会放到单独的子目录里,如这里注册的 hmd.studio
//模块根目录var baseModuleDir = './app/modules/'; //引入模块,模块内js文件会被自动加载到页面中 hmd.regModule = function (name, reqModule) {
hmd[name] = angular.module('hmd.' + name, reqModule || []);
hmd[name].moduleName = name;
//模块存储数据的目录
hmd[name].dataPath = hmd.storeDir + '\\' + hmd[name].moduleN
fs.readdirSync(baseModuleDir + name)
.forEach(function (file) {
if (~file.indexOf('.js')) {
document.write('&script src=&modules/' + name + '/' + file + '&&&/script&');
regModule 方法实现最简单的模块载入,自动加载模块内的所有脚本到页面中,并为每个模块赋予一个单独的数据存储目录 dataPath
hmd.storeDir =
require('nw.gui').App.dataP
程序的数据存储目录
导航栏按钮
导航栏右边有4个按钮,分别为: 检查更新 、 最小化 、 最大化 、 关闭
...&!--导航栏功能按钮--&&div class=&btn-group window-tool&&
&a class=&btn rectbtn& href=&javascript://& title=&点击检查更新&&
&i class=&glyphicon
mdfi_action_system_update_tv&&&/i&&/a&
&a class=&btn rectbtn& href=&javascript://&&&i class=&glyphicon glyphicon-minus&&&/i&&/a&
&a class=&btn rectbtn& href=&javascript://&&&i class=&glyphicon glyphicon-fullscreen&&&/i&&/a&
&a class=&btn rectbtn& href=&javascript://&&&i class=&glyphicon glyphicon-remove&&&/i&&/a&&/div&...
检查更新等以后再实现.现在先实现后面3个功能
因为这3个功能是全局的,因此在modules根目录新建 directives.js 用于实现全局的
(function () {
var gui = require('nw.gui'), win = gui.Window.get(),winMaximize = false;
angular.module('hmd.directives', [])
//最小化窗口
.directive('hmdMinisize', [function () {
return function (scope, elem) {
$(elem[0]).on('click', function () {
win.minimize();
//最大化与还原窗口
.directive('hmdMaxToggle', [function () {
return function (scope, elem) {
//窗口最大化和还原时会触发对应的事件,在事件里去控制按钮样式.
//TODO:这里的实现应该可以优化得更优雅一点,以后再说
win.on('maximize', function () {
winMaximize = true;
$(elem[0]).find('i').removeClass('glyphicon-fullscreen').addClass('glyphicon-resize-small');
win.on('unmaximize', function () {
winMaximize = false;
$(elem[0]).find('i').removeClass('glyphicon-resize-small').addClass('glyphicon-fullscreen');
//切换窗口状态
$(elem[0]).on('click', function () {
if (winMaximize) {
win.unmaximize();
win.maximize();
//关闭应用程序
.directive('hmdClose', [function () {
return function (scope, elem) {
$(elem[0]).on('click', function () {
require('nw.gui').Window.get().close();
定义了全局directive模块 angular.module('hmd.directives', []) ,实现了3个 Directive .
接下来将directive应用到按钮上
...&a class=&btn rectbtn& href=&javascript://& hmd-minisize&&i class=&glyphicon glyphicon-minus&&&/i&&/a&&a class=&btn rectbtn& href=&javascript://& hmd-max-toggle&&i class=&glyphicon glyphicon-fullscreen&&&/i&&/a&&a class=&btn rectbtn& href=&javascript://& hmd-close&&i class=&glyphicon glyphicon-remove&&&/i&&/a&...
将脚本引用 &script src=&modules/directives.js&&&/script& 添加到 index.html 的app.js之后
app.js里的angular模块注册里增加hmd.directives模块 angular.module('hmd', ['ui.router','hmd.directives','hmd.studio'])
刷新程序,三个按钮已经生效.
实现简单的markdown编辑器
先在页面添加相应的codemirror脚本引用
... &footer class=&tool&&&/footer& &!--codemirror--& &script src=&lib/codemirror/lib/codemirror.js&&&/script& &script src=&lib/codemirror/addon/mode/overlay.js&&&/script& &script src=&lib/codemirror/addon/edit/continuelist.js&&&/script& &script src=&lib/codemirror/mode/markdown/markdown.js&&&/script& &script src=&lib/codemirror/mode/gfm/gfm.js&&&/script& &!--end codemirror--& &script src=&lib/jquery-2.1.3.js&&&/script& ...
然后在 modules 目录下新增 studio 子目录,所有编辑器功能都在这个模块里实现.
在 app.js 里增加加载 studio 模块的代码
hmd.regModule('studio');
每个子模块一般都会包含 route.js , controllers.js , directive.js 这三个基本的angular功能.以及 views 子目录,用于存放模块用到的html视图
studio 模块多了一个 editor.js ,我们将编辑器的一些基本功能封装在这个脚本里
hmd.studio.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('studio', {
url: &/studio&,
templateUrl: &modules/studio/views/studio.html&,
controller: 'studio'
修改 app.js ,将默认路由指定到 /studio 模块
hmd.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise(&/studio&);});
实现controller
var studio = hmd.studio
.controller('studio', function ($scope, $state, $stateParams) {
console.log('stuido controller');
添加视图模版
&div class=&content studio-wrap&&
&textarea name=&& cols=&30& rows=&10&&&/textarea&&/div&
重新打开应用,可以看到模块跳到了studio路由,并且执行了对应的控制器
实现editor
var util = require('./helpers/util');var defaultConfig = {
theme: 'ambiance',
mode: 'gfm',
lineNumbers: false,
extraKeys: {&Enter&: &newlineAndIndentContinueMarkdownList&},
dragDrop: false,
autofocus: true,
lineWrapping: true,
foldGutter: true,
styleActiveLine: true};hmd.editor = {
init: function (options,filepath) {
var el = options.el,txt,me = this;
options = $.extend({}, defaultConfig, options);
//编辑器样式文件动态加载,用于以后增加样式选择功能
if(options.theme != 'default'){
$('head').append('&link href=&lib/codemirror/theme/'+options.theme+'.css& rel=&stylesheet& /&');
this.cm = this.cm || CodeMirror.fromTextArea(el, options);
//指定要打开的文件,如果未指定,则保存时会弹出文件选择对话框
filepath && this.setFile(filepath);
//编辑器内容修改时触发change事件
this.cm.on('change', function (em, changeObj) {
me.hasChange = true;
me.fire('change', {
changeObj: changeObj
//绑定按键
this.cm.addKeyMap({
&Ctrl-S&: function () {
me.save();
//设置当前文件
setFile:function(filepath){
var txt = util.readFileSync(filepath);
this.filepath =
this.cm.setValue(txt);
//弹出保存文件对话框
saveAs:function(){
hmd.msg('保存新文件');
//保存文件
save: function () {
var txt = this.cm.getValue();
if(this.filepath){
util.writeFileSync(this.filepath, txt);
this.hasChange = false;
var fileNameArr = this.filepath.split('\\');
hmd.msg('文件:' + fileNameArr[fileNameArr.length - 1] + '保存成功!');
this.fire('save');
this.saveAs();
events: {},
fire: function (eventName, obj) {
var me = this;
this.events[eventName] && this.events[eventName].forEach(function (fn) {
fn.call(me,obj);
on: function (eventName, fn) {
this.events[eventName] = this.events[eventName] || [];
this.events[eventName].push(fn);
我们将编辑器的实现封装在 hmd.editor 这个对象上.
编辑器的模式设置为
实现directive
var studio = hmd.
studio.directive('hmdEditor', function () {
return function ($scope, elem) {
//第二个参数为测试用的本地md文件,因为选择文件的功能还没实现.你可以改成你电脑上的文件.
hmd.editor.init({el:elem[0]},'E:\\Temp\\test\\test.md');
定义了 'hmd-editor ,用于绑定hmd.editor的调用.
在视图模版里调用 hmd-deitor
&div class=&content studio-wrap&&
&textarea name=&& cols=&30& rows=&10& hmd-editor&&/textarea&&/div&
刷新应用,可以看到textarea已经变成markdown编辑器,按 ctrl+s 保存会有简单的提示.
到目前为止,只是搭建了开发环境,实现了基础的编辑器功能,还完全不能真正的使用.接下来几篇暂定计划是:
打开文件,保存新文件,系统设置等基本功能.
自动更新功能.
实时预览窗口.
自动上传图片.
集成hexo命令.
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致
