前端实现Markdown编辑器（EpicEditor）

EpicEditor是可嵌入的JavaScript Markdown编辑器，具有全屏拆分编辑，实时预览，自动草稿保存，脱机支持等功能。对于开发人员来说，它提供了一个健壮的API，可以轻松地进行主题化，并允许您将捆绑的Markdown解析器与您扔给它的任何东西交换出去。

官方网站：http://epiceditor.com
GitHub：https://github.com/OscarGodson/EpicEditor
EpicEditor使用起来非常简单，调用只需要一行代码：

var editor = new EpicEditor().load();

具体步骤如下：

1、 下载

从github上下载最新的版本

$ git clone [email protected]:OscarGodson/EpicEditor

目录结构如下：

目录结构

其中index.html就是其官方网站的主页面，我们可以打开这个页面查看EpicEditor的各种文档。

2、 安装

将epiceditor目录拷贝到你的web工程中，例如拷贝到/static/lib/epiceditor。

$ scp -r EpicEditor/epiceditor you@webserver:public_html/static/lib/

3、 创建容器元素

当然也可以打包当前存在的textarea当做容器用来载入EpicEditor。

4、 添加epiceditor.js文件

5、 初始化EpicEditor

EpicEditor需要知道在哪里可以找到其主题，因此需要在初始化时告知它的安装目录。

var editor = new EpicEditor({basePath: '/static/lib/epiceditor'}).load();

最简单的页面源码：

全屏效果

6、 选项

在上面的初始化例子中，只给出了basePath选项，而EpicEditor还提供了很多其他的丰富选项用来修改EpicEditor的主题。

选项	描述	默认
container	您希望编辑器出现在其中的目标容器的ID（字符串）或元素（对象）。	epiceditor
textarea	您要与之同步编辑器内容的文本区域的ID（字符串）或元素（对象）。在页面加载时，如果文本区域中有内容，编辑器将使用该内容作为其内容	null
basePath	包含的目录的基本路径/themes	epiceditor
clientSideStorage	将此设置为false将禁用localStorage	true
localStorageName	用于localStorage对象的名称	epiceditor
useNativeFullscreen	设置为false始终使用仿全屏显示（与不支持的浏览器使用的相同）	true
parser	已标记是EpicEditor内置的唯一解析器，但是您可以通过将解析函数传递给此选项来自定义或切换此解析器。例如： parser: MyCustomParser.parse	marked
focusOnLoad	如果为true，则编辑器将专注于加载	false
file.name	如果不存在使用该名称的文件，则将创建一个新文件，否则将打开现有文件	容器编号
file.defaultContent	要显示的内容，如果文件不存在任何内容。注意：如果使用此textarea选项，则textarea的值将优先于defaultContent
file.autoSave	自动保存文件的频率（以毫秒为单位）。设置为false关闭。	100
theme.base	基本样式，例如带有按钮的工具栏	themes/base/epiceditor.css
theme.editor	编辑器的主题是您键入的区域	themes/editor/epic-dark.css
theme.preview	预览器的主题	themes/preview/github.css
button	如果设置为，false将删除所有按钮	所有按钮均设置为true
button.preview	如果设置为，false将删除预览按钮	true
button.fullscreen	如果设置为，false将删除全屏按钮	true
button.bar	如果true或"show"，任何定义的按钮将始终可见。如果false或"hide"，任何定义的按钮将永远不可见。如果为"auto"，则通常将隐藏按钮，但是只要移动鼠标便会显示	"auto"
shortcut.modifier	按住其他快捷键以触发组合键时按住的键	18（alt键）
shortcut.fullscreen	打开全屏的快捷方式	70（f键）
shortcut.preview	切换预览器的快捷方式	80（p键）
string.togglePreview	悬停在预览图标上时出现的工具提示文本	Toggle Preview Mode
string.toggleEdit	悬停在编辑图标上时出现的工具提示文本	Toggle Edit Mode
string.toggleFullscreen	悬停全屏图标时显示的工具提示文本	Enter Fullscreen
autogrow	是否自动增长EpicEditor以适合其内容。如果需要自动增长，则可以指定true，表示使用默认的自动增长设置，也可以指定一个对象来定义自定义设置	false
autogrow.minHeight	编辑器应缩小到的最小高度（以像素为单位）。如果这不是常数，也可以采用返回期望的minHeight的函数；如果不希望最小值，则返回false值	80
autogrow.maxHeight	编辑器应增长到的最大高度（以像素为单位）。如果这不是常数，也可以采用返回期望的maxHeight的函数；如果不需要最大值，则返回假值	false
autogrow.scroll	自动增长时是否应滚动页面以将插入符号保持在相同的垂直位置（特别推荐用于移动设备）	true

样例：

var opts = {
  container: 'epiceditor',
  textarea: null,
  basePath: 'epiceditor',
  clientSideStorage: true,
  localStorageName: 'epiceditor',
  useNativeFullscreen: true,
  parser: marked,
  file: {
    name: 'epiceditor',
    defaultContent: '',
    autoSave: 100
  },
  theme: {
    base: '/themes/base/epiceditor.css',
    preview: '/themes/preview/preview-dark.css',
    editor: '/themes/editor/epic-dark.css'
  },
  button: {
    preview: true,
    fullscreen: true,
    bar: "auto"
  },
  focusOnLoad: false,
  shortcut: {
    modifier: 18,
    fullscreen: 70,
    preview: 80
  },
  string: {
    togglePreview: 'Toggle Preview Mode',
    toggleEdit: 'Toggle Edit Mode',
    toggleFullscreen: 'Enter Fullscreen'
  },
  autogrow: false
}
var editor = new EpicEditor(opts) .load();