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

You can clone the source code from github, or using bower.

bower install pen

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

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

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>', // fallback for old browsers
  list: ['bold', 'italic', 'underline'] // editor menu list
}

var editor = new Pen(options);

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'
  ],
  stay: true
}

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:

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.

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.

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

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
• inserthorizontalrule: insert a hr tag

By default, Pen will prevent unsafe page redirect when editing, to shut down it, specific options.stay to false.

NOTE: if defaults.debug is set to true and default.stay is not set: defaults.stay == !defaults.debug.

You can disable the pen editor by call destroy() method of the var pen = new Pen(options) object. like:

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

pen.destroy(); // return itself

And, there's a corresponding method called rebuild() to re-enable the editor:

pen.rebuild(); // return itself

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>

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 >
• Horizontal Rule: more than 3 -, *, . will create a <hr />, like ......

Licensed under MIT.