Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sofish/pen
enjoy live editing (+markdown)
https://github.com/sofish/pen
editor pen pen-editor wysiwyg
Last synced: about 2 months ago
JSON representation
enjoy live editing (+markdown)
- Host: GitHub
- URL: https://github.com/sofish/pen
- Owner: sofish
- License: other
- Created: 2013-08-29T16:09:40.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2018-09-23T14:27:04.000Z (almost 6 years ago)
- Last Synced: 2024-07-19T19:52:54.475Z (2 months ago)
- Topics: editor, pen, pen-editor, wysiwyg
- Language: JavaScript
- Homepage: https://sofish.github.io/pen
- Size: 259 KB
- Stars: 4,799
- Watchers: 140
- Forks: 410
- Open Issues: 65
-
Metadata Files:
- Readme: readme.md
- License: license.txt
Awesome Lists containing this project
- awesome-wysiwyg - Pen Editor - Enjoy live editing (+markdown). (Standalone)
- awesome - sofish/pen - enjoy live editing (+markdown) (JavaScript)
- front-awesome - Pen
- awesome-javascript - pen - enjoy live editing (+markdown) - ★ 4512 (Editors)
- awesome-web-editor - pen - enjoy live editing (+markdown). (Markdown editor)
- awesome-starred - sofish/pen - enjoy live editing (+markdown) (others)
- awesome-wysiwyg-editors - Pen Editor - 享受实时编辑（+ markdown）。  (独立的)
README
# Pen Editor
- **LIVE DEMO:** [http://sofish.github.io/pen](http://sofish.github.io/pen)
- **Markdown is supported**
- **Build status:** [](https://travis-ci.org/sofish/pen)
******************
******************
## 0. source code
You can clone the source code from github, or using bower.
```
bower install pen
```
## 1. installation
#### 1.1 init with id attribute
```js
var editor = new Pen('#editor');
```
#### 1.2 init with an element
```js
var editor = new Pen(document.getElementById('editor'));
```
#### 1.3 init with options
```js
var options = {
editor: document.body, // {DOM Element} [required]
class: 'pen', // {String} class of the editor,
debug: false, // {Boolean} false by default
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);
```
## 2. configure
The following object sets up the default settings of Pen:
```js
defaults = {
class: 'pen',
debug: false,
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](https://github.com/sofish/pen#13-init-with-options):
#### 2.1 Fallback for old browser
You can set `defaults.textarea` to a piece of HTML string, by default, it's ``。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
- `inserthorizontalrule`: insert a `hr` tag
- `insertimage`: insert an image (`img`) tag
#### 2.5 Add tooltips to the toolbar icons
You 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.
```js
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.
#### 2.6 Prevent unsafe page redirect
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`.
#### 2.7 Disable and Re-enable editor
You can disable the pen editor by call `destroy()` method of the `var pen = new Pen(options)` object. like:
```js
var pen = new Pen('#editor');
pen.destroy(); // return itself
```
And, there's a corresponding method called `rebuild()` to re-enable the editor:
```js
pen.rebuild(); // return itself
```
#### 2.8 Export content as markdown
It's an experimental feature
```js
var pen = new Pen('#editor');
pen.toMd(); // return a markdown string
```
## 3. markdown syntax support
#### 3.1 install
The syntax convertor will be enabled automatically by linking `markdown.js` after `pen.js:
```html
```
#### 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 `> `
- Horizontal Rule: more than 3 `-`, `*`, `.` will create a `
`, like `......`
## 4. license
Licensed under MIT.
## 5. trusted by *
[](https://github.com/teambition)