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
linksInNewWindow: true // open hyperlinks in a new windows/tab
}
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,
linksInNewWindow: false
}
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 meaninginsertorderedlist
: create an ol>li
listinsertunorderedlist
: create a ul>li
listindent
: indent list / blockquote blockoutdent
: outdent list / blockquote blockbold
: wrap the text selection in a b
tagitalic
: wrap the text selection in an i
tagunderline
: wrap the text selection in a u
tagcreatelink
: insert link to the text selectioninserthorizontalrule
: insert a hr
taginsertimage
: insert an image (img
) tagYou can set options.titles
to an object with properties that match the toolbar actions. The value of each property
will be used as the title attribute on the icon. Most browsers will display the title attribute as a tooltip when
the mouse hovers over the icon.
options.title = {
'blockquote': 'Blockquote'
'createlink': 'Hyperlink'
'insertimage': 'Image'
}
If you are using Bootstrap or jQueryUI, you can standardize the tooltip style by adding $('i.pen-icon').tooltip()
to your JavaScript.
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
It's an experimental feature
var pen = new Pen('#editor');
pen.toMd(); // return a markdown string
The syntax convertor will be enabled automatically by linking markdown.js
after `pen.js:
<script src="https://github.com/sofish/pen/raw/master/src/pen.js"></script>
<script src="https://github.com/sofish/pen/raw/master/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:
#
at the line start-
or *
1.
>
-
, *
, .
will create a <hr />
, like ......
Licensed under MIT.