Popularity
3.3
Declining
Activity
0.0
Stable
1,045
45
146

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
License: MIT License
Tags: Editors    
Latest version: v1.0.0

popline alternatives and similar libraries

Based on the "Editors" category.
Alternatively, view popline alternatives based on common mentions on social networks and blogs.

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

Add another 'Editors' Library

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'});

Popup Position

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.