Get new jQuery plugins just once a week

×

Dante Editor

FavoriteLoadingAdd to favorites

December 24, 2014

Dante | javascript plugin for a Medium wysiwyg editor clone

Dante Editor is a javascript library for a slick rich wysiwg editor similar to Medium editor.

Created by Miguel Michelson Martinez

Download

Example

dante editor

wysiwg


Dante Editor

Hey!, Did you know there is a new version of Dante?, check it out at https://github.com/michelson/dante2

![Gitter](https://badges.gitter.im/Join Chat.svg)

(This library is free and will stay free, but needs your support to sustain its development. There are lots of desirable new features and maintenance to do. If you work for a company using Dante or have the means to do so, please consider financial support)

PayPal

Just another Medium editor clone.

Motivation:

So far we have tried all the Medium.com wysiwyg clones out there, those are really great, and each have their pros and cons. But none of them has all the features that the real medium editor provides. So we wondered, How complicated could be write our own version of Medium's wysiwyg?

Demo:

http://michelson.github.io/Dante/

Until now We´ve implemented the following features:

Features:

Usage:

HTML:

  <div id="editor">
    your content here
  </div>

Javascript:

  <script type="text/javascript">
    editor = new Dante.Editor(
      {
        el: "#editor",
        upload_url: "/images.json", //it expect an url string in response like /your/server/image.jpg or http://app.com/images/image.jpg
        store_url: "/save" //post to save

      }
    );
    editor.start()
  </script>

Configuration options:

Basic:

Widgets & Tooltips

Behaviors

Store Behavior:

Uploader:

Embed tool:

Suggest Behavior (new!)

Initialization

title

Use the title option in the initializer to pass a title to Dante.

body

Use the following code to get your text into the Dante editor's body:


<div id="editor editable" > <%= @post.excerpt %> </div>

Rails / AssetPippeline

in Gemfile

gem "dante-editor"

Sanitize.js and Underscore.js are Dante dependencies- If you don't already have those installed, add those to your gemfile as well.

gem 'underscore-rails' gem 'rails-sanitize-js'

stylesheets:

@import "dante";

javascripts:

//= require 'dante'

If you just added the Underscore.js and Sanitize.js gems, add this as well: //= require sanitize //= require underscore

Donate

Can I donate to support the development of Dante Editor?

PayPal

if you want to donate you will enable us to spend more time improving the library and we will be greatly thankful with you. If your company uses Dante please consider making a contribution. We are available for hire to work on or with Dante. Thanks!

Disclaimer:

This Library will work fine on latest versions of Chrome/Safari/FF/IE. We don't have any intention to target all browsers versions, really... if you like this library and you need backward compatibility with an specific version you can submit a patch to help with the development or just upgrade your shitty browser :D

BTW , this library is an official beta release, so there are known bugs that we are currently working on. see TODO list below.

Dependencies:

Some dependencies are required in order to Dante editor works properly:

Drop underscore and jquery dependencies are on our roadmap.

Development:

There is a web app for development to work with the source files and make the proper tests. To use application:

Installation:

Start app:

bundle exec rackup config.ru and visit http://localhost:9292

or

bundle exec middleman (this is without upload server) and visit localhost:4567

or

foreman start and visit http://localhost:9292

Tests:

tests are located in source/tests and /source/assets/spec folder and accessible by visit host/tests

TODO

read todo

MAINTAINERS:

CONTRIBUTORS

Big kudos to our valued contributors. Check them all at:

https://github.com/michelson/dante/graphs/contributors

ALTERNATIVES

ACKNOWLEDGMENTS:

LICENSE

Licensed under MIT. 2014

Dante Editor

Related posts:

Long Press
Tristate
dropify

To install using Bower
bower install wysiwg

dante editor

http://jquer.in/wp-content/uploads/2014/12/Dante-Editor.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever