EpicEditor是可嵌入的JavaScript Markdown编辑器，具有全屏拆分编辑，实时预览，自动草稿保存，脱机支持等功能。对于开发人员来说，它提供了一个健壮的API，可以轻松地进行主题化，并允许您将捆绑的Markdown解析器与您扔给它的任何东西交换出去。
官方网站：http://epiceditor.com
GitHub：https://github.com/OscarGodson/EpicEditor
EpicEditor使用起来非常简单，调用只需要一行代码：
var editor = new EpicEditor().load();
具体步骤如下：
1、 下载
从github上下载最新的版本
$ git clone git@github.com:OscarGodson/EpicEditor
目录结构如下：
目录结构
其中index.html就是其官方网站的主页面，我们可以打开这个页面查看EpicEditor的各种文档。
2、 安装
将epiceditor目录拷贝到你的web工程中，例如拷贝到/static/lib/epiceditor。
$ scp -r EpicEditor/epiceditor you@webserver:public_html/static/lib/
3、 创建容器元素
<div id="epiceditor"></div>
当然也可以打包当前存在的textarea当做容器用来载入EpicEditor。
<div id="epiceditor"><textarea id="my-edit-area"></textarea></div>
4、 添加epiceditor.js文件
<script src="/static/lib/epiceditor/js/epiceditor.min.js"></script>
5、 初始化EpicEditor
EpicEditor需要知道在哪里可以找到其主题，因此需要在初始化时告知它的安装目录。
var editor = new EpicEditor({basePath: '/static/lib/epiceditor'}).load();
最简单的页面源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="epiceditor/js/epiceditor.min.js"></script>
<div id="epiceditor"></div>
<script>
var editor = new EpicEditor({basePath: 'epiceditor'}).load();
</script>
</body>
</html>
全屏效果
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();
网友评论