LIVE DEMO: https://sofish.github.io/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>',
  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']
}

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: 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

Licensed under MIT.