https://github.com/kenshin54/popline

Popline is an HTML5 Rich-Text-Editor Toolbar
https://github.com/kenshin54/popline

Last synced: 4 days ago
JSON representation

Popline is an HTML5 Rich-Text-Editor Toolbar

• Host: GitHub
• URL: https://github.com/kenshin54/popline
• Owner: kenshin54
• License: mit
• Created: 2013-06-03T07:58:15.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2023-10-20T10:42:04.000Z (over 1 year ago)
• Last Synced: 2025-01-14T17:53:54.623Z (11 days ago)
• Language: JavaScript
• Homepage: kenshin54.github.io/popline
• Size: 377 KB
• Stars: 1,057
• Watchers: 44
• Forks: 146
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

• awesome-wysiwyg - popline - An HTML5 Rich-Text-Editor Toolbar. (JQuery Based)
• awesome-web-editor - popline - Popline is an HTML5 Rich-Text-Editor Toolbar. (Rich text editor)
• awesome-wysiwyg-editors - popline - 一个 HTML5 富文本编辑器的工具栏。  (基于 JQuery)
• awesome-javascript - popline - Popline is an HTML5 Rich-Text-Editor Toolbar - ★ 1042 (Editors)
• starred-awesome - popline - Popline is an HTML5 Rich-Text-Editor Toolbar (JavaScript)

README

        
popline

============

Popline is a non-intrusive WYSIWYG editor that shows up only after selecting a piece of text on the page, inspired by popclip.

## Usage

Load jQuery and popline:

```html

```

Or Load the popline plugins which you want:

```html

...

```

Load font-awesome and popline theme:

```html

```

Add a editable div to page:

```html



```


Initialize you popline for you editor:

```js

$(".editor").popline();

```

## View Mode

Popline also support `View Mode`, you can send a twitter, a facebook message, pin an image to pinterest, search with google in `View Mode` 

```js

$(".editor").popline({mode: 'view'});

```

## Popup Position

Popline can popup at top of the paragraph which you selected (like Medium) or popup on the mouse pointer position.

```js

$(".editor").popline({position: 'fixed'});

$(".editor").popline({position: 'relative'});

```

The default option is 'fixed'.

## Enable / Disable / Reorder plugins

You can enable/disable/reorder plugins when popline initialize.

```js

$(".editor").popline({enable: ["link", ["justify", ["justifyCenter", "indent"]] , "orderedList", "unOrderedList"]});

$(".editor").popline({disable: ["link", "blockquote"]});

```

## Extension

Todo

## Theme customize

#### default

![default](https://raw.github.com/kenshin54/popline/master/img/default.png "default")

#### popclip

![popclip](https://raw.github.com/kenshin54/popline/master/img/popclip.png "popclip")

Hack the theme css and create yours.

## Example

## Compatibility

Tested on Chrome 27.0+, Safari 6.0.4+, Firefox 21.0+, Opera 15.0+, IE 8+

## Sponsorer

A Sepcial thanks to [Artlogic](http://www.artlogic.net/)'s sponsor for IE8+ browsers compatibility support.

## Contributing

1. Fork it

2. Create your feature branch (`git checkout -b my-new-feature`)

3. Commit your changes (`git commit -am 'Add some feature'`)

4. Push to the branch (`git push origin my-new-feature`)

5. Create new Pull Request

License

-------

Copyright (c) 2014 kenshin54. Distributed under the MIT License. See LICENSE.txt for further details.

[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/kenshin54/popline/trend.png)](https://bitdeli.com/free "Bitdeli Badge")