Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/michelson/Dante

Just another Medium wysiwyg editor clone
https://github.com/michelson/Dante

collaborative-editing editor medium-clone medium-editor rich-text-editor wysiwyg wysiwyg-editor

Last synced: 2 months ago
JSON representation

Just another Medium wysiwyg editor clone

Host: GitHub
URL: https://github.com/michelson/Dante
Owner: michelson
Created: 2014-10-17T06:02:14.000Z (over 9 years ago)
Default Branch: main
Last Pushed: 2023-08-26T19:03:59.000Z (10 months ago)
Last Synced: 2024-04-13T18:06:32.230Z (3 months ago)
Topics: collaborative-editing, editor, medium-clone, medium-editor, rich-text-editor, wysiwyg, wysiwyg-editor
Language: JavaScript
Homepage: https://dante-editor.dev
Size: 22.2 MB
Stars: 1,965
Watchers: 46
Forks: 186
Open Issues: 37
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml

Lists

awesome-wysiwyg-editors - Dante Editor - 只是另一个 Medium wysiwyg 编辑器的克隆。 ![github star](https://img.shields.io/github/stars/michelson/Dante.svg?style=social&label=Star) (基于 JQuery)
awesome-stars - Dante - Just another Medium wysiwyg editor clone (HTML)
annals-of-awesome - Resource - Another Medium WYSIWYG editor (Web Development / General)
awesome-wysiwyg - Dante Editor - Just another Medium wysiwyg editor clone. (JQuery Based)
awesome-stars - michelson/Dante - Just another Medium wysiwyg editor clone (JavaScript)

README

# Dante 3 - This is it! 🔥

[![Rollup Build](https://github.com/michelson/Dante/actions/workflows/ci.yml/badge.svg)](https://github.com/michelson/Dante/actions/workflows/ci.yml)

**Just another medium clone built on top of ProseMirror's / TipTap**
--------------------------------------------------------------------

> Dante3 is a port from [Dante2 (Draftjs) ](https://github.com/michelson/Dante/tree/master/packages/dante2). This version is built on top of [TipTap](https://www.tiptap.dev/) and reaches all Dante2's features with a shiny ultra mega super uber maintainable architecture.

https://user-images.githubusercontent.com/11976/120087165-bb5c4f00-c0b3-11eb-9002-97c480f3725a.mp4

See the demo at: [dante-editor.dev](https://dante-editor.dev)

**Why rewrite a new version of Dante?**
---------------------------------------

The previous version (Dante2) was made on DraftJs, that's a facebook library to build WYSIWYG editor, I'd choose that technology because it implemented a very interesting data model and abstracted many parts of the heuristics implementation that [Dante1 (the previous version)](https://github.com/michelson/Dante/tree/master/packages/dante1-legacy) built as a naive implementation relying a lot on DOM manipulation, So Dante2 was great and is working on a ton of production websites. Sadly over the last years this library has not received much attention from maintainers. Among the ~700 unattended reported issues there are some that have become a deal breaker for me:

- Bad mobile support.

- ~1MB added to your bundle (immutablejs is heavy)

- Not created for realtime collab.

**My bet, TipTap**

After shopping many editors libraries, I mean after tried to implement Dante on almost all of them **(Trix, Editorjs, Quilljs, Slate, Prosemirror)** I've **TipTap** library (which is based on Prosemirror)., I guess all editors libraries have their own flaws but after review it all TipTap is the best of it's class, very well designed/architectured, and I love the community around their ecosystem. So that's it.

**Features:**

- Configurable and extensible extensions / plugins / components

- Undo/redo.

- Save Content as a data JSON/HTML structure.

- Load Content as a data JSON/HTML structure.

- Styled components Theme support (built in light/dark themes).

**Block based content**:

Dante editor can be extended with (React) components to, currently there are default components to be used as is:

- Image upload for paste html.

- Video embed.

- Video Recorder.

- Embed.

- Divider.

- Speech.

- Giphy.

**Installation**
----------------

`npm install dante3` or `yarn add dante3`

**Usage**
---------

Component Based

```

### **Options:**

Many configuration options and plugin usage can be found on the documentation page:

See [dante-editor.dev](https://dante-editor.dev)

**Development**
---------------

### **Installation**

- `git clone https://github.com/michelson/dante`

**dependencies**

- `npm install` or `yarn install`

### **Building**

- `npm dante3_build` or `yarn dante3_build`

### **dev install:**

- lerna bootstrap

- yarn dev

**Status**
----------

> Dante3 is on beta, actively maintained, with all the features that Dante2 has. As is relying on TipTap (which is based on Prosemirror) which has a better browser support and mobile support. Also has realtime collab capabilities.

**Monorepo**
------------

This repository now contains prior Dante versions, located in the [packages](https://github.com/michelson/Dante/tree/master/packages) folder. so Dante1*, Dante2 and Dante3 lives in the same repo.

> * Dante(1) is not maintained anymore.

### **Open source license**

Dante is licensed under MIT, so you are free to do whatever you want. If you are using it commercially, become one of our wonderful sponsors to fund the maintenance, support and development of Dante now and in the future.

### **💓 Your sponsorship**

> Your sponsorship helps to maintain, update, support and develop all of our open source projects, including tiptap and many more.

### **Acknowledgments**

Prosemirror library & Tiptap authors

## Workspaces

we use npm workspaces to manage the monorepo, for instance to install a dependence in some package, use:

`npm install --workspace=Dante2`

`npm install some-dep --workspace=Dante2`

### build

+ npm run dante3:build
+ npm run dante2:build

### deploy

+ npm run dante3:publish
+ npm run dante2:publish

npm install rollup-plugin-auto-external --save-dev --workspace=dante3

npm run dante3:build