这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/10/29/hexomd-introduction
 

做这个markdown编辑器是因为自己平常用markdown写文档写得比较多,网上找的都不太好用,而且都不支持扩展开发,无法实现自己所需的一些定制化功能.

从今年四月份开始,陆陆续续的利用一些零碎时间做到现在,所需的基本功能都实现了,因此现在写一篇总结把功能介绍一遍.

这个编辑器的主要特色是自动上传图片,文档分享以及导出pdf

功能列表

  • 基本markdown语法
  • 自动更新.
  • 实时预览窗口
  • 编辑器,预览,代码段样式选择和自定义
  • 自动上传图片
  • emoji表情.
  • 导出html,pdf文件.
  • 目录语法
  • 一键文档分享

基本markdown语法

Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)。它允许人们“使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档”。 —— 维基百科

本编辑器的markdown语法基于github的GitHub Flavored Markdown扩展出更多语法,因此基本的语法直接看Github的帮助文档

自动更新

目前提供最新版的下载地址是 v1.0.0.0
第一次使用请直接下载,以后只要点击右上角的按钮就会检查更新,如果有新版本,则会提示是否要更新.

实时预览窗口

系统设置里提供两种方式的预览窗口选择,如图

.

双屏幕的用户可以选择在新窗口打开预览. 编写文档时,预览窗口会实时的更新并滚动到当前编辑位置.
预览窗口可使用按钮切换开关.

样式选择与自定义

如图,可以选择编辑器样式和预览窗口样式以及预览窗口里的代码段样式.
软件预设了一些样式供选择,用户也可以直接编辑样式文件自定义.这3个样式存放的目录分别在软件app目录下的:

编辑器样式: app\lib\codemirror\theme
预览样式目录: \app\css\previewtheme
代码段样式目录: app\node_modules\highlight.js\styles

可以直接修改里面已有的样式,也可以直接新增文件,下拉菜单会自动读取所有样式文件供选择.

云存储配置

由于自动上传图片和一键文档分享需要用到云存储(目前用的是七牛),因此这里先讲下系统设置里的云存储设置.

首先得注册一个七牛帐号.

进入后台,新建二个共享空间,一个用于存储图片,另一个存储共享文档(其实也可以用同一个,看个人习惯)

选择新建的空间,点击空间设置>域名设置,查看自动分配的域名

回到后台首页,点击账号设置,可以查看accessKey(AK)SecretKey(SK)

在系统设置里配置好这几个字段

我把我空间的密钥遮住了,大家请填上自己的空间密钥

自动上传图片

将图片复制到剪贴板后(如qq截图,系统截屏等),直接在编辑器里粘贴图片,会自动将图片上传到配置好的七牛空间里.并在编辑器里填入markdown格式的图片引用,如图

图片名称是随机生成的(目前这样的话,用久了图片很乱,暂时想不到什么好办法可以不牺牲易用性,又方便分类管理图片).
我博客里所有图片都是这样的,写起博客来特方便.

一键文档分享

如果文档里有此格式的标签[SHARE:文件名].
则点击 按钮时,会自动将文档解析成html,并上传到配置好的文档空间,然后在浏览器打开.文件名为标签里指定的文件名.

emoji表情功能.

目前支持此表格里的所有emoji表情.
只要在写文档时,以这种格式 :表情代号:,就会被解析为对应emoji表情.如下面这些表情.
:+1: :shit: :-1: :point_right::ok_hand:
表情代号在上面的表格里查询

导出html,pdf文件功能.

点击可以导出解析好的文档到html或者pdf文件.导出哪种类型,取决于你输入的后缀名(如果为pdf,则导出时需要等待几秒)

目录语法

文档里如果带有TOC标签

1
[TOC]

则会自动将h1~h6标签按嵌套结构解析为目录树,并替换显示在TOC标签位置

备注

开发过程随笔

github地址

用nw.js开发markdown编辑器-已完成功能介绍的更多相关文章

  1. MVC开发Markdown编辑器(2)

    MVC开发Markdown编辑器(2) MVC Markdown 实时预览 我希望实现一个在线实时预览的Markdown编辑器,左边是编辑处,右边是实时预览界面. 准备工作 引入相关js和css 这里 ...

  2. MVC开发Markdown编辑器(1)

    MVC markdown MVC开发Markdown编辑器(1) 前言 安装 解析 结束语 前言 想在近段时间通过mvc开发个人博客,编辑器希望是markdown风格的,这样写文字会很方便.首先先解决 ...

  3. NW.js开发环境的搭建

    写在前面: 之前一直在找关于在mac怎么搭建nw.js的开发环境,苦于自己也没有很深入的理解,其实看看官方文档就差不多知道mac下要怎么整了. 官方文档的图: 正题开始: 先去下载一个nw.js的安装 ...

  4. nw.js开发第一个程序(html开发桌面程序exe)

    一.环境配置 windows系统 cnpm install node 下载nw.js https://github.com/nwjs/nw.js 找到download下载合适的版本 二.开发 项目目录 ...

  5. editormd实现Markdown编辑器写文章功能

    想在项目里引入Markdown编辑器实现写文章功能,网上找到一款开源的插件editormd.js 介绍网站:https://pandao.github.io/editor.md/examples/in ...

  6. HarmonyOS三方件开发指南(14)-Glide组件功能介绍

    <HarmonyOS三方件开发指南>系列文章合集 引言 在实际应用开发中,会用到大量图片处理,如:网络图片.本地图片.应用资源.二进制流.Uri对象等,虽然官方提供了PixelMap进行图 ...

  7. 夺命雷公狗---微信开发55----微信js-sdk接口开发(2)接口功能介绍之签名算法

    我们JS-SDK里面其实有不少的接口 startRecord---录音 stopRecord---停止录音 playVoice---播放 pauseVoice---暂停播放 uploadImage-- ...

  8. mfc小工具开发之定时闹钟之---功能介绍

    使用背景: 之前在xp上用过飞雪日历,感觉挺好用的,还有在音频上的兴趣,促使了我也要自己做一个简单的定时闹钟. 之前开发过图片格式的小工具,没来的急分享,后期整理后,一块奉上,写这篇介绍的时候已近完成 ...

  9. Sublime Text 开发神器相关 插件安装 功能介绍

    无法安装更多见http://blog.csdn.net/freshlover/article/details/44261229/ Sublime Text 3 安装插件管理 Package Contr ...

随机推荐

  1. 大数据技术之_16_Scala学习_06_面向对象编程-高级+隐式转换和隐式值

    第八章 面向对象编程-高级8.1 静态属性和静态方法8.1.1 静态属性-提出问题8.1.2 基本介绍8.1.3 伴生对象的快速入门8.1.4 伴生对象的小结8.1.5 最佳实践-使用伴生对象解决小孩 ...

  2. 学习LSM(Linux security module)之四:一个基于LSM的简单沙箱的设计与实现

    嗯!如题,一个简单的基于LSM的沙箱设计.环境是Linux v4.4.28.一个比较新的版本,所以在实现过程中很难找到资料,而且还有各种坑逼,所以大部分的时间都是在看源码,虽然写的很烂,但是感觉收获还 ...

  3. Xamarin.Forms使用Slider注意问题

    Xamarin.Forms使用Slider注意问题   Xamarin.Forms中,Slider用来构建滑块控件.其中,Minimum表示最小值,Maximum表示最大值.如果Minimum大等于1 ...

  4. HTTP状态代码集

    所有 HTTP 状态代码及其定义.   代码  指示     2xx  成功     200  正常:请求已完成.     201  正常:紧接 POST 命令.     202  正常:已接受用于处 ...

  5. [BZOJ4316]小C的独立集(圆方树DP)

    题意:求仙人掌图直径. 算法:建出仙人掌圆方树,对于圆点直接做普通的树上DP(忽略方点儿子),方点做环上DP并将值直接赋给父亲. 建图时有一个很好的性质,就是一个方点在邻接表里的点的顺序正好就是从环的 ...

  6. [BZOJ4367][IOI2014]Holiday(决策单调性+分治+主席树)

    4367: [IOI2014]holiday假期 Time Limit: 20 Sec  Memory Limit: 64 MBSubmit: 421  Solved: 128[Submit][Sta ...

  7. POJ 1180 Batch Scheduling(斜率优化DP)

    [题目链接] http://poj.org/problem?id=1180 [题目大意] N个任务排成一个序列在一台机器上等待完成(顺序不得改变), 这N个任务被分成若干批,每批包含相邻的若干任务. ...

  8. Exercise03_02

    import java.util.Scanner; public class AdditionQuiz { public static void main(String[] args){ int nu ...

  9. Scala实战高手****第16课:Scala implicits编程彻底实战及Spark源码鉴赏

    隐式转换:当某个类没有具体的方法时,可以在该类的伴生对象或上下文中查找是否存在隐式转换,将其转换为可以调用该方法的类,通过代码简单的描述下 一:隐式转换 1.定义类Man class Man(val ...

  10. LVS+Keepalived实现高可用

    http://blog.chinaunix.net/uid-16723279-id-3651396.html