Popularity
3.3
Growing
Activity
1.3
Growing
1,041
47
150

Description

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

Code Quality Rank: L4
Programming language: JavaScript
Tags: Editors    
Latest version: v1.0.0

popline alternatives and similar libraries

Based on the "Editors" category

Do you think we are missing an alternative of popline or a related project?

Add another 'Editors' Library

Popular Comparisons

SaaSHub - Software Alternatives and Reviews
View more from us

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:

<script type="text/javascript" src="../scripts/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/jquery.popline.min.js"></script>

Or Load the popline plugins which you want:

<script type="text/javascript" src="../scripts/jquery.popline.js"></script>
<script type="text/javascript" src="../scripts/plugins/jquery.popline.link.js"></script>
<script type="text/javascript" src="../scripts/plugins/jquery.popline.decoration.js"></script>
...

Load font-awesome and popline theme:

<link rel="stylesheet" type="text/css" href="../font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="../themes/default.css" />

Add a editable div to page:

<div class='editor' contenteditable='true'></div>

Initialize you popline for you editor:

$(".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 

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

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

$(".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.

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

Extension

Todo

Theme customize

default

default

popclip

popclip

Hack the theme css and create yours.

Example

http://kenshin54.github.io/popline/

Compatibility

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

Sponsorer

A Sepcial thanks to Artlogic'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


*Note that all licence references and agreements mentioned in the popline README section above are relevant to that project's source code only.