Pen Editor

LIVE DEMO: http://sofish.github.io/pen
Markdown is supported

1. installation

1.1 init with id attribute

var editor = new Pen('#editor');

1.2 init with an element

var editor = new Pen(document.getElementById('editor'));

1.3 init with options

var options = {
  editor: document.body, // {DOM Element} [required]
  class: 'pen', // {String} class of the editor,
  debug: false, // {Boolean} false by default
  textarea: '<textarea name="content"></textarea>',
  list: ['bold', 'italic', 'underline'] // editor menu list
}

var editor = new Pen(options);

2. configure

The following object sets up the default settings of Pen:

defaults = {
  class: 'pen',
  debug: false,
  textarea: '<textarea name="content"></textarea>',
  list: ['blockquote', 'h2', 'h3', 'p', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'bold', 'italic', 'underline', 'createlink']
}

If you want to customize the toolbar to fit your own project, you can instanciate Pen constructor with an options object like #1.3: init with options:

2.1 Fallback for old browser

You can set defaults.textarea to a piece of HTML string, by default, it's <textarea name="content"></textarea>。This will be set as innerHTML of your #editor.

2.2 Change the editor class

Pen will add .pen to your editor by default, if you want to change the class, make sure to replace the class name pen to your own in src/pen.css.

2.3 Enable debug mode

If options.debug is set to true, Pen will output logs to the Console of your browser.

2.4 Customize the toolbar

You can set options.list to an Array, add the following strings to make your own:

blockquote, h2, h3, p, pre: create a tag as its literal meaning
insertorderedlist: create an ol>li list
insertunorderedlist: create a ul>li list
indent: indent list / blockquote block
outdent: outdent list / blockquote block
bold: wrap the text selection in a b tag
italic: wrap the text selection in an i tag
underline: wrap the text selection in a u tag
createlink: insert link to the text selection

3. markdown syntax support

3.1 install

The syntax covertor will be enabled automaticly by link markdown.js after `pen.js:

<script src="src/pen.js"></script>
<script src="src/markdown.js"></script>

3.2 usage

To use it, you can type action cmd + space key at a line start. like:

### This will create a h3 tag

The following cmds are allowed:

Headings: type 1~6 # at the line start
Unordered List: type - or *
Ordered List: type 1.
Code block: type ```
Block Quote: type >

4. license

Licensed under MIT.

CooHunter/pen