Description
Popline is a non-intrusive WYSIWYG editor that shows up only after selecting a piece of text on the page, inspired by popclip.
popline alternatives and similar libraries
Based on the "Editors" category.
Alternatively, view popline alternatives based on common mentions on social networks and blogs.
-
quill
Quill is a modern WYSIWYG editor built for compatibility and extensibility. -
slate
A completely customizable framework for building rich text editors. (Currently in beta.) -
Quasar Framework
Quasar Framework - Build high-performance VueJS user interfaces in record time -
TOAST UI Editor
๐๐ Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. -
medium-editor
Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution. -
TinyMCE
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular -
jsoneditor
A web-based tool to view, edit, format, and validate JSON -
CKEditor 5
Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing. -
SimpleMDE
A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking. -
bootstrap-wysiwyg
Tiny bootstrap-compatible WYSIWYG rich text editor. -
wysihtml5
Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles. -
EpicEditor
EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more. For developers, it offers a robust API, can be easily themed, and allows you to swap out the bundled Markdown parser with anything you throw at it. -
Trumbowyg
A lightweight and amazing WYSIWYG JavaScript editor under 10kB -
ContentTools
A JS library for building WYSIWYG editors for HTML content. -
jquery-notebook
A modern, simple and elegant WYSIWYG rich text editor. -
Mobiledoc Kit
A toolkit for building WYSIWYG editors with Mobiledoc -
ckeditor-releases
Official distribution releases of CKEditor 4. -
Materio Free Vuetify VueJS Admin Template
Production Ready, Carefully Crafted, Extensive Vuetifty Free Admin Template ๐คฉ -
Bangle.dev
Collection of higher level rich text editing tools. It powers the local only note taking app https://bangle.io -
walker.js
Simple & lightweight tracking implementation layer based on attributes -
Zepcode
โ๏ธ Zeplin extension that generates Swift snippets from colors, fonts, and layers -
#<Sawyer::Resource:0x00007fbac98da410>
Basic operations on iterables -
react-component-widget
Component for resizing and repositioning charts, parsing transferred data when working with Recharts library. -
convert-plain-text-into-links
An npm module which replaces any plain text link within string with achor tag -
React Chat UI
Build your own chat UI with React components in a few minutes. Chat UI Kit from minchat.io is an open source UI toolkit for developing web chat applications.
Appwrite - The Open Source Firebase alternative introduces iOS support
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of popline or a related project?
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
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
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request
License
Copyright (c) 2014 kenshin54. Distributed under the MIT License. See LICENSE.txt for further details.
*Note that all licence references and agreements mentioned in the popline README section above
are relevant to that project's source code only.