一个简单的，高品质的Markdown编辑器：Editor
一个简单的，高品质的Markdown编辑器：Editor。
Basic Usage
The easiest way to use Editor is to simply load the script and stylesheet:
<link rel="stylesheet" href="http://lab.lepture.com/editor/editor.css" /> <script type="text/javascript" src="http://lab.lepture.com/editor/editor.js"></script> <script type="text/javascript" src="http://lab.lepture.com/editor/marked.js"></script>
You can also use jsdelivr CDN:
<link rel="stylesheet" href="//cdn.jsdelivr.net/editor/0.1.0/editor.css"> <script src="//cdn.jsdelivr.net/editor/0.1.0/editor.js"></script> <script src="//cdn.jsdelivr.net/editor/0.1.0/marked.js"></script>
Having done this, an editor instance can be created:
var editor = new Editor(); editor.render();The editor will take the position of the first <textarea> element.
Get the content
To get back the edited content you use:
editor.codemirror.getValue();Component
If you are using component, you can install it with:
$ component install lepture/editorSeajs
If you are using seajs, you can install it with:
$ spm install lepture/editorDevelopment
You can build the dist files with grunt. After this repo is cloned, dig into the repo, and install everything you need:
$ npm install $ npm install grunt-cli -gNow you can create the dist files:
$ grunt transportYou can get everything you need in the build directory.
Configuration
The Editor Class accepts an option as the parameter. The supported options are:
-
element (DOM)
The element of the textarea. The default value is the first
<textarea>. -
tools (array or false)
If set false, the editor will have no toolbar.
-
status (array or false)
If set false, the editor will have no statusbar.
-
actions (object)
-
shortcuts (object)
Example:
new Editor({ element: '#editor', tools: false })